pfSense.css has been moved to pfSense-EXP.css

pfSense.css has been reverted to the version from about a week ago
Please go to System->General setup->Web configurator and select the css file you would prefer to work with

2 files changed, 740 insertions, 355 deletions

diff --git a/src/usr/local/www/bootstrap/css/pfSense-EXP.css b/src/usr/local/www/bootstrap/css/pfSense-EXP.css
new file mode 100644
index 0000000..fbc7534
--- /dev/null
+++ b/src/usr/local/www/bootstrap/css/pfSense-EXP.css
@@ -0,0 +1,612 @@
+@import url("/bootstrap/css/bootstrap.min.css");
+@import url("/bootstrap/glyphicons/glyphicons-halflings.css");
+@import url("/bootstrap/fonts/roboto.css");
+
+html {
+    position: relative;
+    min-height: 100%;
+}
+
+body {
+    margin-bottom: 80px;
+    background-color: #F5F5F5;
+    font-family: 'Roboto', sans-serif;
+}
+
+body.no-menu #jumbotron {
+    padding: 100px 0;
+    background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%)
+}
+
+body.no-menu {
+    background: url("/logo-black.png") no-repeat center 30px;
+    padding-top: 70px;
+}
+
+body.no-menu #jumbotron {
+    margin-top: 75px;
+}
+
+body#index .icons {
+    float: right;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+a.fa, i.fa {
+    font-size: 18px;
+}
+
+h1 a:link, h1 a:visited {
+    color: #000000;
+    text-decoration: none !important;
+}
+
+h1.page-header {
+    display: none;
+}
+
+h1 a:hover, h1 a:active { 
+    color: #000000; 
+    text-decoration: none !important; 
+}
+
+.container.fixed {
+    padding-top: 60px;
+}
+
+.breadcrumb {
+    font-size: 22px;
+    background-color: #E0E0E0;
+    margin-bottom: 10px;
+    border-radius: 0; 
+    box-shadow: 0px 1px 10px rgba(0,0,0,.4);
+}
+
+.breadcrumb>li+li:before {
+    color: #B71C1C;
+}
+
+ul.context-links li a {
+    color: #B71C1C;
+}
+
+.ui-sortable-handle {
+    cursor: move;
+}
+
+tr.disabled td,
+tr.disabled th {
+    opacity: .5;
+}
+
+.contains-table table {
+    border: 1px solid #ddd;
+}
+
+/** Content structure */
+.table-responsive {
+    clear: both;
+    margin-bottom: 0px;
+}
+
+.page-header {
+    padding-bottom: 4px;
+    margin-bottom: 10px;
+}
+
+ul.context-links li a {
+
+}
+
+/* navigation */
+.navbar {
+    margin-bottom: 10px;
+}
+
+.navbar-inverse {
+    background-color: #000000;
+}
+
+.navbar-brand {
+    padding-top: 3px;
+}
+
+.nav>li>a {
+    padding: 14px 19px 10px 19px;
+    border-bottom: 5px solid #F5F5F5;
+    border-radius: 0;
+    color: #B71C1C;
+}
+
+.nav>li>a:focus, .nav>li>a:hover {
+    border-bottom: 5px solid #B71C1C;
+    background-color: #f5f5f5;
+}
+
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav li.open>a, .nav li.open>a:focus, .nav-pills>li.active>a:hover {
+    border-bottom: 5px solid #B71C1C;
+    color: #B71C1C;
+    background-color: #F5F5F5;
+}
+
+.navbar-nav >li>a {
+    border-bottom: 5px solid #000000;
+}
+
+.nav-tabs>li>a {
+    border-bottom: 5px solid #F5F5F5;
+    margin-bottom: 1px;
+}
+
+.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover, .nav-tabs>li>a:hover {
+    border-left: 1px solid #F5F5F5;
+    border-right: 1px solid #F5F5F5;
+    border-top: 1px solid #F5F5F5;
+    background-color: #F5F5F5;
+    border-bottom: 5px solid #B71C1C;
+    margin-bottom: 0;
+    color: #B71C1C;
+    box-shadow: none;
+}
+
+.nav-tabs {
+    border-bottom: 1px solid #B71C1C;
+    margin-bottom: 15px;
+}
+
+.nav-pills {
+    margin-bottom: 20px;
+}
+
+.dropdown-menu>li>a {
+    padding: 5px 20px; 
+}
+/* end navigation */
+
+.alert {
+    border-radius: 0;
+    box-shadow: 0px 1px 10px rgba(0,0,0,0.1);
+}
+
+.panel {
+    margin-bottom: 10px;
+    border-radius: 0; 
+    box-shadow: 0px 3px 7px rgba(0,0,0,.1);
+}
+
+.panel-default>.panel-heading {
+    color: #fff;
+    background-color: #424242;
+    letter-spacing: 1px;
+}
+
+.panel-heading {
+    padding: 5px 15px;
+    border-radius: 0; 
+}
+
+.panel-title {
+    font-size: 20px;
+    text-transform: capitalize;
+}
+
+.panel-body {
+    padding: 0px;
+}
+
+#login .panel-heading {
+    padding: 10px 15px
+}
+
+.content {
+    padding: 10px;
+}
+
+.control-label, th {
+    text-transform: capitalize;
+}
+
+.form-horizontal {
+    margin-bottom: 10px;
+    overflow: hidden;
+}
+
+.form-horizontal .checkbox {
+    padding: 3px 16px;
+}
+
+.form-control {
+    height: 24px;
+    padding: 0 6px;
+    margin-bottom: 5px;
+}
+
+.form-control option {
+    padding: inherit;
+}
+
+#login .form-control {
+    height: 34px;
+}
+
+#login .form-group {
+    border: none;
+}
+
+.form-group {
+    margin: 0;
+    padding: 7px 5px 5px 5px;
+    border-bottom: 1px solid #E0E0E0;
+}
+
+.form-group:last-child {
+    border-bottom: none;
+}
+
+.input-group-addon {
+    padding: 0 12px;
+}
+
+.table {
+    margin-bottom: 0;
+}
+
+.table>tbody>tr>td {
+    padding: 4px 4px 4px 10px;
+}
+
+/* active table row */
+.table>tbody>tr.active>td, .table>tbody>tr.active>th, .table>tbody>tr>td.active, .table>tbody>tr>th.active, .table>tfoot>tr.active>td, .table>tfoot>tr.active>th, .table>tfoot>tr>td.active, .table>tfoot>tr>th.active, .table>thead>tr.active>td, .table>thead>tr.active>th, .table>thead>tr>td.active, .table>thead>tr>th.active {
+    background-color: #BDBDBD;
+}
+
+/* active table row on hover */
+.table-hover>tbody>tr.active:hover>td, .table-hover>tbody>tr.active:hover>th, .table-hover>tbody>tr:hover>.active, .table-hover>tbody>tr>td.active:hover, .table-hover>tbody>tr>th.active:hover {
+    background-color: #BDBDBD;
+}
+
+.popover {
+    max-width: none;
+}
+
+.help-block {
+    margin-bottom: 0;
+}
+
+.action-buttons {
+    text-align: right;
+    margin-top: 10px;
+    margin-bottom: 20px;
+}
+
+/** Form validation */
+.input-errors ul {
+    margin-top: 20px;
+}
+
+/** Page header with title and breadcrumb */
+.header {
+    position: relative;
+}
+
+.header .page-header {
+    margin-top: 0;
+}
+
+.header .context-links {
+    position: absolute;
+    right: 15px;
+    top: 15px;
+}
+
+.header .context-links li {
+    float: left;
+    display: inline;
+    margin-left: 10px;
+}
+
+/** Form tweaks */
+form .btn + .btn {
+    margin-left: 5px;
+}
+
+.input-group-inbetween {
+    border-left: 0;
+}
+
+.user-duplication .controls {
+    margin-top: 10px;
+}
+
+.checkbox.multi label {
+    display: block;
+}
+
+.checkbox.multi .btn {
+    margin-top: 5px;
+}
+
+.col-sm-10 .form-control {
+    width: calc(50% - 15px); /* substract 15px to match a .col-sm-5; which satisfies my OCD */
+}
+
+@media (max-width: 991px) {
+    .col-sm-10 .form-control {
+        width: 100%;
+    }
+}
+
+/** Page footer */
+.footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    background-color: #212121;
+    padding-top: 10px;
+    text-align: center;
+}
+
+footer a {
+    color: #ffffff;
+}
+
+
+/** Homepage / dashboard */
+[id^="widgets-col"] {
+    min-height: 300px;
+}
+
+.widget .panel-heading {
+    background-color: #757575;
+}
+
+#widgetSequence {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    padding: 20px 0;
+    width: 100%;
+    z-index: 100;
+    text-align: center;
+    background: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #ddd;
+}
+
+/** Styling for jQuery autocomplete widget */
+.ui-autocomplete {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    float: left;
+    display: none;
+    min-width: 160px;
+    padding: 4px 0;
+    margin: 0 0 10px 25px;
+    list-style: none;
+    background-color: #ffffff;
+    border-color: #ccc;
+    border-color: rgba(0, 0, 0, 0.2);
+    border-style: solid;
+    border-width: 1px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+    *border-right-width: 2px;
+    *border-bottom-width: 2px;
+}
+
+/** Disable the autocomplete helper text */
+.ui-helper-hidden-accessible {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+/** Override the bootstrap progress bar margins */
+.progress {
+    margin-bottom: 0px;
+    height: 14px;
+}
+
+#wizard .progress {
+    margin-bottom: 10px;
+}
+
+.progress-bar {
+    background-color: #B71C1C;
+}
+
+.panel-body.collapse.in {
+    overflow-x: auto;
+}
+
+/** create icon colors */
+.icon-black
+{
+    color: #000000;
+}
+
+.icon-danger
+{
+    color: #D9534F;
+}
+
+.icon-success
+{
+    color: #5CB85C;
+}
+
+.icon-primary
+{
+    color: #337AB7;
+}
+
+.icon-warning {
+    color: #FDD835;
+}
+
+.text-warning {
+    color: #F57F17;
+}
+
+.btn-success {
+    background-color: #43A047;
+}
+
+.btn-danger {
+    background-color: #B71C1C;
+}
+
+.btn-primary {
+    background-color: #1976D2;
+}
+
+.bg-primary {
+    color: #000;
+    background-color: #009688;
+}
+
+.bg-info {
+    color: #000;
+    background-color: #80DEEA;
+}
+
+.bg-danger {
+    color: #000;
+    background-color: #EF9A9A;
+}
+
+.bg-warning {
+    color: #000;
+    background-color: #FFF9C4;
+}
+
+.bg-success {
+    color: #000;
+    background-color: #A5D6A7;
+}
+
+/** icons are often used with onclick actions, so we need the cursor to change to a pointer */
+.icon-pointer
+{
+    cursor: pointer;
+}
+
+.icon-embed-btn
+{
+    font-size: 15px;
+    vertical-align: middle;
+    color: white;
+}
+
+/* Used when you need an icon to act as a submit button **/
+.button-icon
+{
+    color: #337AB7;
+    background: none;
+    border: 0px;
+}
+
+.btn
+{
+    padding-right: 4px;
+    padding-left: 4px;
+}
+
+.list-group {
+    margin-bottom: 0;
+}
+
+/* icons in the dashboard panel headings should pull-right **/
+.widget-heading-icon
+{
+    display: block;
+    float:  right;  
+}
+
+.widget-heading-icon .fa {
+    color: #fff;
+}
+
+.widget-heading-icon .fa:hover {
+    color: #e0e0e0;
+}
+
+/* ipsec widget placeholder */
+#ipsec-Overview, #ipsec-tunnel, #ipsec-mobile {
+    background-color:#EEEEEE;
+}
+
+/* All pfSense textareas benefit from using a fixed width font **/
+textarea
+{
+    font-family: monospace;
+    font-size: 12px;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+}
+
+@media (max-width: 1199px) {
+    .nav>li>a {
+        padding: 14px 9px 10px 9px;
+    }
+ }
+
+ @media (max-width: 991px) {
+    /* change top navbar from horizontal to vertical */
+    .navbar-header {
+        float: none;
+    }
+    .navbar-toggle {
+        display: block;
+    }
+    .navbar-collapse {
+        border-top: 1px solid transparent;
+        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+    }
+    .navbar-collapse.collapse {
+        display: none!important;
+    }
+    .navbar-nav {
+        float: none!important;
+        margin: 7.5px -15px;
+    }
+    .navbar-nav>li {
+        float: none;
+    }
+    .navbar-nav>li>a {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+    .navbar-text {
+        float: none;
+        margin: 15px 0;
+    }
+    /* since 3.1.0 */
+    .navbar-collapse.collapse.in { 
+        display: block!important;
+    }
+    .collapsing {
+        overflow: hidden!important;
+    }
+    .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
+        max-height: none !important;
+    }
+}
diff --git a/src/usr/local/www/bootstrap/css/pfSense.css b/src/usr/local/www/bootstrap/css/pfSense.css
index fbc7534..b0eced3 100644
--- a/src/usr/local/www/bootstrap/css/pfSense.css
+++ b/src/usr/local/www/bootstrap/css/pfSense.css
@@ -1,221 +1,110 @@
 @import url("/bootstrap/css/bootstrap.min.css");
 @import url("/bootstrap/glyphicons/glyphicons-halflings.css");
