diff --git a/material-color.css b/material-color.css
index 4a201e3..808d0ed 100644
--- a/material-color.css
+++ b/material-color.css
@@ -297,196 +297,1374 @@
                         NAVBAR
 \*****************************************************/
 
+
+/* red */
+
 .navbar-red {
     background-color: #f44336;
+}
+.navbar-red .navbar-brand {
+    color: white;
+}
+.navbar-red .navbar-brand:hover,
+.navbar-red .navbar-brand:focus {
+    color: white;
+}
+.navbar-red .navbar-nav > li > a {
+    color: white;
+}
+.navbar-red .navbar-nav > li > a:hover,
+.navbar-red .navbar-nav > li > a:focus {
+    color: white;
+}
+.navbar-red .navbar-nav > .active > a,
+.navbar-red .navbar-nav > .active > a:hover,
+.navbar-red .navbar-nav > .active > a:focus {
+    color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-red .navbar-nav > .open > a,
+.navbar-red .navbar-nav > .open > a:hover,
+.navbar-red .navbar-nav > .open > a:focus {
     color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-red .navbar-nav > .dropdown > a .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-red .navbar-nav > .dropdown > a:hover .caret,
+.navbar-red .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-red .navbar-nav > .open > a .caret,
+.navbar-red .navbar-nav > .open > a:hover .caret,
+.navbar-red .navbar-nav > .open > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-red .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-red .navbar-toggle:hover,
+.navbar-red .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
 }
+.navbar-red .navbar-toggle .icon-bar {
+    background-color: white;
+}
+@media (max-width: 767px) {
+    .navbar-red .navbar-nav .open .dropdown-menu > li > a {
+        color: white;
+    }
+    .navbar-red .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-red .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: white;
+    }
+}
+
+
+/* pink */
 
 .navbar-pink {
     background-color: #e91e63;
+}
+.navbar-pink .navbar-brand {
+    color: white;
+}
+.navbar-pink .navbar-brand:hover,
+.navbar-pink .navbar-brand:focus {
+    color: white;
+}
+.navbar-pink .navbar-nav > li > a {
+    color: white;
+}
+.navbar-pink .navbar-nav > li > a:hover,
+.navbar-pink .navbar-nav > li > a:focus {
+    color: white;
+}
+.navbar-pink .navbar-nav > .active > a,
+.navbar-pink .navbar-nav > .active > a:hover,
+.navbar-pink .navbar-nav > .active > a:focus {
+    color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-pink .navbar-nav > .open > a,
+.navbar-pink .navbar-nav > .open > a:hover,
+.navbar-pink .navbar-nav > .open > a:focus {
     color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-pink .navbar-nav > .dropdown > a .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-pink .navbar-nav > .dropdown > a:hover .caret,
+.navbar-pink .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-pink .navbar-nav > .open > a .caret,
+.navbar-pink .navbar-nav > .open > a:hover .caret,
+.navbar-pink .navbar-nav > .open > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
 }
+.navbar-pink .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-pink .navbar-toggle:hover,
+.navbar-pink .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
+}
+.navbar-pink .navbar-toggle .icon-bar {
+    background-color: white;
+}
+@media (max-width: 767px) {
+    .navbar-pink .navbar-nav .open .dropdown-menu > li > a {
+        color: white;
+    }
+    .navbar-pink .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-pink .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: white;
+    }
+}
+
+
+/* purple */
 
 .navbar-purple {
     background-color: #9c27b0;
+}
+.navbar-purple .navbar-brand {
+    color: white;
+}
+.navbar-purple .navbar-brand:hover,
+.navbar-purple .navbar-brand:focus {
     color: white;
 }
