revert 4afd1362bd57d0e4ce362dc105085b8c8d9f64c1 and add BETA stylesheet

3 files changed, 358 insertions, 740 deletions

diff --git a/src/usr/local/www/bootstrap/css/pfSense-BETA.css b/src/usr/local/www/bootstrap/css/pfSense-BETA.css
new file mode 100644
index 0000000..33ee5ac
--- /dev/null
+++ b/src/usr/local/www/bootstrap/css/pfSense-BETA.css
@@ -0,0 +1,3 @@
+@import url("/bootstrap/css/pfSense.css");
+
+/*** Experimental Changes Go Here ***/
\ No newline at end of file
diff --git a/src/usr/local/www/bootstrap/css/pfSense-EXP.css b/src/usr/local/www/bootstrap/css/pfSense-EXP.css
deleted file mode 100644
index fbc7534..0000000
--- a/src/usr/local/www/bootstrap/css/pfSense-EXP.css
+++ /dev/null
@@ -1,612 +0,0 @@
-@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 b0eced3..fbc7534 100644
--- a/src/usr/local/www/bootstrap/css/pfSense.css
+++ b/src/usr/local/www/bootstrap/css/pfSense.css
@@ -1,110 +1,221 @@
 @import url("/bootstrap/css/bootstrap.min.css");
 @import url("/bootstrap/glyphicons/glyphicons-halflings.css");
+@import url("/bootstrap/fonts/roboto.css");
 
-h1 a:link{
-	color: #000000;
-	text-decoration: none !important;
+html {
+    position: relative;
+    min-height: 100%;
 }
 
-h1.page-header {
-	display: none;
+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%)
+}
 
-h1 a:visited { color: #000000; }
-h1 a:hover, h1 a:active { color: #000000; text-decoration: none !important; }
+body.no-menu {
+    background: url("/logo-black.png") no-repeat center 30px;
+    padding-top: 70px;
+}
 
-.breadcrumb {
-	font-size: 22px;
+body.no-menu #jumbotron {
+    margin-top: 75px;
 }
 
-html {
-	position: relative;
-	min-height: 100%;
+body#index .icons {
+    float: right;
 }
 
-body {
-	padding-top: 60px;
-	margin-bottom: 80px;
+a:hover {
+    text-decoration: none;
 }
 
-.navbar-brand {
-	padding-top: 3px;
+a.fa, i.fa {
+    font-size: 18px;
 }
 
-body.no-menu #jumbotron {
-	padding: 100px 0;
-	background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%)
+h1 a:link, h1 a:visited {
+    color: #000000;
+    text-decoration: none !important;
 }
 
-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;
+h1 a:hover, h1 a:active { 
+    color: #000000; 
+    text-decoration: none !important; 
 }
 
-body#index .icons {
-	float: right;
+.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;
+    cursor: move;
 }
 
 tr.disabled td,
 tr.disabled th {
-	opacity: .5;
+    opacity: .5;
 }
 
 .contains-table table {
-	border: 1px solid #ddd;
-}
-
-.nav-pills {
-	margin-bottom: 20px;
+    border: 1px solid #ddd;
 }
 
 /** Content structure */
 .table-responsive {
-	clear: both;
-	margin-bottom: 0px;
+    clear: both;
+    margin-bottom: 0px;
 }
 
+.page-header {
+    padding-bottom: 4px;
+    margin-bottom: 10px;
+}
+
+ul.context-links li a {
+
+}
+
+/* navigation */
 .navbar {
-	margin-bottom: 10px;
+    margin-bottom: 10px;
 }
 
-.page-header {
-	padding-bottom: 4px;
-	margin-bottom: 10px;
+.navbar-inverse {
+    background-color: #000000;
 }
 
-.breadcrumb {
-	margin-bottom: 10px;
+.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;
+    padding: 5px 15px;
+    border-radius: 0; 
+}
+
+.panel-title {
+    font-size: 20px;
+    text-transform: capitalize;
+}
+
+.panel-body {
+    padding: 0px;
 }
 
 #login .panel-heading {
-	padding: 10px 15px
+    padding: 10px 15px
 }
 
 .content {
-	padding: 10px;
+    padding: 10px;
+}
+
+.control-label, th {
+    text-transform: capitalize;
 }
 
 .form-horizontal {
-	margin-bottom: 10px;
-	overflow: hidden;
+    margin-bottom: 10px;
+    overflow: hidden;
 }
 
 .form-horizontal .checkbox {
-	padding: 3px 16px;
+    padding: 3px 16px;
 }
 
 .form-control {
@@ -114,147 +225,156 @@ tr.disabled th {
 }
 
 .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 #eee;
+    border-bottom: 1px solid #E0E0E0;
 }
 
 .form-group:last-child {
-	border-bottom: none;
+    border-bottom: none;
 }
 
 .input-group-addon {
-	padding: 0 12px;
+    padding: 0 12px;
 }
 
-.panel-default>.panel-heading {
-	color: #fff;
-	background-color: #424242;
-	letter-spacing: 1px;
+.table {
+    margin-bottom: 0;
 }
 
-.panel {
-	margin-bottom: 10px;
+.table>tbody>tr>td {
+    padding: 4px 4px 4px 10px;
 }
 
-.panel-body {
-	padding: 0px;
+/* 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;
 }
 
-.table {
-	margin-bottom: 0;
+/* 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>tbody>tr>td {
-	padding: 4px 4px 4px 10px;
+.popover {
+    max-width: none;
 }
 
 .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: #f5f5f5;
-	padding-top: 10px;
-	text-align: center;
+    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;
+    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 */
@@ -301,70 +421,124 @@ form .btn + .btn {
 
 /** Override the bootstrap progress bar margins */
 .progress {
-	margin-bottom: 0px;
-	height: 14px;
+    margin-bottom: 0px;
+    height: 14px;
 }
 
 #wizard .progress {
-	margin-bottom: 10px;
+    margin-bottom: 10px;
+}
+
+.progress-bar {
+    background-color: #B71C1C;
 }
 
 .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;
+    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;
+    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;
+    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;	
+    display: block;
+    float:  right;  
 }
 
 .widget-heading-icon .fa {
@@ -375,11 +549,64 @@ form .btn + .btn {
     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:	consolas,monaco,roboto mono,liberation mono,courier;
-	font-size: 12px;
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
+    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;
+    }
 }