-@import url("/bootstrap/fonts/roboto.css");
 
-html {
-    position: relative;
-    min-height: 100%;
-}
-
-body {
-    margin-bottom: 80px;
-    background-color: #F5F5F5;
-    font-family: 'Roboto', sans-serif;
+h1 a:link{
+	color: #000000;
+	text-decoration: none !important;
 }
 
-body.no-menu #jumbotron {
-    padding: 100px 0;
-    background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%)
-}
-
-body.no-menu {
-    background: url("/logo-black.png") no-repeat center 30px;
-    padding-top: 70px;
+h1.page-header {
+	display: none;
 }
 
-body.no-menu #jumbotron {
-    margin-top: 75px;
-}
 
-body#index .icons {
-    float: right;
-}
-
-a:hover {
-    text-decoration: none;
-}
+h1 a:visited { color: #000000; }
+h1 a:hover, h1 a:active { color: #000000; text-decoration: none !important; }
 
-a.fa, i.fa {
-    font-size: 18px;
+.breadcrumb {
+	font-size: 22px;
 }
 
-h1 a:link, h1 a:visited {
-    color: #000000;
-    text-decoration: none !important;
+html {
+	position: relative;
+	min-height: 100%;
 }
 
-h1.page-header {
-    display: none;
+body {
+	padding-top: 60px;
+	margin-bottom: 80px;
 }
 
-h1 a:hover, h1 a:active { 
-    color: #000000; 
-    text-decoration: none !important; 
+.navbar-brand {
+	padding-top: 3px;
 }
 
-.container.fixed {
-    padding-top: 60px;
+body.no-menu #jumbotron {
+	padding: 100px 0;
+	background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%)
 }
 
-.breadcrumb {
-    font-size: 22px;
-    background-color: #E0E0E0;
-    margin-bottom: 10px;
-    border-radius: 0; 
-    box-shadow: 0px 1px 10px rgba(0,0,0,.4);
+body.no-menu {
+	background: url("/logo-black.png") no-repeat center 30px;
+	padding-top: 70px;
 }
 
-.breadcrumb>li+li:before {
-    color: #B71C1C;
+body.no-menu #jumbotron {
+	margin-top: 75px;
 }
 
-ul.context-links li a {
-    color: #B71C1C;
+body#index .icons {
+	float: right;
 }
 
 .ui-sortable-handle {
-    cursor: move;
+	cursor: move;
 }
 
 tr.disabled td,
 tr.disabled th {
-    opacity: .5;
+	opacity: .5;
 }
 
 .contains-table table {
-    border: 1px solid #ddd;
-}
-
-/** Content structure */
-.table-responsive {
-    clear: both;
-    margin-bottom: 0px;
-}
-
-.page-header {
-    padding-bottom: 4px;
-    margin-bottom: 10px;
-}
-
-ul.context-links li a {
-
-}
-
-/* navigation */
-.navbar {
-    margin-bottom: 10px;
-}
-
-.navbar-inverse {
-    background-color: #000000;
-}
-
-.navbar-brand {
-    padding-top: 3px;
-}
-
-.nav>li>a {
-    padding: 14px 19px 10px 19px;
-    border-bottom: 5px solid #F5F5F5;
-    border-radius: 0;
-    color: #B71C1C;
-}
-
-.nav>li>a:focus, .nav>li>a:hover {
-    border-bottom: 5px solid #B71C1C;
-    background-color: #f5f5f5;
-}
-
-.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav li.open>a, .nav li.open>a:focus, .nav-pills>li.active>a:hover {
-    border-bottom: 5px solid #B71C1C;
-    color: #B71C1C;
-    background-color: #F5F5F5;
-}
-
-.navbar-nav >li>a {
-    border-bottom: 5px solid #000000;
-}
-
-.nav-tabs>li>a {
-    border-bottom: 5px solid #F5F5F5;
-    margin-bottom: 1px;
-}
-
-.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover, .nav-tabs>li>a:hover {
-    border-left: 1px solid #F5F5F5;
-    border-right: 1px solid #F5F5F5;
-    border-top: 1px solid #F5F5F5;
-    background-color: #F5F5F5;
-    border-bottom: 5px solid #B71C1C;
-    margin-bottom: 0;
-    color: #B71C1C;
-    box-shadow: none;
-}
-
-.nav-tabs {
-    border-bottom: 1px solid #B71C1C;
-    margin-bottom: 15px;
+	border: 1px solid #ddd;
 }
 
 .nav-pills {
-    margin-bottom: 20px;
+	margin-bottom: 20px;
 }
 
-.dropdown-menu>li>a {
-    padding: 5px 20px; 
+/** Content structure */
+.table-responsive {
+	clear: both;
+	margin-bottom: 0px;
 }
-/* end navigation */
 
-.alert {
-    border-radius: 0;
-    box-shadow: 0px 1px 10px rgba(0,0,0,0.1);
+.navbar {
+	margin-bottom: 10px;
 }
 
-.panel {
-    margin-bottom: 10px;
-    border-radius: 0; 
-    box-shadow: 0px 3px 7px rgba(0,0,0,.1);
+.page-header {
+	padding-bottom: 4px;
+	margin-bottom: 10px;
 }
 
-.panel-default>.panel-heading {
-    color: #fff;
-    background-color: #424242;
-    letter-spacing: 1px;
+.breadcrumb {
+	margin-bottom: 10px;
 }
 
 .panel-heading {
-    padding: 5px 15px;
-    border-radius: 0; 
-}
-
-.panel-title {
-    font-size: 20px;
-    text-transform: capitalize;
-}
-
-.panel-body {
-    padding: 0px;
+	padding: 5px 15px;
 }
 
 #login .panel-heading {
-    padding: 10px 15px
+	padding: 10px 15px
 }
 
 .content {
-    padding: 10px;
-}
-
-.control-label, th {
-    text-transform: capitalize;
+	padding: 10px;
 }
 
 .form-horizontal {
-    margin-bottom: 10px;
-    overflow: hidden;
+	margin-bottom: 10px;
+	overflow: hidden;
 }
 
 .form-horizontal .checkbox {
-    padding: 3px 16px;
+	padding: 3px 16px;
 }
 
 .form-control {
@@ -225,156 +114,147 @@ ul.context-links li a {
 }
 
 .form-control option {
-    padding: inherit;
+	padding: inherit;
 }
 
 #login .form-control {
-    height: 34px;
+	height: 34px;
 }
 
 #login .form-group {
-    border: none;
+	border: none;
 }
 
 .form-group {
     margin: 0;
     padding: 7px 5px 5px 5px;
-    border-bottom: 1px solid #E0E0E0;
+    border-bottom: 1px solid #eee;
 }
 
 .form-group:last-child {
-    border-bottom: none;
+	border-bottom: none;
 }
 
 .input-group-addon {
-    padding: 0 12px;
+	padding: 0 12px;
 }
 
-.table {
-    margin-bottom: 0;
+.panel-default>.panel-heading {
+	color: #fff;
+	background-color: #424242;
+	letter-spacing: 1px;
 }
 
-.table>tbody>tr>td {
-    padding: 4px 4px 4px 10px;
+.panel {
+	margin-bottom: 10px;
 }
 
-/* active table row */
-.table>tbody>tr.active>td, .table>tbody>tr.active>th, .table>tbody>tr>td.active, .table>tbody>tr>th.active, .table>tfoot>tr.active>td, .table>tfoot>tr.active>th, .table>tfoot>tr>td.active, .table>tfoot>tr>th.active, .table>thead>tr.active>td, .table>thead>tr.active>th, .table>thead>tr>td.active, .table>thead>tr>th.active {
-    background-color: #BDBDBD;
+.panel-body {
+	padding: 0px;
 }
 
-/* active table row on hover */
-.table-hover>tbody>tr.active:hover>td, .table-hover>tbody>tr.active:hover>th, .table-hover>tbody>tr:hover>.active, .table-hover>tbody>tr>td.active:hover, .table-hover>tbody>tr>th.active:hover {
-    background-color: #BDBDBD;
+.table {
+	margin-bottom: 0;
 }
 
-.popover {
-    max-width: none;
+.table>tbody>tr>td {
+	padding: 4px 4px 4px 10px;
 }
 
 .help-block {
-    margin-bottom: 0;
+	margin-bottom: 0;
 }
 
 .action-buttons {
-    text-align: right;
-    margin-top: 10px;
-    margin-bottom: 20px;
+	text-align: right;
+	margin-top: 10px;
+	margin-bottom: 20px;
 }
 
 /** Form validation */
 .input-errors ul {
-    margin-top: 20px;
+	margin-top: 20px;
 }
 
 /** Page header with title and breadcrumb */
 .header {
-    position: relative;
+	position: relative;
 }
 
 .header .page-header {
-    margin-top: 0;
+	margin-top: 0;
 }
 
 .header .context-links {
-    position: absolute;
-    right: 15px;
-    top: 15px;
+	position: absolute;
+	right: 15px;
+	top: 15px;
 }
 
 .header .context-links li {
-    float: left;
-    display: inline;
-    margin-left: 10px;
+	float: left;
+	display: inline;
+	margin-left: 10px;
 }
 
 /** Form tweaks */
 form .btn + .btn {
-    margin-left: 5px;
+	margin-left: 5px;
 }
 
 .input-group-inbetween {
-    border-left: 0;
+	border-left: 0;
 }
 
 .user-duplication .controls {
-    margin-top: 10px;
+	margin-top: 10px;
 }
 
 .checkbox.multi label {
-    display: block;
+	display: block;
 }
 
 .checkbox.multi .btn {
-    margin-top: 5px;
+	margin-top: 5px;
 }
 
 .col-sm-10 .form-control {
-    width: calc(50% - 15px); /* substract 15px to match a .col-sm-5; which satisfies my OCD */
+	width: calc(50% - 15px); /* substract 15px to match a .col-sm-5; which satisfies my OCD */
 }
 
 @media (max-width: 991px) {
-    .col-sm-10 .form-control {
-        width: 100%;
-    }
+	.col-sm-10 .form-control {
+		width: 100%;
+	}
 }
 
 /** Page footer */
 .footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 60px;
-    background-color: #212121;
-    padding-top: 10px;
-    text-align: center;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 60px;
+	background-color: #f5f5f5;
+	padding-top: 10px;
+	text-align: center;
 }
 
-footer a {
-    color: #ffffff;
-}
-
-
 /** Homepage / dashboard */
-[id^="widgets-col"] {
-    min-height: 300px;
-}
-
 .widget .panel-heading {
     background-color: #757575;
 }
 
 #widgetSequence {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    padding: 20px 0;
-    width: 100%;
-    z-index: 100;
-    text-align: center;
-    background: rgba(255, 255, 255, 0.6);
-    border-top: 1px solid #ddd;
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	padding: 20px 0;
+	width: 100%;
+	z-index: 100;
+	text-align: center;
+	background: rgba(255, 255, 255, 0.6);
+	border-top: 1px solid #ddd;
 }
 
 /** Styling for jQuery autocomplete widget */
@@ -421,124 +301,70 @@ footer a {
 
 /** Override the bootstrap progress bar margins */
 .progress {
-    margin-bottom: 0px;
-    height: 14px;
+	margin-bottom: 0px;
+	height: 14px;
 }
 
 #wizard .progress {
-    margin-bottom: 10px;
-}
-
-.progress-bar {
-    background-color: #B71C1C;
+	margin-bottom: 10px;
 }
 
 .panel-body.collapse.in {
-    overflow-x: auto;
+	overflow-x: auto;
 }
 
 /** create icon colors */
 .icon-black
 {
-    color: #000000;
+	color: #000000;
 }
 
 .icon-danger
 {
-    color: #D9534F;
+	color: #D9534F;
 }
 
 .icon-success
 {
-    color: #5CB85C;
+	color: #5CB85C;
 }
 
 .icon-primary
 {
-    color: #337AB7;
-}
-
-.icon-warning {
-    color: #FDD835;
-}
-
-.text-warning {
-    color: #F57F17;
+	color: #337AB7;
 }
-
-.btn-success {
-    background-color: #43A047;
-}
-
-.btn-danger {
-    background-color: #B71C1C;
-}
-
-.btn-primary {
-    background-color: #1976D2;
-}
-
-.bg-primary {
-    color: #000;
-    background-color: #009688;
-}
-
-.bg-info {
-    color: #000;
-    background-color: #80DEEA;
-}
-
-.bg-danger {
-    color: #000;
-    background-color: #EF9A9A;
-}
-
-.bg-warning {
-    color: #000;
-    background-color: #FFF9C4;
-}
-
-.bg-success {
-    color: #000;
-    background-color: #A5D6A7;
-}
-
 /** icons are often used with onclick actions, so we need the cursor to change to a pointer */
 .icon-pointer
 {
-    cursor: pointer;
+	cursor: pointer;
 }
 
 .icon-embed-btn
 {
-    font-size: 15px;
-    vertical-align: middle;
-    color: white;
+	font-size: 15px;
+	vertical-align: middle;
+	color: white;
 }
 
 /* Used when you need an icon to act as a submit button **/
 .button-icon
 {
-    color: #337AB7;
-    background: none;
-    border: 0px;
+	color: #337AB7;
+	background: none;
+	border: 0px;
 }
 
 .btn
 {
-    padding-right: 4px;
-    padding-left: 4px;
-}
-
-.list-group {
-    margin-bottom: 0;
+	padding-right: 4px;
+	padding-left: 4px;
 }
 
 /* icons in the dashboard panel headings should pull-right **/
 .widget-heading-icon
 {
-    display: block;
-    float:  right;  
+	display: block;
+	float:	right;	
 }
 
 .widget-heading-icon .fa {
@@ -549,64 +375,11 @@ footer a {
     color: #e0e0e0;
 }
 
-/* ipsec widget placeholder */
-#ipsec-Overview, #ipsec-tunnel, #ipsec-mobile {
-    background-color:#EEEEEE;
-}
-
 /* All pfSense textareas benefit from using a fixed width font **/
 textarea
 {
-    font-family: monospace;
-    font-size: 12px;
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-}
-
-@media (max-width: 1199px) {
-    .nav>li>a {
-        padding: 14px 9px 10px 9px;
-    }
- }
-
- @media (max-width: 991px) {
-    /* change top navbar from horizontal to vertical */
-    .navbar-header {
-        float: none;
-    }
-    .navbar-toggle {
-        display: block;
-    }
-    .navbar-collapse {
-        border-top: 1px solid transparent;
-        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
-    }
-    .navbar-collapse.collapse {
-        display: none!important;
-    }
-    .navbar-nav {
-        float: none!important;
-        margin: 7.5px -15px;
-    }
-    .navbar-nav>li {
-        float: none;
-    }
-    .navbar-nav>li>a {
-        padding-top: 10px;
-        padding-bottom: 10px;
-    }
-    .navbar-text {
-        float: none;
-        margin: 15px 0;
-    }
-    /* since 3.1.0 */
-    .navbar-collapse.collapse.in { 
-        display: block!important;
-    }
-    .collapsing {
-        overflow: hidden!important;
-    }
-    .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
-        max-height: none !important;
-    }
+	font-family:	consolas,monaco,roboto mono,liberation mono,courier;
+	font-size: 12px;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
 }