+.navbar-purple .navbar-nav > li > a {
+    color: white;
+}
+.navbar-purple .navbar-nav > li > a:hover,
+.navbar-purple .navbar-nav > li > a:focus {
+    color: white;
+}
+.navbar-purple .navbar-nav > .active > a,
+.navbar-purple .navbar-nav > .active > a:hover,
+.navbar-purple .navbar-nav > .active > a:focus {
+    color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-purple .navbar-nav > .open > a,
+.navbar-purple .navbar-nav > .open > a:hover,
+.navbar-purple .navbar-nav > .open > a:focus {
+    color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-purple .navbar-nav > .dropdown > a .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-purple .navbar-nav > .dropdown > a:hover .caret,
+.navbar-purple .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-purple .navbar-nav > .open > a .caret,
+.navbar-purple .navbar-nav > .open > a:hover .caret,
+.navbar-purple .navbar-nav > .open > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-purple .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-purple .navbar-toggle:hover,
+.navbar-purple .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
+}
+.navbar-purple .navbar-toggle .icon-bar {
+    background-color: white;
+}
+@media (max-width: 767px) {
+    .navbar-purple .navbar-nav .open .dropdown-menu > li > a {
+        color: white;
+    }
+    .navbar-purple .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-purple .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: white;
+    }
+}
+
+
+/* deep-purple */
 
 .navbar-deep-purple {
     background-color: #673ab7;
+}
+.navbar-deep-purple .navbar-brand {
+    color: white;
+}
+.navbar-deep-purple .navbar-brand:hover,
+.navbar-deep-purple .navbar-brand:focus {
+    color: white;
+}
+.navbar-deep-purple .navbar-nav > li > a {
+    color: white;
+}
+.navbar-deep-purple .navbar-nav > li > a:hover,
+.navbar-deep-purple .navbar-nav > li > a:focus {
     color: white;
 }
+.navbar-deep-purple .navbar-nav > .active > a,
+.navbar-deep-purple .navbar-nav > .active > a:hover,
+.navbar-deep-purple .navbar-nav > .active > a:focus {
+    color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-deep-purple .navbar-nav > .open > a,
+.navbar-deep-purple .navbar-nav > .open > a:hover,
+.navbar-deep-purple .navbar-nav > .open > a:focus {
+    color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-deep-purple .navbar-nav > .dropdown > a .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-deep-purple .navbar-nav > .dropdown > a:hover .caret,
+.navbar-deep-purple .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-deep-purple .navbar-nav > .open > a .caret,
+.navbar-deep-purple .navbar-nav > .open > a:hover .caret,
+.navbar-deep-purple .navbar-nav > .open > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-deep-purple .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-deep-purple .navbar-toggle:hover,
+.navbar-deep-purple .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
+}
+.navbar-deep-purple .navbar-toggle .icon-bar {
+    background-color: white;
+}
+@media (max-width: 767px) {
+    .navbar-deep-purple .navbar-nav .open .dropdown-menu > li > a {
+        color: white;
+    }
+    .navbar-deep-purple .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-deep-purple .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: white;
+    }
+}
+
+
+/* indigo */
 
 .navbar-indigo {
     background-color: #3f51b5;
+}
+.navbar-indigo .navbar-brand {
     color: white;
 }
+.navbar-indigo .navbar-brand:hover,
+.navbar-indigo .navbar-brand:focus {
+    color: white;
+}
+.navbar-indigo .navbar-nav > li > a {
+    color: white;
+}
+.navbar-indigo .navbar-nav > li > a:hover,
+.navbar-indigo .navbar-nav > li > a:focus {
+    color: white;
+}
+.navbar-indigo .navbar-nav > .active > a,
+.navbar-indigo .navbar-nav > .active > a:hover,
+.navbar-indigo .navbar-nav > .active > a:focus {
+    color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-indigo .navbar-nav > .open > a,
+.navbar-indigo .navbar-nav > .open > a:hover,
+.navbar-indigo .navbar-nav > .open > a:focus {
+    color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-indigo .navbar-nav > .dropdown > a .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-indigo .navbar-nav > .dropdown > a:hover .caret,
+.navbar-indigo .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-indigo .navbar-nav > .open > a .caret,
+.navbar-indigo .navbar-nav > .open > a:hover .caret,
+.navbar-indigo .navbar-nav > .open > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-indigo .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-indigo .navbar-toggle:hover,
+.navbar-indigo .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
+}
+.navbar-indigo .navbar-toggle .icon-bar {
+    background-color: white;
+}
+@media (max-width: 767px) {
+    .navbar-indigo .navbar-nav .open .dropdown-menu > li > a {
+        color: white;
+    }
+    .navbar-indigo .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-indigo .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: white;
+    }
+}
+
+
+/* blue */
 
 .navbar-blue {
     background-color: #2196f3;
+}
+.navbar-blue .navbar-brand {
+    color: white;
+}
+.navbar-blue .navbar-brand:hover,
+.navbar-blue .navbar-brand:focus {
+    color: white;
+}
+.navbar-blue .navbar-nav > li > a {
     color: white;
 }
+.navbar-blue .navbar-nav > li > a:hover,
+.navbar-blue .navbar-nav > li > a:focus {
+    color: white;
+}
+.navbar-blue .navbar-nav > .active > a,
+.navbar-blue .navbar-nav > .active > a:hover,
+.navbar-blue .navbar-nav > .active > a:focus {
+    color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-blue .navbar-nav > .open > a,
+.navbar-blue .navbar-nav > .open > a:hover,
+.navbar-blue .navbar-nav > .open > a:focus {
+    color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-blue .navbar-nav > .dropdown > a .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-blue .navbar-nav > .dropdown > a:hover .caret,
+.navbar-blue .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-blue .navbar-nav > .open > a .caret,
+.navbar-blue .navbar-nav > .open > a:hover .caret,
+.navbar-blue .navbar-nav > .open > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-blue .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-blue .navbar-toggle:hover,
+.navbar-blue .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
+}
+.navbar-blue .navbar-toggle .icon-bar {
+    background-color: white;
+}
+@media (max-width: 767px) {
+    .navbar-blue .navbar-nav .open .dropdown-menu > li > a {
+        color: white;
+    }
+    .navbar-blue .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-blue .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: white;
+    }
+}
+
+
+/* light-blue */
 
 .navbar-light-blue {
     background-color: #03a9f4;
+}
+.navbar-light-blue .navbar-brand {
+    color: black;
+}
+.navbar-light-blue .navbar-brand:hover,
+.navbar-light-blue .navbar-brand:focus {
+    color: black;
+}
+.navbar-light-blue .navbar-nav > li > a {
+    color: black;
+}
+.navbar-light-blue .navbar-nav > li > a:hover,
+.navbar-light-blue .navbar-nav > li > a:focus {
+    color: black;
+}
+.navbar-light-blue .navbar-nav > .active > a,
+.navbar-light-blue .navbar-nav > .active > a:hover,
+.navbar-light-blue .navbar-nav > .active > a:focus {
     color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-light-blue .navbar-nav > .open > a,
+.navbar-light-blue .navbar-nav > .open > a:hover,
+.navbar-light-blue .navbar-nav > .open > a:focus {
+    color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-light-blue .navbar-nav > .dropdown > a .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-light-blue .navbar-nav > .dropdown > a:hover .caret,
+.navbar-light-blue .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-light-blue .navbar-nav > .open > a .caret,
+.navbar-light-blue .navbar-nav > .open > a:hover .caret,
+.navbar-light-blue .navbar-nav > .open > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-light-blue .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-light-blue .navbar-toggle:hover,
+.navbar-light-blue .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
+}
+.navbar-light-blue .navbar-toggle .icon-bar {
+    background-color: black;
+}
+@media (max-width: 767px) {
+    .navbar-light-blue .navbar-nav .open .dropdown-menu > li > a {
+        color: black;
+    }
+    .navbar-light-blue .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-light-blue .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: black;
+    }
 }
 
+
+/* cyan */
+
 .navbar-cyan {
     background-color: #00bcd4;
+}
+.navbar-cyan .navbar-brand {
     color: black;
 }
+.navbar-cyan .navbar-brand:hover,
+.navbar-cyan .navbar-brand:focus {
+    color: black;
+}
+.navbar-cyan .navbar-nav > li > a {
+    color: black;
+}
+.navbar-cyan .navbar-nav > li > a:hover,
+.navbar-cyan .navbar-nav > li > a:focus {
+    color: black;
+}
+.navbar-cyan .navbar-nav > .active > a,
+.navbar-cyan .navbar-nav > .active > a:hover,
+.navbar-cyan .navbar-nav > .active > a:focus {
+    color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-cyan .navbar-nav > .open > a,
+.navbar-cyan .navbar-nav > .open > a:hover,
+.navbar-cyan .navbar-nav > .open > a:focus {
+    color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-cyan .navbar-nav > .dropdown > a .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-cyan .navbar-nav > .dropdown > a:hover .caret,
+.navbar-cyan .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-cyan .navbar-nav > .open > a .caret,
+.navbar-cyan .navbar-nav > .open > a:hover .caret,
+.navbar-cyan .navbar-nav > .open > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-cyan .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-cyan .navbar-toggle:hover,
+.navbar-cyan .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
+}
+.navbar-cyan .navbar-toggle .icon-bar {
+    background-color: black;
+}
+@media (max-width: 767px) {
+    .navbar-cyan .navbar-nav .open .dropdown-menu > li > a {
+        color: black;
+    }
+    .navbar-cyan .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-cyan .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: black;
+    }
+}
+
+
+/* teal */
 
 .navbar-teal {
     background-color: #009688;
+}
+.navbar-teal .navbar-brand {
+    color: white;
+}
+.navbar-teal .navbar-brand:hover,
+.navbar-teal .navbar-brand:focus {
+    color: white;
+}
+.navbar-teal .navbar-nav > li > a {
     color: white;
 }
+.navbar-teal .navbar-nav > li > a:hover,
+.navbar-teal .navbar-nav > li > a:focus {
+    color: white;
+}
+.navbar-teal .navbar-nav > .active > a,
+.navbar-teal .navbar-nav > .active > a:hover,
+.navbar-teal .navbar-nav > .active > a:focus {
+    color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-teal .navbar-nav > .open > a,
+.navbar-teal .navbar-nav > .open > a:hover,
+.navbar-teal .navbar-nav > .open > a:focus {
+    color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-teal .navbar-nav > .dropdown > a .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-teal .navbar-nav > .dropdown > a:hover .caret,
+.navbar-teal .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-teal .navbar-nav > .open > a .caret,
+.navbar-teal .navbar-nav > .open > a:hover .caret,
+.navbar-teal .navbar-nav > .open > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-teal .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-teal .navbar-toggle:hover,
+.navbar-teal .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
+}
+.navbar-teal .navbar-toggle .icon-bar {
+    background-color: white;
+}
+@media (max-width: 767px) {
+    .navbar-teal .navbar-nav .open .dropdown-menu > li > a {
+        color: white;
+    }
+    .navbar-teal .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-teal .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: white;
+    }
+}
+
+
+/* green */
 
 .navbar-green {
     background-color: #4caf50;
+}
+.navbar-green .navbar-brand {
+    color: black;
+}
+.navbar-green .navbar-brand:hover,
+.navbar-green .navbar-brand:focus {
+    color: black;
+}
+.navbar-green .navbar-nav > li > a {
+    color: black;
+}
+.navbar-green .navbar-nav > li > a:hover,
+.navbar-green .navbar-nav > li > a:focus {
+    color: black;
+}
+.navbar-green .navbar-nav > .active > a,
+.navbar-green .navbar-nav > .active > a:hover,
+.navbar-green .navbar-nav > .active > a:focus {
+    color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-green .navbar-nav > .open > a,
+.navbar-green .navbar-nav > .open > a:hover,
+.navbar-green .navbar-nav > .open > a:focus {
     color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-green .navbar-nav > .dropdown > a .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-green .navbar-nav > .dropdown > a:hover .caret,
+.navbar-green .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-green .navbar-nav > .open > a .caret,
+.navbar-green .navbar-nav > .open > a:hover .caret,
+.navbar-green .navbar-nav > .open > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
 }
+.navbar-green .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-green .navbar-toggle:hover,
+.navbar-green .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
+}
+.navbar-green .navbar-toggle .icon-bar {
+    background-color: black;
+}
+@media (max-width: 767px) {
+    .navbar-green .navbar-nav .open .dropdown-menu > li > a {
+        color: black;
+    }
+    .navbar-green .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-green .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: black;
+    }
+}
+
+
+/* light-green */
 
 .navbar-light-green {
     background-color: #8bc34a;
+}
+.navbar-light-green .navbar-brand {
+    color: black;
+}
+.navbar-light-green .navbar-brand:hover,
+.navbar-light-green .navbar-brand:focus {
+    color: black;
+}
+.navbar-light-green .navbar-nav > li > a {
+    color: black;
+}
+.navbar-light-green .navbar-nav > li > a:hover,
+.navbar-light-green .navbar-nav > li > a:focus {
+    color: black;
+}
+.navbar-light-green .navbar-nav > .active > a,
+.navbar-light-green .navbar-nav > .active > a:hover,
+.navbar-light-green .navbar-nav > .active > a:focus {
     color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-light-green .navbar-nav > .open > a,
+.navbar-light-green .navbar-nav > .open > a:hover,
+.navbar-light-green .navbar-nav > .open > a:focus {
+    color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-light-green .navbar-nav > .dropdown > a .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-light-green .navbar-nav > .dropdown > a:hover .caret,
+.navbar-light-green .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-light-green .navbar-nav > .open > a .caret,
+.navbar-light-green .navbar-nav > .open > a:hover .caret,
+.navbar-light-green .navbar-nav > .open > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-light-green .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-light-green .navbar-toggle:hover,
+.navbar-light-green .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
+}
+.navbar-light-green .navbar-toggle .icon-bar {
+    background-color: black;
+}
+@media (max-width: 767px) {
+    .navbar-light-green .navbar-nav .open .dropdown-menu > li > a {
+        color: black;
+    }
+    .navbar-light-green .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-light-green .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: black;
+    }
 }
 
+
+/* lime */
+
 .navbar-lime {
     background-color: #cddc39;
+}
+.navbar-lime .navbar-brand {
+    color: black;
+}
+.navbar-lime .navbar-brand:hover,
+.navbar-lime .navbar-brand:focus {
+    color: black;
+}
+.navbar-lime .navbar-nav > li > a {
+    color: black;
+}
+.navbar-lime .navbar-nav > li > a:hover,
+.navbar-lime .navbar-nav > li > a:focus {
+    color: black;
+}
+.navbar-lime .navbar-nav > .active > a,
+.navbar-lime .navbar-nav > .active > a:hover,
+.navbar-lime .navbar-nav > .active > a:focus {
+    color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-lime .navbar-nav > .open > a,
+.navbar-lime .navbar-nav > .open > a:hover,
+.navbar-lime .navbar-nav > .open > a:focus {
     color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-lime .navbar-nav > .dropdown > a .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-lime .navbar-nav > .dropdown > a:hover .caret,
+.navbar-lime .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-lime .navbar-nav > .open > a .caret,
+.navbar-lime .navbar-nav > .open > a:hover .caret,
+.navbar-lime .navbar-nav > .open > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-lime .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-lime .navbar-toggle:hover,
+.navbar-lime .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
 }
+.navbar-lime .navbar-toggle .icon-bar {
+    background-color: black;
+}
+@media (max-width: 767px) {
+    .navbar-lime .navbar-nav .open .dropdown-menu > li > a {
+        color: black;
+    }
+    .navbar-lime .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-lime .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: black;
+    }
+}
+
+
+/* yellow */
 
 .navbar-yellow {
     background-color: #ffeb3b;
+}
+.navbar-yellow .navbar-brand {
+    color: black;
+}
+.navbar-yellow .navbar-brand:hover,
+.navbar-yellow .navbar-brand:focus {
+    color: black;
+}
+.navbar-yellow .navbar-nav > li > a {
+    color: black;
+}
+.navbar-yellow .navbar-nav > li > a:hover,
+.navbar-yellow .navbar-nav > li > a:focus {
+    color: black;
+}
+.navbar-yellow .navbar-nav > .active > a,
+.navbar-yellow .navbar-nav > .active > a:hover,
+.navbar-yellow .navbar-nav > .active > a:focus {
+    color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-yellow .navbar-nav > .open > a,
+.navbar-yellow .navbar-nav > .open > a:hover,
+.navbar-yellow .navbar-nav > .open > a:focus {
     color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-yellow .navbar-nav > .dropdown > a .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-yellow .navbar-nav > .dropdown > a:hover .caret,
+.navbar-yellow .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-yellow .navbar-nav > .open > a .caret,
+.navbar-yellow .navbar-nav > .open > a:hover .caret,
+.navbar-yellow .navbar-nav > .open > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
 }
+.navbar-yellow .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-yellow .navbar-toggle:hover,
+.navbar-yellow .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
+}
+.navbar-yellow .navbar-toggle .icon-bar {
+    background-color: black;
+}
+@media (max-width: 767px) {
+    .navbar-yellow .navbar-nav .open .dropdown-menu > li > a {
+        color: black;
+    }
+    .navbar-yellow .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-yellow .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: black;
+    }
+}
+
+
+/* amber */
 
 .navbar-amber {
     background-color: #ffc107;
+}
+.navbar-amber .navbar-brand {
+    color: black;
+}
+.navbar-amber .navbar-brand:hover,
+.navbar-amber .navbar-brand:focus {
+    color: black;
+}
+.navbar-amber .navbar-nav > li > a {
+    color: black;
+}
+.navbar-amber .navbar-nav > li > a:hover,
+.navbar-amber .navbar-nav > li > a:focus {
+    color: black;
+}
+.navbar-amber .navbar-nav > .active > a,
+.navbar-amber .navbar-nav > .active > a:hover,
+.navbar-amber .navbar-nav > .active > a:focus {
     color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-amber .navbar-nav > .open > a,
+.navbar-amber .navbar-nav > .open > a:hover,
+.navbar-amber .navbar-nav > .open > a:focus {
+    color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-amber .navbar-nav > .dropdown > a .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-amber .navbar-nav > .dropdown > a:hover .caret,
+.navbar-amber .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-amber .navbar-nav > .open > a .caret,
+.navbar-amber .navbar-nav > .open > a:hover .caret,
+.navbar-amber .navbar-nav > .open > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-amber .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-amber .navbar-toggle:hover,
+.navbar-amber .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
+}
+.navbar-amber .navbar-toggle .icon-bar {
+    background-color: black;
+}
+@media (max-width: 767px) {
+    .navbar-amber .navbar-nav .open .dropdown-menu > li > a {
+        color: black;
+    }
+    .navbar-amber .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-amber .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: black;
+    }
 }
 
+
+/* orange */
+
 .navbar-orange {
     background-color: #ff9800;
+}
+.navbar-orange .navbar-brand {
+    color: black;
+}
+.navbar-orange .navbar-brand:hover,
+.navbar-orange .navbar-brand:focus {
     color: black;
 }
+.navbar-orange .navbar-nav > li > a {
+    color: black;
+}
+.navbar-orange .navbar-nav > li > a:hover,
+.navbar-orange .navbar-nav > li > a:focus {
+    color: black;
+}
+.navbar-orange .navbar-nav > .active > a,
+.navbar-orange .navbar-nav > .active > a:hover,
+.navbar-orange .navbar-nav > .active > a:focus {
+    color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-orange .navbar-nav > .open > a,
+.navbar-orange .navbar-nav > .open > a:hover,
+.navbar-orange .navbar-nav > .open > a:focus {
+    color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-orange .navbar-nav > .dropdown > a .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-orange .navbar-nav > .dropdown > a:hover .caret,
+.navbar-orange .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-orange .navbar-nav > .open > a .caret,
+.navbar-orange .navbar-nav > .open > a:hover .caret,
+.navbar-orange .navbar-nav > .open > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-orange .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-orange .navbar-toggle:hover,
+.navbar-orange .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
+}
+.navbar-orange .navbar-toggle .icon-bar {
+    background-color: black;
+}
+@media (max-width: 767px) {
+    .navbar-orange .navbar-nav .open .dropdown-menu > li > a {
+        color: black;
+    }
+    .navbar-orange .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-orange .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: black;
+    }
+}
+
+
+/* deep-orange */
 
 .navbar-deep-orange {
     background-color: #ff5722;
+}
+.navbar-deep-orange .navbar-brand {
+    color: white;
+}
+.navbar-deep-orange .navbar-brand:hover,
+.navbar-deep-orange .navbar-brand:focus {
+    color: white;
+}
+.navbar-deep-orange .navbar-nav > li > a {
+    color: white;
+}
+.navbar-deep-orange .navbar-nav > li > a:hover,
+.navbar-deep-orange .navbar-nav > li > a:focus {
     color: white;
 }
+.navbar-deep-orange .navbar-nav > .active > a,
+.navbar-deep-orange .navbar-nav > .active > a:hover,
+.navbar-deep-orange .navbar-nav > .active > a:focus {
+    color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-deep-orange .navbar-nav > .open > a,
+.navbar-deep-orange .navbar-nav > .open > a:hover,
+.navbar-deep-orange .navbar-nav > .open > a:focus {
+    color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-deep-orange .navbar-nav > .dropdown > a .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-deep-orange .navbar-nav > .dropdown > a:hover .caret,
+.navbar-deep-orange .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-deep-orange .navbar-nav > .open > a .caret,
+.navbar-deep-orange .navbar-nav > .open > a:hover .caret,
+.navbar-deep-orange .navbar-nav > .open > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-deep-orange .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-deep-orange .navbar-toggle:hover,
+.navbar-deep-orange .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
+}
+.navbar-deep-orange .navbar-toggle .icon-bar {
+    background-color: white;
+}
+@media (max-width: 767px) {
+    .navbar-deep-orange .navbar-nav .open .dropdown-menu > li > a {
+        color: white;
+    }
+    .navbar-deep-orange .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-deep-orange .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: white;
+    }
+}
+
+
+/* brown */
 
 .navbar-brown {
     background-color: #795548;
+}
+.navbar-brown .navbar-brand {
+    color: white;
+}
+.navbar-brown .navbar-brand:hover,
+.navbar-brown .navbar-brand:focus {
+    color: white;
+}
+.navbar-brown .navbar-nav > li > a {
+    color: white;
+}
+.navbar-brown .navbar-nav > li > a:hover,
+.navbar-brown .navbar-nav > li > a:focus {
+    color: white;
+}
+.navbar-brown .navbar-nav > .active > a,
+.navbar-brown .navbar-nav > .active > a:hover,
+.navbar-brown .navbar-nav > .active > a:focus {
+    color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-brown .navbar-nav > .open > a,
+.navbar-brown .navbar-nav > .open > a:hover,
+.navbar-brown .navbar-nav > .open > a:focus {
     color: white;
+    background: rgba(0,0,0,.2);
 }
+.navbar-brown .navbar-nav > .dropdown > a .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-brown .navbar-nav > .dropdown > a:hover .caret,
+.navbar-brown .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-brown .navbar-nav > .open > a .caret,
+.navbar-brown .navbar-nav > .open > a:hover .caret,
+.navbar-brown .navbar-nav > .open > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-brown .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-brown .navbar-toggle:hover,
+.navbar-brown .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
+}
+.navbar-brown .navbar-toggle .icon-bar {
+    background-color: white;
+}
+@media (max-width: 767px) {
+    .navbar-brown .navbar-nav .open .dropdown-menu > li > a {
+        color: white;
+    }
+    .navbar-brown .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-brown .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: white;
+    }
+}
+
+
+/* grey */
 
 .navbar-grey {
     background-color: #9e9e9e;
+}
+.navbar-grey .navbar-brand {
+    color: black;
+}
+.navbar-grey .navbar-brand:hover,
+.navbar-grey .navbar-brand:focus {
     color: black;
 }
+.navbar-grey .navbar-nav > li > a {
+    color: black;
+}
+.navbar-grey .navbar-nav > li > a:hover,
+.navbar-grey .navbar-nav > li > a:focus {
+    color: black;
+}
+.navbar-grey .navbar-nav > .active > a,
+.navbar-grey .navbar-nav > .active > a:hover,
+.navbar-grey .navbar-nav > .active > a:focus {
+    color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-grey .navbar-nav > .open > a,
+.navbar-grey .navbar-nav > .open > a:hover,
+.navbar-grey .navbar-nav > .open > a:focus {
+    color: black;
+    background: rgba(0,0,0,.2);
+}
+.navbar-grey .navbar-nav > .dropdown > a .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-grey .navbar-nav > .dropdown > a:hover .caret,
+.navbar-grey .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-grey .navbar-nav > .open > a .caret,
+.navbar-grey .navbar-nav > .open > a:hover .caret,
+.navbar-grey .navbar-nav > .open > a:focus .caret {
+    border-top-color: black;
+    border-bottom-color: black;
+}
+.navbar-grey .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-grey .navbar-toggle:hover,
+.navbar-grey .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
+}
+.navbar-grey .navbar-toggle .icon-bar {
+    background-color: black;
+}
+@media (max-width: 767px) {
+    .navbar-grey .navbar-nav .open .dropdown-menu > li > a {
+        color: black;
+    }
+    .navbar-grey .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-grey .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: black;
+    }
+}
+
+
+/* blue-grey */
 
 .navbar-blue-grey {
     background-color: #607d8b;
+}
+.navbar-blue-grey .navbar-brand {
+    color: white;
+}
+.navbar-blue-grey .navbar-brand:hover,
+.navbar-blue-grey .navbar-brand:focus {
+    color: white;
+}
+.navbar-blue-grey .navbar-nav > li > a {
+    color: white;
+}
+.navbar-blue-grey .navbar-nav > li > a:hover,
+.navbar-blue-grey .navbar-nav > li > a:focus {
     color: white;
 }
+.navbar-blue-grey .navbar-nav > .active > a,
+.navbar-blue-grey .navbar-nav > .active > a:hover,
+.navbar-blue-grey .navbar-nav > .active > a:focus {
+    color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-blue-grey .navbar-nav > .open > a,
+.navbar-blue-grey .navbar-nav > .open > a:hover,
+.navbar-blue-grey .navbar-nav > .open > a:focus {
+    color: white;
+    background: rgba(0,0,0,.2);
+}
+.navbar-blue-grey .navbar-nav > .dropdown > a .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-blue-grey .navbar-nav > .dropdown > a:hover .caret,
+.navbar-blue-grey .navbar-nav > .dropdown > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-blue-grey .navbar-nav > .open > a .caret,
+.navbar-blue-grey .navbar-nav > .open > a:hover .caret,
+.navbar-blue-grey .navbar-nav > .open > a:focus .caret {
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.navbar-blue-grey .navbar-toggle {
+    border-color: rgba(0,0,0,.2);
+}
+.navbar-blue-grey .navbar-toggle:hover,
+.navbar-blue-grey .navbar-toggle:focus {
+    background: rgba(0,0,0,.2);
+}
+.navbar-blue-grey .navbar-toggle .icon-bar {
+    background-color: white;
+}
+@media (max-width: 767px) {
+    .navbar-blue-grey .navbar-nav .open .dropdown-menu > li > a {
+        color: white;
+    }
+    .navbar-blue-grey .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-blue-grey .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: white;
+    }
+}
 
 /*****************************************************\
                        BUTTONS
 \*****************************************************/
 
-.btn-red {
+.btn-red, .btn-red:hover, .btn-red:active, .btn-red:focus {
     background-color: #f44336;
     color: white;
 }
 
-.btn-pink {
+.btn-pink, .btn-pink:hover, .btn-pink:active, .btn-pink:focus {
     background-color: #e91e63;
     color: white;
 }
 
-.btn-purple {
+.btn-purple, .btn-purple:hover, .btn-purple:active, .btn-purple:focus {
     background-color: #9c27b0;
     color: white;
 }
 
-.btn-deep-purple {
+.btn-deep-purple, .btn-deep-purple:hover, .btn-deep-purple:active, .btn-deep-purple:focus {
     background-color: #673ab7;
     color: white;
 }
 
-.btn-indigo {
+.btn-indigo, .btn-indigo:hover, .btn-indigo:active, .btn-indigo:focus {
     background-color: #3f51b5;
     color: white;
 }
 
-.btn-blue {
+.btn-blue, .btn-blue:hover, .btn-blue:active, .btn-blue:focus {
     background-color: #2196f3;
     color: white;
 }
 
-.btn-light-blue {
+.btn-light-blue, .btn-light-blue:hover, .btn-light-blue:active, .btn-light-blue:focus {
     background-color: #03a9f4;
     color: black;
 }
 
-.btn-cyan {
+.btn-cyan, .btn-cyan:hover, .btn-cyan:active, .btn-cyan:focus {
     background-color: #00bcd4;
     color: black;
 }
 
-.btn-teal {
+.btn-teal, .btn-teal:hover, .btn-teal:active, .btn-teal:focus {
     background-color: #009688;
     color: white;
 }
 
-.btn-green {
+.btn-green, .btn-green:hover, .btn-green:active, .btn-green:focus {
     background-color: #4caf50;
     color: black;
 }
 
-.btn-light-green {
+.btn-light-green, .btn-light-green:hover, .btn-light-green:active, .btn-light-green:focus {
     background-color: #8bc34a;
     color: black;
 }
 
-.btn-lime {
+.btn-lime, .btn-lime:hover, .btn-lime:active, .btn-lime:focus {
     background-color: #cddc39;
     color: black;
 }
 
-.btn-yellow {
+.btn-yellow, .btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus {
     background-color: #ffeb3b;
     color: black;
 }
 
-.btn-amber {
+.btn-amber, .btn-amber:hover, .btn-amber:active, .btn-amber:focus {
     background-color: #ffc107;
     color: black;
 }
 
-.btn-orange {
+.btn-orange, .btn-orange:hover, .btn-orange:active, .btn-orange:focus {
     background-color: #ff9800;
     color: black;
 }
 
-.btn-deep-orange {
+.btn-deep-orange, .btn-deep-orange:hover, .btn-deep-orange:active, .btn-deep-orange:focus {
     background-color: #ff5722;
     color: white;
 }
 
-.btn-brown {
+.btn-brown, .btn-brown:hover, .btn-brown:active, .btn-brown:focus {
     background-color: #795548;
     color: white;
 }
 
-.btn-grey {
+.btn-grey, .btn-grey:hover, .btn-grey:active, .btn-grey:focus {
     background-color: #9e9e9e;
     color: black;
 }
 
-.btn-blue-grey {
+.btn-blue-grey, .btn-blue-grey:hover, .btn-blue-grey:active, .btn-blue-grey:focus {
     background-color: #607d8b;
     color: white;
 }