diff --git a/README.md b/README.md
index 27c43a11..bf8be498 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
-Bootstrap Material Design
+Material Design for Bootstrap
 =========================
 
-This Bootstrap theme is an easy way to use the new Material Design guide-lines by Google in your Bootstrap 3 based application.
+This Bootstrap theme is an easy way to use the new Material Design guide-lines by Google in your Bootstrap 3 based application.  
 Just include the theme right after the Bootstrap CSS and include the javascript at the end of your document, everything will be converted to Material Design (paper) style.
 
 This theme is in early developement and is not ready for production.
@@ -31,6 +31,19 @@ Currently supported elements:
 
 Material Design for Bootstrap provides some additional stuff to get the best from Material Design.
 
+### Variations:
+
+There are 17 additional color variations (in addition to the classic 4 variations) for buttons, inputs, checkboxes, radios, alerts, navbars, tabs, labels, paginations, progess bars and more.  
+They can be used adding to the desired element the class suffix `-material-color` replacing `color` with the desired one.
+
+Example:
+
+    <button class="btn btn-material-deeppurple">Deep purple button</button>
+
+These colors are took from the Material Design color palette and are reported below:
+
+![palette](screenshots/palette.jpg)
+
 ### Buttons:
 
 Add `.btn-flat` to a button to make it flat, without shadows.  
diff --git a/alerts.less b/alerts.less
index b88b6b21..97b8347b 100644
--- a/alerts.less
+++ b/alerts.less
@@ -1,26 +1,18 @@
 // main: material.less
 
-.alert, .alert-success, .alert-info, .alert-warning, .alert-danger {
+.alert {
     border: 0px;
     border-radius: 0;
     a, .alert-link {
         color: #FFFFFF;
     }
-}
-
-.alert-success {
-    color: #FFFFFF;
-    background-color: @alert-success;
-}
-.alert-info {
-    color: #FFFFFF;
-    background-color: @alert-info;
-}
-.alert-warning {
-    color: #FFFFFF;
-    background-color: @alert-warning;
-}
-.alert-danger {
-    color: #FFFFFF;
-    background-color: @alert-danger;
+    .variations(~"", background-color, #FFFFFF);
+    &-info, &-danger, &-warning, &-success {
+        color: #FFFFFF;
+    }
+    &-default {
+        a, .alert-link {
+            color: #000000;
+        }
+    }
 }
diff --git a/bootstrap.css b/bootstrap.css
deleted file mode 100644
index 9671cbda..00000000
--- a/bootstrap.css
+++ /dev/null
@@ -1,820 +0,0 @@
-/* Generated by less 1.7.0 */
-@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);
-@-webkit-keyframes input-highlight {
-  0% {
-    left: 20%;
-    width: 20%;
-  }
-  99% {
-    width: 0;
-    left: 0;
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@-moz-keyframes input-highlight {
-  0% {
-    left: 20%;
-    width: 20%;
-  }
-  99% {
-    width: 0;
-    left: 0;
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@keyframes input-highlight {
-  0% {
-    left: 20%;
-    width: 20%;
-  }
-  99% {
-    width: 0;
-    left: 0;
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-.shadow-z-1 {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-.shadow-z-2 {
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-}
-.shadow-z-2-hover {
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
-}
-.shadow-z-3 {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-}
-.shadow-z-4 {
-  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-}
-.shadow-z-5 {
-  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
-}
-body {
-  background-color: #EEEEEE;
-}
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6 {
-  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-.btn {
-  position: relative;
-  padding: 8px 30px;
-  border: 0;
-  margin: 10px 1px;
-  cursor: pointer;
-  border-radius: 4px;
-  text-transform: uppercase;
-  text-decoration: none;
-  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-  outline: none !important;
-}
-.btn:hover:not(.btn-link) {
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
-}
-.btn:active:not(.btn-link) {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-}
-.btn-raised {
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.btn-raised:active:not(.btn-link) {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-}
-.btn-default,
-.btn-default:hover,
-.btn-default:active,
-.btn-default:focus {
-  background-color: transparent;
-  color: #000000;
-}
-.btn-default:hover {
-  background-color: #FFFFFF;
-}
-.btn-primary,
-.btn-primary:hover,
-.btn-primary:active,
-.btn-primary:focus {
-  background-color: #4285f4;
-  color: #ffffff;
-}
-.btn-success,
-.btn-success:hover,
-.btn-success:active,
-.btn-success:focus {
-  background-color: #0f9d58;
-  color: #ffffff;
-}
-.btn-info,
-.btn-info:hover,
-.btn-info:active,
-.btn-info:focus {
-  background-color: #3498db;
-  color: #ffffff;
-}
-.btn-warning,
-.btn-warning:hover,
-.btn-warning:active,
-.btn-warning:focus {
-  background-color: #ff5722;
-  color: #ffffff;
-}
-.btn-danger,
-.btn-danger:hover,
-.btn-danger:active,
-.btn-danger:focus {
-  background-color: #db4437;
-  color: #ffffff;
-}
-.open > .dropdown-toggle.btn-default {
-  background-color: transparent;
-}
-.open > .dropdown-toggle.btn-primary {
-  background-color: #4285f4;
-}
-.open > .dropdown-toggle.btn-success {
-  background-color: #0f9d58;
-}
-.open > .dropdown-toggle.btn-info {
-  background-color: #3498db;
-}
-.open > .dropdown-toggle.btn-warning {
-  background-color: #ff5722;
-}
-.open > .dropdown-toggle.btn-danger {
-  background-color: #db4437;
-}
-.btn-flat {
-  box-shadow: none !important;
-}
-.btn-flat.btn-default:hover {
-  background: none;
-}
-.btn-group,
-.btn-group-vertical {
-  position: relative;
-  border-radius: 4px;
-  margin: 10px 1px;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.btn-group:active:not(.btn-link),
-.btn-group-vertical:active:not(.btn-link) {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-}
-.btn-group.open .dropdown-toggle,
-.btn-group-vertical.open .dropdown-toggle {
-  box-shadow: none;
-}
-.btn-group.btn-group-raised,
-.btn-group-vertical.btn-group-raised {
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.btn-group.btn-group-raised:active:not(.btn-link),
-.btn-group-vertical.btn-group-raised:active:not(.btn-link) {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-}
-.btn-group .btn,
-.btn-group-vertical .btn,
-.btn-group .btn:active,
-.btn-group-vertical .btn:active,
-.btn-group .btn-group,
-.btn-group-vertical .btn-group {
-  box-shadow: none !important;
-  margin: 0;
-}
-.btn-group .btn:active .caret,
-.btn-group-vertical .btn:active .caret {
-  margin-left: -1px;
-}
-.btn-group-flat {
-  box-shadow: none !important;
-}
-.ripple-wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-radius: 2px;
-}
-.ripple {
-  fill: black;
-  fill-opacity: 0.05;
-  stroke: none;
-  -webkit-transform: scale(1);
-  -ms-transform: scale(1);
-  transform: scale(1);
-  -webkit-transform-origin: 50%;
-  -ms-transform-origin: 50%;
-  transform-origin: 50%;
-  opacity: 0;
-}
-.ripple.ripple-on {
-  transition: opacity 0.15s ease-in 0s -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-  -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-  opacity: 1;
-}
-.ripple.ripple-out {
-  -webkit-transition: opacity 0.2s linear 0s !important;
-  transition: opacity 0.2s linear 0s !important;
-  opacity: 0;
-}
-.form-horizontal .checkbox {
-  padding-top: 15px;
-}
-.checkbox label {
-  cursor: pointer;
-  padding-left: 45px;
-  position: relative;
-}
-.checkbox label span {
-  display: block;
-  position: absolute;
-  left: 10px;
-  transition-duration: 0.2s;
-}
-.checkbox label .bubble {
-  background: rgba(137, 137, 137, 0.3);
-  left: 0;
-  top: -10px;
-  height: 40px;
-  width: 40px;
-  border-radius: 100%;
-  transform: scale(0);
-  transition: transform .1s, opacity 0.2s 0.4s;
-  z-index: 1;
-}
-.checkbox label .bubble.animate {
-  transform: scale(1);
-  opacity: 0;
-}
-.checkbox label .box {
-  border: 2px solid #5A5F5A;
-  height: 20px;
-  width: 20px;
-  transition-delay: 0.2s;
-}
-.checkbox label .check {
-  top: -4px;
-  left: 16px;
-  width: 12px;
-  height: 24px;
-  border: 2px solid #0F9D58;
-  border-top: none;
-  border-left: none;
-  opacity: 0;
-  z-index: 888;
-  transform: rotate(45deg);
-  transition-delay: 0.2s;
-}
-.checkbox input[type=checkbox] {
-  display: none;
-}
-.checkbox input[type=checkbox]:checked ~ .box {
-  opacity: 0;
-  transform: scale(0) rotate(-180deg);
-}
-.checkbox input[type=checkbox]:checked ~ .bubble {
-  background: rgba(15, 157, 88, 0.3);
-}
-.checkbox input[type=checkbox]:checked ~ .check {
-  opacity: 1;
-  transform: scale(1) rotate(45deg);
-}
-.form-horizontal .radio {
-  margin-bottom: 10px;
-}
-.radio label {
-  cursor: pointer;
-  padding-left: 45px;
-  position: relative;
-}
-.radio label span {
-  display: block;
-  position: absolute;
-  left: 10px;
-  top: 2px;
-  transition-duration: 0.2s;
-}
-.radio label .bubble {
-  background: rgba(137, 137, 137, 0.3);
-  left: 0;
-  top: -8px;
-  height: 34px;
-  width: 34px;
-  border-radius: 100%;
-  transform: scale(0);
-  transition: transform .1s, opacity 0.2s 0.4s;
-  z-index: 1;
-}
-.radio label .bubble.animate {
-  transform: scale(1);
-  opacity: 0;
-}
-.radio label .circle {
-  border: 2px solid #5A5F5A;
-  height: 15px;
-  width: 15px;
-  border-radius: 100%;
-}
-.radio label .check {
-  height: 15px;
-  width: 15px;
-  border-radius: 100%;
-  background-color: #5a5f5a;
-  transform: scale(0);
-}
-.radio.radio-default .check {
-  background-color: #5a5f5a;
-}
-.radio.radio-primary .check {
-  background-color: #4285f4;
-}
-.radio.radio-success .check {
-  background-color: #0f9d58;
-}
-.radio.radio-info {
-  background-color: #3498db;
-}
-.radio.radio-warning .check {
-  background-color: #ff5722;
-}
-.radio.radio-danger .check {
-  background-color: #db4437;
-}
-.radio input[type=radio] {
-  display: none;
-}
-.radio input[type=radio]:checked ~ .check {
-  transform: scale(1);
-}
-.radio input[type=radio]:checked ~ .circle {
-  transform: scale(1);
-  border: 1px;
-}
-.form-control-wrapper {
-  position: relative;
-  /* active state */
-}
-.form-control-wrapper .form-control,
-.form-control-wrapper .form-control:focus {
-  float: none;
-  border: 0;
-  box-shadow: none;
-  border-radius: 0;
-  background: transparent;
-  border-bottom: 1px solid #757575;
-}
-.form-control-wrapper .form-control:focus {
-  outline: none;
-}
-.form-control-wrapper .floating-label {
-  color: #7E7E7E;
-  font-size: 14px;
-  position: absolute;
-  pointer-events: none;
-  left: 12px;
-  top: 7px;
-  transition: 0.2s ease all;
-  opacity: 0;
-}
-.form-control-wrapper .form-control:focus ~ .floating-label {
-  top: -10px;
-  font-size: 10px;
-  color: #5264ae;
-}
-.form-control-wrapper .form-control:not(.empty) ~ .floating-label {
-  top: -10px;
-  font-size: 10px;
-  opacity: 1;
-}
-.form-control-wrapper .form-control:focus:invalid ~ .floating-label {
-  color: #db4437;
-}
-.form-control-wrapper .form-control:focus ~ .material-input:after {
-  background-color: #5264ae;
-}
-.form-control-wrapper .form-control:focus:invalid ~ .material-input:before,
-.form-control-wrapper .form-control:focus:invalid ~ .material-input:after {
-  background-color: #db4437;
-}
-.form-control-wrapper .form-control.empty ~ .floating-label {
-  opacity: 1;
-}
-.form-control-wrapper .material-input:before {
-  position: absolute;
-  content: "";
-  width: 100%;
-  left: 0;
-  height: 2px;
-  background-color: #5264ae;
-  bottom: -1px;
-  transform: scaleX(0);
-  transition: transform 0s;
-}
-.form-control-wrapper .form-control:focus ~ .material-input:before {
-  transform: scaleX(1);
-  transition: transform 0.2s ease-out;
-}
-.form-control-wrapper .material-input:after {
-  content: "";
-  position: absolute;
-  height: 18px;
-  width: 100px;
-  margin-top: -1px;
-  top: 25%;
-  left: 0;
-  pointer-events: none;
-  opacity: 0.9;
-}
-.form-control-wrapper .input-lg ~ .material-input:after {
-  height: 26px;
-}
-.form-control-wrapper textarea {
-  resize: none;
-}
-.form-control-wrapper textarea ~ .form-control-highlight {
-  margin-top: -11px;
-}
-.form-control-wrapper .form-control:focus ~ .material-input:after {
-  -webkit-animation: input-highlight 0.3s ease;
-  animation: input-highlight 0.3s ease;
-  -webkit-animation-fill-mode: forwards;
-  animation-fill-mode: forwards;
-}
-.form-group.has-warning .material-input:before,
-.form-group.has-warning input.form-control:focus ~ .material-input:after {
-  background: #ff5722;
-}
-.form-group.has-warning .control-label,
-.form-group.has-warning input.form-control:focus ~ .floating-label {
-  color: #ff5722;
-}
-.form-group.has-error .material-input:before,
-.form-group.has-error input.form-control:focus ~ .material-input:after {
-  background: #db4437;
-}
-.form-group.has-error .control-label,
-.form-group.has-error input.form-control:focus ~ .floating-label {
-  color: #db4437;
-}
-.form-group.has-success .material-input:before,
-.form-group.has-success input.form-control:focus ~ .material-input:after {
-  background: #0f9d58;
-}
-.form-group.has-success .control-label,
-.form-group.has-success input.form-control:focus ~ .floating-label {
-  color: #0f9d58;
-}
-.form-group.has-info .material-input:before,
-.form-group.has-info input.form-control:focus ~ .material-input:after {
-  background: #3498db;
-}
-.form-group.has-info .control-label,
-.form-group.has-info input.form-control:focus ~ .floating-label {
-  color: #3498db;
-}
-.input-group .form-control-wrapper {
-  margin-right: 5px;
-  margin-left: 5px;
-  bottom: -10px;
-}
-.input-group .form-control-wrapper .form-control {
-  float: none;
-}
-.input-group .input-group-addon {
-  border: 0;
-}
-.input-group .input-group-btn .btn {
-  border-radius: 4px;
-}
-select.form-control {
-  border: 0;
-  box-shadow: none;
-  border-bottom: 1px solid #757575;
-  border-radius: 0;
-}
-select.form-control:focus {
-  box-shadow: none;
-  border-color: #757575;
-}
-.container .well,
-.container .jumbotron {
-  background-color: #fff;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-  border-radius: 2px;
-}
-.container .well p,
-.container .jumbotron p {
-  font-weight: 300;
-}
-.modal-content {
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-  border-radius: 0;
-  border: 0;
-}
-.modal-content .modal-header {
-  border-bottom: 0;
-}
-.modal-content .modal-footer {
-  border-top: 0;
-}
-.modal-content .modal-footer .btn + .btn {
-  margin-bottom: 10px;
-}
-.list-group {
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-  border-radius: 2px;
-}
-.list-group .list-group-item:last-child {
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-.list-group .list-group-item:first-child {
-  border-top-right-radius: 2px;
-  boborder-top-right-radius: 2px;
-}
-.navbar {
-  background-color: #4285f4;
-  border: 0;
-  border-radius: 0;
-}
-.navbar .navbar-brand {
-  position: relative;
-  height: 60px;
-  line-height: 30px;
-  color: #ffffff;
-}
-.navbar .navbar-brand:hover,
-.navbar .navbar-brand:focus {
-  color: #ffffff;
-  background-color: transparent;
-}
-.navbar .navbar-text {
-  color: #ffffff;
-}
-.navbar .navbar-nav > li > a {
-  color: #ffffff;
-  padding-top: 20px;
-  padding-bottom: 20px;
-}
-.navbar .navbar-nav > li > a:hover,
-.navbar .navbar-nav > li > a:focus {
-  color: #ffffff;
-  background-color: transparent;
-}
-.navbar .navbar-nav > .active > a,
-.navbar .navbar-nav > .active > a:hover,
-.navbar .navbar-nav > .active > a:focus {
-  color: #ffffff;
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.navbar .navbar-nav > .disabled > a,
-.navbar .navbar-nav > .disabled > a:hover,
-.navbar .navbar-nav > .disabled > a:focus {
-  color: #e5e5e5;
-  background-color: transparent;
-}
-.navbar .navbar-toggle {
-  border-color: #ffffff;
-}
-.navbar .navbar-toggle:hover,
-.navbar .navbar-toggle:focus {
-  background-color: transparent;
-}
-.navbar .navbar-toggle .icon-bar {
-  background-color: #ffffff;
-}
-.navbar .navbar-collapse,
-.navbar .navbar-form {
-  border-color: #206ff2;
-}
-.navbar .navbar-nav > .open > a,
-.navbar .navbar-nav > .open > a:hover,
-.navbar .navbar-nav > .open > a:focus {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: #ffffff;
-}
-@media (max-width: 767px) {
-  .navbar .navbar-nav .open .dropdown-menu > .dropdown-header {
-    border: 0;
-    color: #d4d4d4;
-  }
-  .navbar .navbar-nav .open .dropdown-menu .divider {
-    background-color: #ffffff;
-  }
-  .navbar .navbar-nav .open .dropdown-menu > li > a {
-    color: #ffffff;
-  }
-  .navbar .navbar-nav .open .dropdown-menu > li > a:hover,
-  .navbar .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #ffffff;
-    background-color: transparent;
-  }
-  .navbar .navbar-nav .open .dropdown-menu > .active > a,
-  .navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
-  .navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
-    color: #ffffff;
-    background-color: rgba(0, 0, 0, 0.05);
-  }
-  .navbar .navbar-nav .open .dropdown-menu > .disabled > a,
-  .navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
-  .navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
-    color: #e5e5e5;
-    background-color: transparent;
-  }
-}
-.navbar .navbar-link {
-  color: #ffffff;
-}
-.navbar .navbar-link:hover {
-  color: #ffffff;
-}
-.navbar .btn-link {
-  color: #ffffff;
-}
-.navbar .btn-link:hover,
-.navbar .btn-link:focus {
-  color: #ffffff;
-}
-.navbar .btn-link[disabled]:hover,
-fieldset[disabled] .navbar .btn-link:hover,
-.navbar .btn-link[disabled]:focus,
-fieldset[disabled] .navbar .btn-link:focus {
-  color: #e5e5e5;
-}
-.navbar .navbar-form .form-control-wrapper .form-control {
-  border-color: #ffffff;
-  color: #ffffff;
-}
-.navbar .navbar-form .form-control-wrapper .material-input:before,
-.navbar .navbar-form .form-control-wrapper input:focus ~ .material-input:after {
-  background-color: #ffffff;
-}
-.navbar .navbar-form ::-webkit-input-placeholder {
-  color: #ffffff;
-}
-.navbar .navbar-form :-moz-placeholder {
-  color: #ffffff;
-}
-.navbar .navbar-form ::-moz-placeholder {
-  color: #ffffff;
-}
-.navbar .navbar-form :-ms-input-placeholder {
-  color: #ffffff;
-}
-.navbar-primary {
-  background-color: #4285f4;
-}
-.navbar-primary .navbar-collapse,
-.navbar-primary .navbar-form {
-  border-color: #206ff2;
-}
-.navbar-success {
-  background-color: #0f9d58;
-}
-.navbar-success .navbar-collapse,
-.navbar-success .navbar-form {
-  border-color: #0c7c46;
-}
-.navbar-info {
-  background-color: #3498db;
-}
-.navbar-info .navbar-collapse,
-.navbar-info .navbar-form {
-  border-color: #2386c8;
-}
-.navbar-warning {
-  background-color: #ff5722;
-}
-.navbar-warning .navbar-collapse,
-.navbar-warning .navbar-form {
-  border-color: #fd3d00;
-}
-.navbar-danger {
-  background-color: #db4437;
-}
-.navbar-danger .navbar-collapse,
-.navbar-danger .navbar-form {
-  border-color: #ca3124;
-}
-.navbar-inverse {
-  background-color: #5264ae;
-}
-.navbar-inverse .navbar-collapse,
-.navbar-inverse .navbar-form {
-  border-color: #465696;
-}
-.dropdown-menu {
-  border: 0;
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-}
-.dropdown-menu .divider {
-  background-color: rgba(229, 229, 229, 0.12);
-}
-.dropdown-menu li {
-  overflow: hidden;
-  position: relative;
-}
-.dropdown-menu li a:hover {
-  background-color: transparent;
-}
-.alert,
-.alert-success,
-.alert-info,
-.alert-warning,
-.alert-danger {
-  border: 0px;
-  border-radius: 0;
-}
-.alert a,
-.alert-success a,
-.alert-info a,
-.alert-warning a,
-.alert-danger a,
-.alert .alert-link,
-.alert-success .alert-link,
-.alert-info .alert-link,
-.alert-warning .alert-link,
-.alert-danger .alert-link {
-  color: #FFFFFF;
-}
-.alert-success {
-  color: #FFFFFF;
-  background-color: #0f9d58;
-}
-.alert-info {
-  color: #FFFFFF;
-  background-color: #3498db;
-}
-.alert-warning {
-  color: #FFFFFF;
-  background-color: #ff5722;
-}
-.alert-danger {
-  color: #FFFFFF;
-  background-color: #db4437;
-}
-.progress {
-  height: 4px;
-  border-radius: 0;
-  box-shadow: none;
-  background: #c8c8c8;
-}
-.progress .progress-bar {
-  box-shadow: none;
-}
-.progress .progress-bar,
-.progress .progress-bar-info {
-  background-color: #3498db;
-}
-.progress .progress-bar-warning {
-  background-color: #ff5722;
-}
-.progress .progress-bar-danger {
-  background-color: #db4437;
-}
-.progress .progress-bar-success {
-  background-color: #0f9d58;
-}
-.text-warning {
-  color: #ff5722;
-}
-.text-primary {
-  color: #4285f4;
-}
-.text-danger {
-  color: #db4437;
-}
-.text-success {
-  color: #0f9d58;
-}
-.text-info {
-  color: #3498db;
-}
diff --git a/buttons.less b/buttons.less
index eba643be..f22e3167 100644
--- a/buttons.less
+++ b/buttons.less
@@ -18,7 +18,11 @@
     border-radius: 4px;
     text-transform: uppercase;
     text-decoration: none;
+    color: @darkbg-text;
 
+    &:hover {
+        color: @darkbg-text;
+    }
     &:hover:not(.btn-link) {
         .shadow-z-2-hover();
     }
@@ -27,57 +31,29 @@
         .shadow-z-3();
     }
     outline: none !important;
+
+    .variations(~":not(.btn-link)", background-color, @btn-default);
+
 }
-.btn-raised {
-    .btn-shadow();
-}
-.btn-default {
-    &, &:hover, &:active, &:focus {
-        background-color: @btn-default;
-        color: @btn-default-text;
-    }
+// This is needed to style buttons which has not a variation suffix (they must stiled as btn-default)
+.btn-link, .btn:not([class^="btn btn-"]), .btn-default {
+    color: @lightbg-text;
     &:hover {
-        background-color: #FFFFFF;
+        color: @lightbg-text;
     }
 }
-.btn-primary {
-    &, &:hover, &:active, &:focus {
-        background-color: @btn-primary;
-        color: @btn-primary-text;
-    }
-}
-.btn-success {
-    &, &:hover, &:active, &:focus {
-        background-color: @btn-success;
-        color: @btn-success-text;
-    }
-}
-.btn-info {
-    &, &:hover, &:active, &:focus {
-        background-color: @btn-info;
-        color: @btn-info-text;
-    }
-}
-.btn-warning {
-    &, &:hover, &:active, &:focus {
-        background-color: @btn-warning;
-        color: @btn-warning-text;
-    }
-}
-.btn-danger {
-    &, &:hover, &:active, &:focus {
-        background-color: @btn-danger;
-        color: @btn-danger-text;
+.btn:not([class^="btn btn-"]), .btn-default {
+    &:hover {
+        background-color: rgba(255,255,255,0.5);
     }
 }
 
+.btn-raised {
+    .btn-shadow();
+}
+
 .open > .dropdown-toggle.btn {
-    &-default { background-color: @btn-default; }
-    &-primary { background-color: @btn-primary; }
-    &-success { background-color: @btn-success; }
-    &-info { background-color: @btn-info; }
-    &-warning { background-color: @btn-warning; }
-    &-danger { background-color: @btn-danger; }
+    .variations(~"", background-color, @btn-default);
 }
 .btn-flat {
     box-shadow: none !important;
diff --git a/checkboxes.less b/checkboxes.less
index 6af35b38..3444b3c2 100644
--- a/checkboxes.less
+++ b/checkboxes.less
@@ -14,8 +14,8 @@
             left: 10px;
             transition-duration: 0.2s;
         }
-        .bubble {
-            background: @input-unchecked;
+        .ripple {
+            background-color: @lightbg-text;
             left: 0;
             top: -10px;
             height: 40px;
@@ -24,13 +24,15 @@
             transform: scale(0);
             transition: transform .1s, opacity 0.2s 0.4s;
             z-index: 1;
+            opacity: 0.2;
+            margin: 0;
             &.animate {
                 transform: scale(1);
                 opacity: 0;
             }
         }
         .box {
-            border: 2px solid #5A5F5A;
+            border: 2px solid @lightbg-text;
             height: 20px;
             width: 20px;
             transition-delay: 0.2s;
@@ -40,7 +42,7 @@
             left: 16px;
             width: 12px;
             height: 24px;
-            border: 2px solid #0F9D58;
+            border: 2px solid;
             border-top: none;
             border-left: none;
             opacity: 0;
@@ -48,18 +50,28 @@
             transform: rotate(45deg);
             transition-delay: 0.2s;
         }
+    }
+    .variations(~" .check", color, @success);
 
+    input[type=checkbox][disabled]:checked ~ .check,
+    input[type=checkbox][disabled]:not(:checked) ~ .box {
+        opacity: 0.5;
+    }
+    input[type=checkbox][disabled] ~ .ripple {
+        opacity: 0.1;
     }
     input[type=checkbox] { display: none; }
     input[type=checkbox]:checked ~ .box {
         opacity: 0;
         transform: scale(0) rotate(-180deg);
     }
-    input[type=checkbox]:checked ~ .bubble {
-        background: @input-checked;
-    }
+    .variations(~" input[type=checkbox]:checked ~ .ripple", background-color, @success);
     input[type=checkbox]:checked ~ .check {
         opacity: 1;
         transform: scale(1) rotate(45deg);
     }
+
+    input[type=checkbox][disabled] ~ .ripple {
+        background-color: @lightbg-text;
+    }
 }
diff --git a/index.html b/index.html
index bf0e1319..3e147934 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <title>Bootstrap Material</title>
         <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet">
-        <link href="material/material.css" rel="stylesheet">
+        <link href="material.css" rel="stylesheet">
         <style>
             body{padding-top:50px}#banner{border-bottom:none}.page-header h1{font-size:4em}.bs-docs-section{margin-top:8em}.bs-component{position:relative}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}#source-button{position:absolute;top:0;right:0;z-index:100;font-weight:bold;padding: 5px 10px;}.progress{margin-bottom:10px}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:4em 0 0;background-color:#141d27;color:#fff;text-align:center}.splash h1{font-size:4em}.splash #social{margin:2em 0}.splash .alert{margin:2em 0}.section-tout{padding:4em 0 3em;border-bottom:1px solid rgba(0,0,0,0.05);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1}.section-preview .preview .image{position:relative}.section-preview .preview .image:before{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);position:absolute;top:0;left:0;width:100%;height:100%;content:"";pointer-events:none}.section-preview .preview .options{padding:1em 2em 2em;border:1px solid rgba(0,0,0,0.05);border-top:none;text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor{text-align:center}.sponsor a:hover{text-decoration:none}@media (max-width:767px){#banner{margin-bottom:2em;text-align:center}}
         </style>
@@ -1286,6 +1286,6 @@
             })();
 
         </script>
-        <script src="material/material.js?v2"></script>
+        <script src="material.js?v0.0.1"></script>
     </body>
 </html>
diff --git a/inputs.less b/inputs.less
index 8de507e0..ac736522 100644
--- a/inputs.less
+++ b/inputs.less
@@ -93,6 +93,14 @@
         -webkit-animation-fill-mode: forwards;
         animation-fill-mode: forwards;
     }
+
+    select ~ .material-input:before {
+        bottom: 1px;
+    }
+    select ~ .material-input:after {
+        display: none;
+    }
+
 }
 
 .form-group {
@@ -128,6 +136,10 @@
             color: @input-info;
         }
     }
+    .variations(~" .material-input:before", background-color, @lightbg-text);
+    .variations(~" input.form-control:focus ~ .material-input:after", background-color, @lightbg-text);
+    .variations(~" .control-label", color, @lightbg-text);
+    .variations(~" input.form-control:focus ~ .floating-label", color, @lightbg-text);
 
 }
 
diff --git a/material.css b/material.css
index f5bbb6e8..99dad051 100644
--- a/material.css
+++ b/material.css
@@ -63,6 +63,13 @@
 body {
   background-color: #EEEEEE;
 }
+body.inverse {
+  background: #333333;
+}
+body.inverse,
+body.inverse .form-control {
+  color: #ffffff;
+}
 body,
 h1,
 h2,
@@ -87,15 +94,103 @@ h6,
   border-radius: 4px;
   text-transform: uppercase;
   text-decoration: none;
+  color: #ffffff;
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none !important;
 }
+.btn:hover {
+  color: #ffffff;
+}
 .btn:hover:not(.btn-link) {
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
 }
 .btn:active:not(.btn-link) {
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
 }
+.btn:not(.btn-link),
+.btn-default:not(.btn-link) {
+  background-color: transparent;
+}
+.btn-primary:not(.btn-link) {
+  background-color: #4285f4;
+}
+.btn-success:not(.btn-link) {
+  background-color: #0f9d58;
+}
+.btn-info:not(.btn-link) {
+  background-color: #3498db;
+}
+.btn-warning:not(.btn-link) {
+  background-color: #ff5722;
+}
+.btn-danger:not(.btn-link) {
+  background-color: #f44336;
+}
+.btn-material-red:not(.btn-link) {
+  background-color: #f44336;
+}
+.btn-material-pink:not(.btn-link) {
+  background-color: #e91e63;
+}
+.btn-material-purple:not(.btn-link) {
+  background-color: #9c27b0;
+}
+.btn-material-deeppurple:not(.btn-link) {
+  background-color: #673ab7;
+}
+.btn-material-indigo:not(.btn-link) {
+  background-color: #3f51b5;
+}
+.btn-material-lightblue:not(.btn-link) {
+  background-color: #03a9f4;
+}
+.btn-material-cyan:not(.btn-link) {
+  background-color: #00bcd4;
+}
+.btn-material-teal:not(.btn-link) {
+  background-color: #009688;
+}
+.btn-material-lightgreen:not(.btn-link) {
+  background-color: #8bc34a;
+}
+.btn-material-lime:not(.btn-link) {
+  background-color: #cddc39;
+}
+.btn-material-lightyellow:not(.btn-link) {
+  background-color: #ffeb3b;
+}
+.btn-material-orange:not(.btn-link) {
+  background-color: #ff9800;
+}
+.btn-material-deeporange:not(.btn-link) {
+  background-color: #ff5722;
+}
+.btn-material-grey:not(.btn-link) {
+  background-color: #9e9e9e;
+}
+.btn-material-bluegrey:not(.btn-link) {
+  background-color: #607d8b;
+}
+.btn-material-brown:not(.btn-link) {
+  background-color: #795548;
+}
+.btn-material-lightgrey:not(.btn-link) {
+  background-color: #ececec;
+}
+.btn-link,
+.btn:not([class^="btn btn-"]),
+.btn-default {
+  color: #4d4d4d;
+}
+.btn-link:hover,
+.btn:not([class^="btn btn-"]):hover,
+.btn-default:hover {
+  color: #4d4d4d;
+}
+.btn:not([class^="btn btn-"]):hover,
+.btn-default:hover {
+  background-color: rgba(255, 255, 255, 0.5);
+}
 .btn-raised {
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
@@ -103,51 +198,7 @@ h6,
 .btn-raised:active:not(.btn-link) {
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
 }
-.btn-default,
-.btn-default:hover,
-.btn-default:active,
-.btn-default:focus {
-  background-color: transparent;
-  color: #000000;
-}
-.btn-default:hover {
-  background-color: #FFFFFF;
-}
-.btn-primary,
-.btn-primary:hover,
-.btn-primary:active,
-.btn-primary:focus {
-  background-color: #4285f4;
-  color: #ffffff;
-}
-.btn-success,
-.btn-success:hover,
-.btn-success:active,
-.btn-success:focus {
-  background-color: #0f9d58;
-  color: #ffffff;
-}
-.btn-info,
-.btn-info:hover,
-.btn-info:active,
-.btn-info:focus {
-  background-color: #3498db;
-  color: #ffffff;
-}
-.btn-warning,
-.btn-warning:hover,
-.btn-warning:active,
-.btn-warning:focus {
-  background-color: #ff5722;
-  color: #ffffff;
-}
-.btn-danger,
-.btn-danger:hover,
-.btn-danger:active,
-.btn-danger:focus {
-  background-color: #db4437;
-  color: #ffffff;
-}
+.open > .dropdown-toggle.btn,
 .open > .dropdown-toggle.btn-default {
   background-color: transparent;
 }
@@ -164,7 +215,58 @@ h6,
   background-color: #ff5722;
 }
 .open > .dropdown-toggle.btn-danger {
-  background-color: #db4437;
+  background-color: #f44336;
+}
+.open > .dropdown-toggle.btn-material-red {
+  background-color: #f44336;
+}
+.open > .dropdown-toggle.btn-material-pink {
+  background-color: #e91e63;
+}
+.open > .dropdown-toggle.btn-material-purple {
+  background-color: #9c27b0;
+}
+.open > .dropdown-toggle.btn-material-deeppurple {
+  background-color: #673ab7;
+}
+.open > .dropdown-toggle.btn-material-indigo {
+  background-color: #3f51b5;
+}
+.open > .dropdown-toggle.btn-material-lightblue {
+  background-color: #03a9f4;
+}
+.open > .dropdown-toggle.btn-material-cyan {
+  background-color: #00bcd4;
+}
+.open > .dropdown-toggle.btn-material-teal {
+  background-color: #009688;
+}
+.open > .dropdown-toggle.btn-material-lightgreen {
+  background-color: #8bc34a;
+}
+.open > .dropdown-toggle.btn-material-lime {
+  background-color: #cddc39;
+}
+.open > .dropdown-toggle.btn-material-lightyellow {
+  background-color: #ffeb3b;
+}
+.open > .dropdown-toggle.btn-material-orange {
+  background-color: #ff9800;
+}
+.open > .dropdown-toggle.btn-material-deeporange {
+  background-color: #ff5722;
+}
+.open > .dropdown-toggle.btn-material-grey {
+  background-color: #9e9e9e;
+}
+.open > .dropdown-toggle.btn-material-bluegrey {
+  background-color: #607d8b;
+}
+.open > .dropdown-toggle.btn-material-brown {
+  background-color: #795548;
+}
+.open > .dropdown-toggle.btn-material-lightgrey {
+  background-color: #ececec;
 }
 .btn-flat {
   box-shadow: none !important;
@@ -224,9 +326,13 @@ h6,
   border-radius: 2px;
 }
 .ripple {
-  fill: black;
-  fill-opacity: 0.05;
-  stroke: none;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  margin-left: -10px;
+  margin-top: -10px;
+  border-radius: 100%;
+  background-color: rgba(0, 0, 0, 0.05);
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
@@ -236,13 +342,15 @@ h6,
   opacity: 0;
 }
 .ripple.ripple-on {
-  transition: opacity 0.15s ease-in 0s -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
   -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+  -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+  -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+  transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
   opacity: 1;
 }
 .ripple.ripple-out {
-  -webkit-transition: opacity 0.2s linear 0s !important;
-  transition: opacity 0.2s linear 0s !important;
+  -webkit-transition: opacity 1s linear 0s !important;
+  transition: opacity 0.8s linear 0s !important;
   opacity: 0;
 }
 .form-horizontal .checkbox {
@@ -259,8 +367,8 @@ h6,
   left: 10px;
   transition-duration: 0.2s;
 }
-.checkbox label .bubble {
-  background: rgba(137, 137, 137, 0.3);
+.checkbox label .ripple {
+  background-color: #4d4d4d;
   left: 0;
   top: -10px;
   height: 40px;
@@ -269,13 +377,15 @@ h6,
   transform: scale(0);
   transition: transform .1s, opacity 0.2s 0.4s;
   z-index: 1;
+  opacity: 0.2;
+  margin: 0;
 }
-.checkbox label .bubble.animate {
+.checkbox label .ripple.animate {
   transform: scale(1);
   opacity: 0;
 }
 .checkbox label .box {
-  border: 2px solid #5A5F5A;
+  border: 2px solid #4d4d4d;
   height: 20px;
   width: 20px;
   transition-delay: 0.2s;
@@ -285,7 +395,7 @@ h6,
   left: 16px;
   width: 12px;
   height: 24px;
-  border: 2px solid #0F9D58;
+  border: 2px solid;
   border-top: none;
   border-left: none;
   opacity: 0;
@@ -293,6 +403,83 @@ h6,
   transform: rotate(45deg);
   transition-delay: 0.2s;
 }
+.checkbox .check,
+.checkbox-default .check {
+  color: #0f9d58;
+}
+.checkbox-primary .check {
+  color: #4285f4;
+}
+.checkbox-success .check {
+  color: #0f9d58;
+}
+.checkbox-info .check {
+  color: #3498db;
+}
+.checkbox-warning .check {
+  color: #ff5722;
+}
+.checkbox-danger .check {
+  color: #f44336;
+}
+.checkbox-material-red .check {
+  color: #f44336;
+}
+.checkbox-material-pink .check {
+  color: #e91e63;
+}
+.checkbox-material-purple .check {
+  color: #9c27b0;
+}
+.checkbox-material-deeppurple .check {
+  color: #673ab7;
+}
+.checkbox-material-indigo .check {
+  color: #3f51b5;
+}
+.checkbox-material-lightblue .check {
+  color: #03a9f4;
+}
+.checkbox-material-cyan .check {
+  color: #00bcd4;
+}
+.checkbox-material-teal .check {
+  color: #009688;
+}
+.checkbox-material-lightgreen .check {
+  color: #8bc34a;
+}
+.checkbox-material-lime .check {
+  color: #cddc39;
+}
+.checkbox-material-lightyellow .check {
+  color: #ffeb3b;
+}
+.checkbox-material-orange .check {
+  color: #ff9800;
+}
+.checkbox-material-deeporange .check {
+  color: #ff5722;
+}
+.checkbox-material-grey .check {
+  color: #9e9e9e;
+}
+.checkbox-material-bluegrey .check {
+  color: #607d8b;
+}
+.checkbox-material-brown .check {
+  color: #795548;
+}
+.checkbox-material-lightgrey .check {
+  color: #ececec;
+}
+.checkbox input[type=checkbox][disabled]:checked ~ .check,
+.checkbox input[type=checkbox][disabled]:not(:checked) ~ .box {
+  opacity: 0.5;
+}
+.checkbox input[type=checkbox][disabled] ~ .ripple {
+  opacity: 0.1;
+}
 .checkbox input[type=checkbox] {
   display: none;
 }
@@ -300,13 +487,83 @@ h6,
   opacity: 0;
   transform: scale(0) rotate(-180deg);
 }
-.checkbox input[type=checkbox]:checked ~ .bubble {
-  background: rgba(15, 157, 88, 0.3);
+.checkbox input[type=checkbox]:checked ~ .ripple,
+.checkbox-default input[type=checkbox]:checked ~ .ripple {
+  background-color: #0f9d58;
+}
+.checkbox-primary input[type=checkbox]:checked ~ .ripple {
+  background-color: #4285f4;
+}
+.checkbox-success input[type=checkbox]:checked ~ .ripple {
+  background-color: #0f9d58;
+}
+.checkbox-info input[type=checkbox]:checked ~ .ripple {
+  background-color: #3498db;
+}
+.checkbox-warning input[type=checkbox]:checked ~ .ripple {
+  background-color: #ff5722;
+}
+.checkbox-danger input[type=checkbox]:checked ~ .ripple {
+  background-color: #f44336;
+}
+.checkbox-material-red input[type=checkbox]:checked ~ .ripple {
+  background-color: #f44336;
+}
+.checkbox-material-pink input[type=checkbox]:checked ~ .ripple {
+  background-color: #e91e63;
+}
+.checkbox-material-purple input[type=checkbox]:checked ~ .ripple {
+  background-color: #9c27b0;
+}
+.checkbox-material-deeppurple input[type=checkbox]:checked ~ .ripple {
+  background-color: #673ab7;
+}
+.checkbox-material-indigo input[type=checkbox]:checked ~ .ripple {
+  background-color: #3f51b5;
+}
+.checkbox-material-lightblue input[type=checkbox]:checked ~ .ripple {
+  background-color: #03a9f4;
+}
+.checkbox-material-cyan input[type=checkbox]:checked ~ .ripple {
+  background-color: #00bcd4;
+}
+.checkbox-material-teal input[type=checkbox]:checked ~ .ripple {
+  background-color: #009688;
+}
+.checkbox-material-lightgreen input[type=checkbox]:checked ~ .ripple {
+  background-color: #8bc34a;
+}
+.checkbox-material-lime input[type=checkbox]:checked ~ .ripple {
+  background-color: #cddc39;
+}
+.checkbox-material-lightyellow input[type=checkbox]:checked ~ .ripple {
+  background-color: #ffeb3b;
+}
+.checkbox-material-orange input[type=checkbox]:checked ~ .ripple {
+  background-color: #ff9800;
+}
+.checkbox-material-deeporange input[type=checkbox]:checked ~ .ripple {
+  background-color: #ff5722;
+}
+.checkbox-material-grey input[type=checkbox]:checked ~ .ripple {
+  background-color: #9e9e9e;
+}
+.checkbox-material-bluegrey input[type=checkbox]:checked ~ .ripple {
+  background-color: #607d8b;
+}
+.checkbox-material-brown input[type=checkbox]:checked ~ .ripple {
+  background-color: #795548;
+}
+.checkbox-material-lightgrey input[type=checkbox]:checked ~ .ripple {
+  background-color: #ececec;
 }
 .checkbox input[type=checkbox]:checked ~ .check {
   opacity: 1;
   transform: scale(1) rotate(45deg);
 }
+.checkbox input[type=checkbox][disabled] ~ .ripple {
+  background-color: #4d4d4d;
+}
 .form-horizontal .radio {
   margin-bottom: 10px;
 }
@@ -322,8 +579,8 @@ h6,
   top: 2px;
   transition-duration: 0.2s;
 }
-.radio label .bubble {
-  background: rgba(137, 137, 137, 0.3);
+.radio label .ripple {
+  background-color: #4d4d4d;
   left: 0;
   top: -8px;
   height: 34px;
@@ -332,13 +589,15 @@ h6,
   transform: scale(0);
   transition: transform .1s, opacity 0.2s 0.4s;
   z-index: 1;
+  opacity: 0.2;
+  margin: 0;
 }
-.radio label .bubble.animate {
+.radio label .ripple.animate {
   transform: scale(1);
   opacity: 0;
 }
 .radio label .circle {
-  border: 2px solid #5A5F5A;
+  border: 2px solid #4d4d4d;
   height: 15px;
   width: 15px;
   border-radius: 100%;
@@ -347,36 +606,164 @@ h6,
   height: 15px;
   width: 15px;
   border-radius: 100%;
-  background-color: #5a5f5a;
+  background-color: #4d4d4d;
   transform: scale(0);
 }
-.radio.radio-default .check {
-  background-color: #5a5f5a;
+.radio input[type=radio]:checked ~ .check,
+.radio-default input[type=radio]:checked ~ .check {
+  background-color: #4d4d4d;
 }
-.radio.radio-primary .check {
+.radio-primary input[type=radio]:checked ~ .check {
   background-color: #4285f4;
 }
-.radio.radio-success .check {
+.radio-success input[type=radio]:checked ~ .check {
   background-color: #0f9d58;
 }
-.radio.radio-info {
+.radio-info input[type=radio]:checked ~ .check {
   background-color: #3498db;
 }
-.radio.radio-warning .check {
+.radio-warning input[type=radio]:checked ~ .check {
   background-color: #ff5722;
 }
-.radio.radio-danger .check {
-  background-color: #db4437;
+.radio-danger input[type=radio]:checked ~ .check {
+  background-color: #f44336;
+}
+.radio-material-red input[type=radio]:checked ~ .check {
+  background-color: #f44336;
+}
+.radio-material-pink input[type=radio]:checked ~ .check {
+  background-color: #e91e63;
+}
+.radio-material-purple input[type=radio]:checked ~ .check {
+  background-color: #9c27b0;
+}
+.radio-material-deeppurple input[type=radio]:checked ~ .check {
+  background-color: #673ab7;
+}
+.radio-material-indigo input[type=radio]:checked ~ .check {
+  background-color: #3f51b5;
+}
+.radio-material-lightblue input[type=radio]:checked ~ .check {
+  background-color: #03a9f4;
+}
+.radio-material-cyan input[type=radio]:checked ~ .check {
+  background-color: #00bcd4;
+}
+.radio-material-teal input[type=radio]:checked ~ .check {
+  background-color: #009688;
+}
+.radio-material-lightgreen input[type=radio]:checked ~ .check {
+  background-color: #8bc34a;
+}
+.radio-material-lime input[type=radio]:checked ~ .check {
+  background-color: #cddc39;
+}
+.radio-material-lightyellow input[type=radio]:checked ~ .check {
+  background-color: #ffeb3b;
+}
+.radio-material-orange input[type=radio]:checked ~ .check {
+  background-color: #ff9800;
+}
+.radio-material-deeporange input[type=radio]:checked ~ .check {
+  background-color: #ff5722;
+}
+.radio-material-grey input[type=radio]:checked ~ .check {
+  background-color: #9e9e9e;
+}
+.radio-material-bluegrey input[type=radio]:checked ~ .check {
+  background-color: #607d8b;
+}
+.radio-material-brown input[type=radio]:checked ~ .check {
+  background-color: #795548;
+}
+.radio-material-lightgrey input[type=radio]:checked ~ .check {
+  background-color: #ececec;
+}
+.radio input[type=radio]:checked ~ .circle,
+.radio-default input[type=radio]:checked ~ .circle {
+  border-color: #4d4d4d;
+}
+.radio-primary input[type=radio]:checked ~ .circle {
+  border-color: #4285f4;
+}
+.radio-success input[type=radio]:checked ~ .circle {
+  border-color: #0f9d58;
+}
+.radio-info input[type=radio]:checked ~ .circle {
+  border-color: #3498db;
+}
+.radio-warning input[type=radio]:checked ~ .circle {
+  border-color: #ff5722;
+}
+.radio-danger input[type=radio]:checked ~ .circle {
+  border-color: #f44336;
+}
+.radio-material-red input[type=radio]:checked ~ .circle {
+  border-color: #f44336;
+}
+.radio-material-pink input[type=radio]:checked ~ .circle {
+  border-color: #e91e63;
+}
+.radio-material-purple input[type=radio]:checked ~ .circle {
+  border-color: #9c27b0;
+}
+.radio-material-deeppurple input[type=radio]:checked ~ .circle {
+  border-color: #673ab7;
+}
+.radio-material-indigo input[type=radio]:checked ~ .circle {
+  border-color: #3f51b5;
+}
+.radio-material-lightblue input[type=radio]:checked ~ .circle {
+  border-color: #03a9f4;
+}
+.radio-material-cyan input[type=radio]:checked ~ .circle {
+  border-color: #00bcd4;
+}
+.radio-material-teal input[type=radio]:checked ~ .circle {
+  border-color: #009688;
+}
+.radio-material-lightgreen input[type=radio]:checked ~ .circle {
+  border-color: #8bc34a;
+}
+.radio-material-lime input[type=radio]:checked ~ .circle {
+  border-color: #cddc39;
+}
+.radio-material-lightyellow input[type=radio]:checked ~ .circle {
+  border-color: #ffeb3b;
+}
+.radio-material-orange input[type=radio]:checked ~ .circle {
+  border-color: #ff9800;
+}
+.radio-material-deeporange input[type=radio]:checked ~ .circle {
+  border-color: #ff5722;
+}
+.radio-material-grey input[type=radio]:checked ~ .circle {
+  border-color: #9e9e9e;
+}
+.radio-material-bluegrey input[type=radio]:checked ~ .circle {
+  border-color: #607d8b;
+}
+.radio-material-brown input[type=radio]:checked ~ .circle {
+  border-color: #795548;
+}
+.radio-material-lightgrey input[type=radio]:checked ~ .circle {
+  border-color: #ececec;
+}
+.radio input[type=radio][disabled] ~ .check,
+.radio input[type=radio][disabled] ~ .circle {
+  opacity: 0.5;
 }
 .radio input[type=radio] {
   display: none;
 }
 .radio input[type=radio]:checked ~ .check {
-  transform: scale(1);
+  transform: scale(0.55);
 }
-.radio input[type=radio]:checked ~ .circle {
-  transform: scale(1);
-  border: 1px;
+.radio input[type=radio][disabled] ~ .circle {
+  border-color: #4d4d4d;
+}
+.radio input[type=radio][disabled] ~ .check {
+  background-color: #4d4d4d;
 }
 .form-control-wrapper {
   position: relative;
@@ -415,14 +802,14 @@ h6,
   opacity: 1;
 }
 .form-control-wrapper .form-control:focus:invalid ~ .floating-label {
-  color: #db4437;
+  color: #f44336;
 }
 .form-control-wrapper .form-control:focus ~ .material-input:after {
   background-color: #5264ae;
 }
 .form-control-wrapper .form-control:focus:invalid ~ .material-input:before,
 .form-control-wrapper .form-control:focus:invalid ~ .material-input:after {
-  background-color: #db4437;
+  background-color: #f44336;
 }
 .form-control-wrapper .form-control.empty ~ .floating-label {
   opacity: 1;
@@ -468,6 +855,12 @@ h6,
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
 }
+.form-control-wrapper select ~ .material-input:before {
+  bottom: 1px;
+}
+.form-control-wrapper select ~ .material-input:after {
+  display: none;
+}
 .form-group.has-warning .material-input:before,
 .form-group.has-warning input.form-control:focus ~ .material-input:after {
   background: #ff5722;
@@ -478,11 +871,11 @@ h6,
 }
 .form-group.has-error .material-input:before,
 .form-group.has-error input.form-control:focus ~ .material-input:after {
-  background: #db4437;
+  background: #f44336;
 }
 .form-group.has-error .control-label,
 .form-group.has-error input.form-control:focus ~ .floating-label {
-  color: #db4437;
+  color: #f44336;
 }
 .form-group.has-success .material-input:before,
 .form-group.has-success input.form-control:focus ~ .material-input:after {
@@ -500,6 +893,286 @@ h6,
 .form-group.has-info input.form-control:focus ~ .floating-label {
   color: #3498db;
 }
+.form-group .material-input:before,
+.form-group-default .material-input:before {
+  background-color: #4d4d4d;
+}
+.form-group-primary .material-input:before {
+  background-color: #4285f4;
+}
+.form-group-success .material-input:before {
+  background-color: #0f9d58;
+}
+.form-group-info .material-input:before {
+  background-color: #3498db;
+}
+.form-group-warning .material-input:before {
+  background-color: #ff5722;
+}
+.form-group-danger .material-input:before {
+  background-color: #f44336;
+}
+.form-group-material-red .material-input:before {
+  background-color: #f44336;
+}
+.form-group-material-pink .material-input:before {
+  background-color: #e91e63;
+}
+.form-group-material-purple .material-input:before {
+  background-color: #9c27b0;
+}
+.form-group-material-deeppurple .material-input:before {
+  background-color: #673ab7;
+}
+.form-group-material-indigo .material-input:before {
+  background-color: #3f51b5;
+}
+.form-group-material-lightblue .material-input:before {
+  background-color: #03a9f4;
+}
+.form-group-material-cyan .material-input:before {
+  background-color: #00bcd4;
+}
+.form-group-material-teal .material-input:before {
+  background-color: #009688;
+}
+.form-group-material-lightgreen .material-input:before {
+  background-color: #8bc34a;
+}
+.form-group-material-lime .material-input:before {
+  background-color: #cddc39;
+}
+.form-group-material-lightyellow .material-input:before {
+  background-color: #ffeb3b;
+}
+.form-group-material-orange .material-input:before {
+  background-color: #ff9800;
+}
+.form-group-material-deeporange .material-input:before {
+  background-color: #ff5722;
+}
+.form-group-material-grey .material-input:before {
+  background-color: #9e9e9e;
+}
+.form-group-material-bluegrey .material-input:before {
+  background-color: #607d8b;
+}
+.form-group-material-brown .material-input:before {
+  background-color: #795548;
+}
+.form-group-material-lightgrey .material-input:before {
+  background-color: #ececec;
+}
+.form-group input.form-control:focus ~ .material-input:after,
+.form-group-default input.form-control:focus ~ .material-input:after {
+  background-color: #4d4d4d;
+}
+.form-group-primary input.form-control:focus ~ .material-input:after {
+  background-color: #4285f4;
+}
+.form-group-success input.form-control:focus ~ .material-input:after {
+  background-color: #0f9d58;
+}
+.form-group-info input.form-control:focus ~ .material-input:after {
+  background-color: #3498db;
+}
+.form-group-warning input.form-control:focus ~ .material-input:after {
+  background-color: #ff5722;
+}
+.form-group-danger input.form-control:focus ~ .material-input:after {
+  background-color: #f44336;
+}
+.form-group-material-red input.form-control:focus ~ .material-input:after {
+  background-color: #f44336;
+}
+.form-group-material-pink input.form-control:focus ~ .material-input:after {
+  background-color: #e91e63;
+}
+.form-group-material-purple input.form-control:focus ~ .material-input:after {
+  background-color: #9c27b0;
+}
+.form-group-material-deeppurple input.form-control:focus ~ .material-input:after {
+  background-color: #673ab7;
+}
+.form-group-material-indigo input.form-control:focus ~ .material-input:after {
+  background-color: #3f51b5;
+}
+.form-group-material-lightblue input.form-control:focus ~ .material-input:after {
+  background-color: #03a9f4;
+}
+.form-group-material-cyan input.form-control:focus ~ .material-input:after {
+  background-color: #00bcd4;
+}
+.form-group-material-teal input.form-control:focus ~ .material-input:after {
+  background-color: #009688;
+}
+.form-group-material-lightgreen input.form-control:focus ~ .material-input:after {
+  background-color: #8bc34a;
+}
+.form-group-material-lime input.form-control:focus ~ .material-input:after {
+  background-color: #cddc39;
+}
+.form-group-material-lightyellow input.form-control:focus ~ .material-input:after {
+  background-color: #ffeb3b;
+}
+.form-group-material-orange input.form-control:focus ~ .material-input:after {
+  background-color: #ff9800;
+}
+.form-group-material-deeporange input.form-control:focus ~ .material-input:after {
+  background-color: #ff5722;
+}
+.form-group-material-grey input.form-control:focus ~ .material-input:after {
+  background-color: #9e9e9e;
+}
+.form-group-material-bluegrey input.form-control:focus ~ .material-input:after {
+  background-color: #607d8b;
+}
+.form-group-material-brown input.form-control:focus ~ .material-input:after {
+  background-color: #795548;
+}
+.form-group-material-lightgrey input.form-control:focus ~ .material-input:after {
+  background-color: #ececec;
+}
+.form-group .control-label,
+.form-group-default .control-label {
+  color: #4d4d4d;
+}
+.form-group-primary .control-label {
+  color: #4285f4;
+}
+.form-group-success .control-label {
+  color: #0f9d58;
+}
+.form-group-info .control-label {
+  color: #3498db;
+}
+.form-group-warning .control-label {
+  color: #ff5722;
+}
+.form-group-danger .control-label {
+  color: #f44336;
+}
+.form-group-material-red .control-label {
+  color: #f44336;
+}
+.form-group-material-pink .control-label {
+  color: #e91e63;
+}
+.form-group-material-purple .control-label {
+  color: #9c27b0;
+}
+.form-group-material-deeppurple .control-label {
+  color: #673ab7;
+}
+.form-group-material-indigo .control-label {
+  color: #3f51b5;
+}
+.form-group-material-lightblue .control-label {
+  color: #03a9f4;
+}
+.form-group-material-cyan .control-label {
+  color: #00bcd4;
+}
+.form-group-material-teal .control-label {
+  color: #009688;
+}
+.form-group-material-lightgreen .control-label {
+  color: #8bc34a;
+}
+.form-group-material-lime .control-label {
+  color: #cddc39;
+}
+.form-group-material-lightyellow .control-label {
+  color: #ffeb3b;
+}
+.form-group-material-orange .control-label {
+  color: #ff9800;
+}
+.form-group-material-deeporange .control-label {
+  color: #ff5722;
+}
+.form-group-material-grey .control-label {
+  color: #9e9e9e;
+}
+.form-group-material-bluegrey .control-label {
+  color: #607d8b;
+}
+.form-group-material-brown .control-label {
+  color: #795548;
+}
+.form-group-material-lightgrey .control-label {
+  color: #ececec;
+}
+.form-group input.form-control:focus ~ .floating-label,
+.form-group-default input.form-control:focus ~ .floating-label {
+  color: #4d4d4d;
+}
+.form-group-primary input.form-control:focus ~ .floating-label {
+  color: #4285f4;
+}
+.form-group-success input.form-control:focus ~ .floating-label {
+  color: #0f9d58;
+}
+.form-group-info input.form-control:focus ~ .floating-label {
+  color: #3498db;
+}
+.form-group-warning input.form-control:focus ~ .floating-label {
+  color: #ff5722;
+}
+.form-group-danger input.form-control:focus ~ .floating-label {
+  color: #f44336;
+}
+.form-group-material-red input.form-control:focus ~ .floating-label {
+  color: #f44336;
+}
+.form-group-material-pink input.form-control:focus ~ .floating-label {
+  color: #e91e63;
+}
+.form-group-material-purple input.form-control:focus ~ .floating-label {
+  color: #9c27b0;
+}
+.form-group-material-deeppurple input.form-control:focus ~ .floating-label {
+  color: #673ab7;
+}
+.form-group-material-indigo input.form-control:focus ~ .floating-label {
+  color: #3f51b5;
+}
+.form-group-material-lightblue input.form-control:focus ~ .floating-label {
+  color: #03a9f4;
+}
+.form-group-material-cyan input.form-control:focus ~ .floating-label {
+  color: #00bcd4;
+}
+.form-group-material-teal input.form-control:focus ~ .floating-label {
+  color: #009688;
+}
+.form-group-material-lightgreen input.form-control:focus ~ .floating-label {
+  color: #8bc34a;
+}
+.form-group-material-lime input.form-control:focus ~ .floating-label {
+  color: #cddc39;
+}
+.form-group-material-lightyellow input.form-control:focus ~ .floating-label {
+  color: #ffeb3b;
+}
+.form-group-material-orange input.form-control:focus ~ .floating-label {
+  color: #ff9800;
+}
+.form-group-material-deeporange input.form-control:focus ~ .floating-label {
+  color: #ff5722;
+}
+.form-group-material-grey input.form-control:focus ~ .floating-label {
+  color: #9e9e9e;
+}
+.form-group-material-bluegrey input.form-control:focus ~ .floating-label {
+  color: #607d8b;
+}
+.form-group-material-brown input.form-control:focus ~ .floating-label {
+  color: #795548;
+}
+.form-group-material-lightgrey input.form-control:focus ~ .floating-label {
+  color: #ececec;
+}
 .input-group .form-control-wrapper {
   margin-right: 5px;
   margin-left: 5px;
@@ -524,14 +1197,21 @@ select.form-control:focus {
   box-shadow: none;
   border-color: #757575;
 }
+legend {
+  border-bottom: 0;
+}
 .container .well,
-.container .jumbotron {
+.container-fluid .well,
+.container .jumbotron,
+.container-fluid .jumbotron {
   background-color: #fff;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
   border-radius: 2px;
 }
 .container .well p,
-.container .jumbotron p {
+.container-fluid .well p,
+.container .jumbotron p,
+.container-fluid .jumbotron p {
   font-weight: 300;
 }
 .modal-content {
@@ -613,7 +1293,7 @@ select.form-control:focus {
 }
 .navbar .navbar-collapse,
 .navbar .navbar-form {
-  border-color: #206ff2;
+  border-color: rgba(0, 0, 0, 0.1);
 }
 .navbar .navbar-nav > .open > a,
 .navbar .navbar-nav > .open > a:hover,
@@ -689,47 +1369,78 @@ fieldset[disabled] .navbar .btn-link:focus {
 .navbar .navbar-form :-ms-input-placeholder {
   color: #ffffff;
 }
-.navbar-primary {
+.navbar,
+.navbar-default {
   background-color: #4285f4;
 }
-.navbar-primary .navbar-collapse,
-.navbar-primary .navbar-form {
-  border-color: #206ff2;
+.navbar-primary {
+  background-color: #4285f4;
 }
 .navbar-success {
   background-color: #0f9d58;
 }
-.navbar-success .navbar-collapse,
-.navbar-success .navbar-form {
-  border-color: #0c7c46;
-}
 .navbar-info {
   background-color: #3498db;
 }
-.navbar-info .navbar-collapse,
-.navbar-info .navbar-form {
-  border-color: #2386c8;
-}
 .navbar-warning {
   background-color: #ff5722;
 }
-.navbar-warning .navbar-collapse,
-.navbar-warning .navbar-form {
-  border-color: #fd3d00;
-}
 .navbar-danger {
-  background-color: #db4437;
+  background-color: #f44336;
 }
-.navbar-danger .navbar-collapse,
-.navbar-danger .navbar-form {
-  border-color: #ca3124;
+.navbar-material-red {
+  background-color: #f44336;
+}
+.navbar-material-pink {
+  background-color: #e91e63;
+}
+.navbar-material-purple {
+  background-color: #9c27b0;
+}
+.navbar-material-deeppurple {
+  background-color: #673ab7;
+}
+.navbar-material-indigo {
+  background-color: #3f51b5;
+}
+.navbar-material-lightblue {
+  background-color: #03a9f4;
+}
+.navbar-material-cyan {
+  background-color: #00bcd4;
+}
+.navbar-material-teal {
+  background-color: #009688;
+}
+.navbar-material-lightgreen {
+  background-color: #8bc34a;
+}
+.navbar-material-lime {
+  background-color: #cddc39;
+}
+.navbar-material-lightyellow {
+  background-color: #ffeb3b;
+}
+.navbar-material-orange {
+  background-color: #ff9800;
+}
+.navbar-material-deeporange {
+  background-color: #ff5722;
+}
+.navbar-material-grey {
+  background-color: #9e9e9e;
+}
+.navbar-material-bluegrey {
+  background-color: #607d8b;
+}
+.navbar-material-brown {
+  background-color: #795548;
+}
+.navbar-material-lightgrey {
+  background-color: #ececec;
 }
 .navbar-inverse {
-  background-color: #5264ae;
-}
-.navbar-inverse .navbar-collapse,
-.navbar-inverse .navbar-form {
-  border-color: #465696;
+  background-color: #3f51b5;
 }
 .dropdown-menu {
   border: 0;
@@ -745,41 +1456,93 @@ fieldset[disabled] .navbar .btn-link:focus {
 .dropdown-menu li a:hover {
   background-color: transparent;
 }
-.alert,
-.alert-success,
-.alert-info,
-.alert-warning,
-.alert-danger {
+.alert {
   border: 0px;
   border-radius: 0;
 }
 .alert a,
-.alert-success a,
-.alert-info a,
-.alert-warning a,
-.alert-danger a,
-.alert .alert-link,
-.alert-success .alert-link,
-.alert-info .alert-link,
-.alert-warning .alert-link,
-.alert-danger .alert-link {
+.alert .alert-link {
   color: #FFFFFF;
 }
+.alert,
+.alert-default {
+  background-color: #ffffff;
+}
+.alert-primary {
+  background-color: #4285f4;
+}
 .alert-success {
-  color: #FFFFFF;
   background-color: #0f9d58;
 }
 .alert-info {
-  color: #FFFFFF;
   background-color: #3498db;
 }
 .alert-warning {
-  color: #FFFFFF;
   background-color: #ff5722;
 }
 .alert-danger {
+  background-color: #f44336;
+}
+.alert-material-red {
+  background-color: #f44336;
+}
+.alert-material-pink {
+  background-color: #e91e63;
+}
+.alert-material-purple {
+  background-color: #9c27b0;
+}
+.alert-material-deeppurple {
+  background-color: #673ab7;
+}
+.alert-material-indigo {
+  background-color: #3f51b5;
+}
+.alert-material-lightblue {
+  background-color: #03a9f4;
+}
+.alert-material-cyan {
+  background-color: #00bcd4;
+}
+.alert-material-teal {
+  background-color: #009688;
+}
+.alert-material-lightgreen {
+  background-color: #8bc34a;
+}
+.alert-material-lime {
+  background-color: #cddc39;
+}
+.alert-material-lightyellow {
+  background-color: #ffeb3b;
+}
+.alert-material-orange {
+  background-color: #ff9800;
+}
+.alert-material-deeporange {
+  background-color: #ff5722;
+}
+.alert-material-grey {
+  background-color: #9e9e9e;
+}
+.alert-material-bluegrey {
+  background-color: #607d8b;
+}
+.alert-material-brown {
+  background-color: #795548;
+}
+.alert-material-lightgrey {
+  background-color: #ececec;
+}
+.alert-info,
+.alert-danger,
+.alert-warning,
+.alert-success {
   color: #FFFFFF;
-  background-color: #db4437;
+}
+.alert-default a,
+.alert-default .alert-link {
+  color: #000000;
 }
 .progress {
   height: 4px;
@@ -791,6 +1554,15 @@ fieldset[disabled] .navbar .btn-link:focus {
   box-shadow: none;
 }
 .progress .progress-bar,
+.progress .progress-bar-default {
+  background-color: #4285f4;
+}
+.progress .progress-bar-primary {
+  background-color: #4285f4;
+}
+.progress .progress-bar-success {
+  background-color: #0f9d58;
+}
 .progress .progress-bar-info {
   background-color: #3498db;
 }
@@ -798,10 +1570,58 @@ fieldset[disabled] .navbar .btn-link:focus {
   background-color: #ff5722;
 }
 .progress .progress-bar-danger {
-  background-color: #db4437;
+  background-color: #f44336;
 }
-.progress .progress-bar-success {
-  background-color: #0f9d58;
+.progress .progress-bar-material-red {
+  background-color: #f44336;
+}
+.progress .progress-bar-material-pink {
+  background-color: #e91e63;
+}
+.progress .progress-bar-material-purple {
+  background-color: #9c27b0;
+}
+.progress .progress-bar-material-deeppurple {
+  background-color: #673ab7;
+}
+.progress .progress-bar-material-indigo {
+  background-color: #3f51b5;
+}
+.progress .progress-bar-material-lightblue {
+  background-color: #03a9f4;
+}
+.progress .progress-bar-material-cyan {
+  background-color: #00bcd4;
+}
+.progress .progress-bar-material-teal {
+  background-color: #009688;
+}
+.progress .progress-bar-material-lightgreen {
+  background-color: #8bc34a;
+}
+.progress .progress-bar-material-lime {
+  background-color: #cddc39;
+}
+.progress .progress-bar-material-lightyellow {
+  background-color: #ffeb3b;
+}
+.progress .progress-bar-material-orange {
+  background-color: #ff9800;
+}
+.progress .progress-bar-material-deeporange {
+  background-color: #ff5722;
+}
+.progress .progress-bar-material-grey {
+  background-color: #9e9e9e;
+}
+.progress .progress-bar-material-bluegrey {
+  background-color: #607d8b;
+}
+.progress .progress-bar-material-brown {
+  background-color: #795548;
+}
+.progress .progress-bar-material-lightgrey {
+  background-color: #ececec;
 }
 .text-warning {
   color: #ff5722;
@@ -810,7 +1630,7 @@ fieldset[disabled] .navbar .btn-link:focus {
   color: #4285f4;
 }
 .text-danger {
-  color: #db4437;
+  color: #f44336;
 }
 .text-success {
   color: #0f9d58;
@@ -824,6 +1644,7 @@ fieldset[disabled] .navbar .btn-link:focus {
 .nav-tabs > li > a {
   color: #FFFFFF;
   border: 0;
+  margin: 0;
 }
 .nav-tabs > li > a:hover {
   background: transparent;
diff --git a/material.js b/material.js
index 19fa6eac..57b812d1 100644
--- a/material.js
+++ b/material.js
@@ -6,10 +6,10 @@ $(function (){
     $(withRipple).append("<div class=ripple-wrapper><div class=ripple></div></div>");
 
     // Add fake-checkbox to material checkboxes
-    $(".checkbox label input").after("<span class=\"bubble\"></span><span class=\"check\"></span><span class=\"box\"></span>");
+    $(".checkbox label input").after("<span class=ripple></span><span class=check></span><span class=box></span>");
 
     // Add fake-radio to material radios
-    $(".radio label input").after("<span class=\"bubble\"></span><span class=\"circle\"></span><span class=\"check\"></span>");
+    $(".radio label input").after("<span class=ripple></span><span class=circle></span><span class=check></span>");
 
     // Add elements for material inputs
     $("input.form-control, textarea.form-control, select.form-control").each( function() {
@@ -74,7 +74,7 @@ $(function (){
             rippleOut($ripple, $rippleWrapper);
         }
     })
-    .on("mouseup", withRipple,  function() {
+    .on("mouseup mouseleave", withRipple,  function() {
         var $self           = $(this),
             $rippleWrapper  = $self.find(".ripple-wrapper"),
             $ripple         = $self.find(".ripple");
@@ -87,23 +87,23 @@ $(function (){
 
     var rippleOut = function($ripple, $rippleWrapper) {
         $ripple.attr("class", "ripple ripple-on ripple-out");
-        $rippleWrapper.fadeOut(200, function() {
+        $rippleWrapper.fadeOut(800, function() {
             $rippleWrapper.attr("class", "ripple-wrapper").attr("style", "");
             $ripple.attr("class", "ripple").attr("style", "");
         });
     };
 
-    // Material inputs engine (bubble effect)
+    // Material inputs engine (ripple effect)
     $(document).on("click", ".checkbox label, .radio label", function() {
-        var $bubble     = $(this).find(".bubble"),
+        var $ripple     = $(this).find(".ripple"),
             timestamp   = "t" + new Date().getTime();
-        $bubble.attr("class", "bubble");
-        $bubble.addClass("animate").addClass(timestamp);
+        $ripple.attr("class", "ripple");
+        $ripple.addClass("animate").addClass(timestamp);
         setTimeout(function() {
-            if ($bubble.hasClass(timestamp)) {
-                $bubble.removeClass("animate").removeClass(timestamp);
+            if ($ripple.hasClass(timestamp)) {
+                $ripple.removeClass("animate").removeClass(timestamp);
             }
-        }, 200);
+        }, 800);
     });
 
     $(document).on("change", ".form-control", function() {
diff --git a/material.less b/material.less
index d0404c4a..9cc26ac1 100644
--- a/material.less
+++ b/material.less
@@ -5,11 +5,18 @@
 @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);
 
 @import "variables.less";
+@import "mixins.less";
 @import "animations.less";
 @import "shadows.less";
 
 body {
     background-color: #EEEEEE;
+    &.inverse {
+        background: #333333;
+        &, .form-control {
+            color: @darkbg-text;
+        }
+    }
 }
 
 body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
@@ -31,8 +38,11 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 // Text inputs
 @import "inputs.less";
 
+legend {
+    border-bottom: 0;
+}
 
-.container {
+.container, .container-fluid {
     .well, .jumbotron {
         background-color: #fff;
         .shadow-z-2();
diff --git a/mixins.less b/mixins.less
new file mode 100644
index 00000000..73ccffd0
--- /dev/null
+++ b/mixins.less
@@ -0,0 +1,78 @@
+// main: material.less
+
+// usage: .variations(~" .check", color, transparent);
+.variations(@extra, @property, @default) {
+    // Bootstrap shades
+    &@{extra}, &-default@{extra} {
+        @{property}: @default;
+    }
+    &-primary@{extra} {
+        @{property}: @primary;
+    }
+    &-success@{extra} {
+        @{property}: @success;
+    }
+    &-info@{extra} {
+        @{property}: @info;
+    }
+    &-warning@{extra} {
+        @{property}: @warning;
+    }
+    &-danger@{extra} {
+        @{property}: @danger;
+    }
+    // Material shades
+    &-material-red@{extra} {
+        @{property}: @red;
+    }
+    &-material-pink@{extra} {
+        @{property}: @pink;
+    }
+    &-material-purple@{extra} {
+        @{property}: @purple;
+    }
+    &-material-deeppurple@{extra} {
+        @{property}: @deeppurple;
+    }
+    &-material-indigo@{extra} {
+        @{property}: @indigo;
+    }
+    &-material-lightblue@{extra} {
+        @{property}: @lightblue;
+    }
+    &-material-cyan@{extra} {
+        @{property}: @cyan;
+    }
+    &-material-teal@{extra} {
+        @{property}: @teal;
+    }
+    &-material-lightgreen@{extra} {
+        @{property}: @lightgreen;
+    }
+    &-material-lime@{extra} {
+        @{property}: @lime;
+    }
+    &-material-lightyellow@{extra} {
+        @{property}: @lightyellow;
+    }
+    &-material-orange@{extra} {
+        @{property}: @orange;
+    }
+    &-material-deeporange@{extra} {
+        @{property}: @deeporange;
+    }
+    &-material-grey@{extra} {
+        @{property}: @grey;
+    }
+    &-material-bluegrey@{extra} {
+        @{property}: @bluegrey;
+    }
+    &-material-brown@{extra} {
+        @{property}: @brown;
+    }
+    &-material-lightgrey@{extra} {
+        @{property}: @lightgrey;
+    }
+}
+
+@all-variations: ~"-default, -primary, -info, -success, -warning, -danger";
diff --git a/navbar.less b/navbar.less
index 99c011e6..5ba81191 100644
--- a/navbar.less
+++ b/navbar.less
@@ -65,7 +65,7 @@
 
     .navbar-collapse,
     .navbar-form {
-        border-color: darken(@navbar-default-bg, 7%);
+        border-color: rgba(0,0,0,0.1);
     }
 
     // Dropdowns
@@ -154,27 +154,9 @@
         ::-moz-placeholder { color: @navbar-border; };
         :-ms-input-placeholder { color: @navbar-border; };
     }
-}
 
-.navbar {
-    &-primary {
-        background-color: @navbar-default-bg;
-        .navbar-collapse, .navbar-form { border-color: darken(@navbar-default-bg, 7%); }
-    }
-    &-success {
-        background-color: @navbar-success-bg;
-        .navbar-collapse, .navbar-form { border-color: darken(@navbar-success-bg, 7%); }
-    }
-    &-info { background-color: @navbar-info-bg;
-        .navbar-collapse, .navbar-form { border-color: darken(@navbar-info-bg, 7%); }
-    }
-    &-warning { background-color: @navbar-warning-bg;
-        .navbar-collapse, .navbar-form { border-color: darken(@navbar-warning-bg, 7%); }
-    }
-    &-danger { background-color: @navbar-danger-bg;
-        .navbar-collapse, .navbar-form { border-color: darken(@navbar-danger-bg, 7%); }
-    }
-    &-inverse { background-color: @navbar-inverse-bg;
-        .navbar-collapse, .navbar-form { border-color: darken(@navbar-inverse-bg, 7%); }
+    .variations(~"", background-color, @primary);
+    &-inverse {
+        background-color: @indigo;
     }
 }
diff --git a/progress.less b/progress.less
index f6a87c12..d2f9e1c2 100644
--- a/progress.less
+++ b/progress.less
@@ -7,17 +7,6 @@
     background: #c8c8c8;
     .progress-bar {
         box-shadow: none;
-        &, &-info {
-            background-color: @progress-info;
-        }
-        &-warning {
-            background-color: @progress-warning;
-        }
-        &-danger {
-            background-color: @progress-danger;
-        }
-        &-success {
-            background-color: @progress-success;
-        }
+        .variations(~"", background-color, @primary);
     }
 }
diff --git a/radios.less b/radios.less
index a0fbaab1..bc8344ef 100644
--- a/radios.less
+++ b/radios.less
@@ -15,8 +15,8 @@
             top: 2px;
             transition-duration: 0.2s;
         }
-        .bubble {
-            background: @input-unchecked;
+        .ripple {
+            background-color: @lightbg-text;
             left: 0;
             top: -8px;
             height: 34px;
@@ -25,13 +25,15 @@
             transform: scale(0);
             transition: transform .1s, opacity 0.2s 0.4s;
             z-index: 1;
+            opacity: 0.2;
+            margin: 0;
             &.animate {
                 transform: scale(1);
                 opacity: 0;
             }
         }
         .circle {
-            border: 2px solid #5A5F5A;
+            border: 2px solid @lightbg-text;
             height: 15px;
             width: 15px;
             border-radius: 100%;
@@ -44,21 +46,23 @@
             transform: scale(0);
         }
     }
-    &.radio {
-        &-default .check { background-color: @radio-default; }
-        &-primary .check { background-color: @radio-primary; }
-        &-success .check { background-color: @radio-success; }
-        &-info { background-color: @radio-info; }
-        &-warning .check { background-color: @radio-warning; }
-        &-danger .check { background-color: @radio-danger; }
+    .variations(~" input[type=radio]:checked ~ .check", background-color, @radio-default);
+    .variations(~" input[type=radio]:checked ~ .circle", border-color, @radio-default);
+
+    input[type=radio][disabled] ~ .check,
+    input[type=radio][disabled] ~ .circle {
+        opacity: 0.5;
     }
+
     input[type=radio] { display: none; }
     input[type=radio]:checked ~ .check {
-        transform: scale(1);
+        transform: scale(0.55);
     }
-    input[type=radio]:checked ~ .circle {
-        transform: scale(1);
-        border: 1px;
+    input[type=radio][disabled] ~ .circle {
+        border-color: @lightbg-text;
+    }
+    input[type=radio][disabled] ~ .check {
+        background-color: @lightbg-text;
     }
 
 }
diff --git a/ripple.less b/ripple.less
index 623afb8f..77a9a909 100644
--- a/ripple.less
+++ b/ripple.less
@@ -34,7 +34,7 @@
   opacity: 1;
 }
 .ripple.ripple-out {
-    -webkit-transition: opacity 0.2s linear 0s !important;
-    transition: opacity 0.2s linear 0s !important;
+    -webkit-transition: opacity 1s linear 0s !important;
+    transition: opacity 0.8s linear 0s !important;
     opacity: 0;
 }
diff --git a/screenshots/palette.jpg b/screenshots/palette.jpg
new file mode 100644
index 00000000..9b5c01f3
Binary files /dev/null and b/screenshots/palette.jpg differ
diff --git a/tabs.less b/tabs.less
index b6717602..bfe20965 100644
--- a/tabs.less
+++ b/tabs.less
@@ -6,6 +6,7 @@
         > a {
             color: #FFFFFF;
             border: 0;
+            margin: 0;
             &:hover {
                 background: transparent;
                 border: 0;
diff --git a/variables.less b/variables.less
index 3cca9a4e..d438e676 100644
--- a/variables.less
+++ b/variables.less
@@ -1,65 +1,101 @@
 // main: material.less
 
+
+
+// Material colors palette
+@red: #F44336;
+@pink: #E91E63;
+@purple: #9C27B0;
+@deeppurple: #673AB7;
+@indigo: #3F51B5;
+@lightblue: #03A9F4;
+@cyan: #00BCD4;
+@teal: #009688;
+@lightgreen: #8BC34A;
+@lime: #CDDC39;
+@lightyellow: #FFEB3B;
+@orange: #FF9800;
+@deeporange: #FF5722;
+@grey: #9E9E9E;
+@bluegrey: #607D8B;
+@brown: #795548;
+@lightgrey: #ECECEC;
+
+// Bootstrap shades
+@primary: #4285F4;
+@success: #0F9D58;
+@info: #3498DB;
+@warning: @deeporange;
+@danger: @red;
+
+// Typography elements for Material
+@darkbg-text: #FFFFFF;
+@lightbg-text: #4D4D4D;
+@icon-color: rgba(0,0,0,0.5);
+
+
+// Bootstrap variables
 @btn-default: transparent;
-@btn-default-text: #000000;
+@btn-default-text: @lightbg-text;
 
-@btn-primary: #4285F4;
-@btn-primary-text: #FFFFFF;
+@btn-primary: @primary;
+@btn-primary-text: @darkbg-text;
 
-@btn-success: #0F9D58;
-@btn-success-text: #FFFFFF;
+@btn-success: @success;
+@btn-success-text: @darkbg-text;
 
-@btn-info: #3498DB;
-@btn-info-text: #FFFFFF;
+@btn-info: @info;
+@btn-info-text: @darkbg-text;
 
-@btn-warning: #FF5722;
-@btn-warning-text: #FFFFFF;
+@btn-warning: @warning;
+@btn-warning-text: @darkbg-text;
 
-@btn-danger: #DB4437;
-@btn-danger-text: #FFFFFF;
+@btn-danger: @danger;
+@btn-danger-text: @darkbg-text;
 
 @input-unchecked: rgba(137, 137, 137, 0.3);
 @input-checked: rgba(15, 157, 88, 0.3);
 
-@radio-default: #5A5F5A;
-@radio-primary: @btn-primary;
-@radio-success: @btn-success;
-@radio-info:    @btn-info;
-@radio-warning: @btn-warning;
-@radio-danger:  @btn-danger;
+@radio-default: @lightbg-text;
+@radio-primary: @primary;
+@radio-success: @success;
+@radio-info:    @info;
+@radio-warning: @warning;
+@radio-danger:  @danger;
 
-@input-danger: @btn-danger;
+@input-danger: @danger;
 @input-default: #5264AE;
-@input-warning: @btn-warning;
-@input-success: @btn-success;
-@input-info:    @btn-info;
+@input-warning: @warning;
+@input-success: @success;
+@input-info:    @info;
 
-@navbar-danger-bg: @btn-danger;
+@navbar-danger-bg: @danger;
 @navbar-inverse-bg: #5264AE;
-@navbar-warning-bg: @btn-warning;
-@navbar-success-bg: @btn-success;
-@navbar-info-bg:    @btn-info;
-@navbar-default-bg: @btn-primary;
-@navbar-color: #FFFFFF;
-@navbar-link-color: #FFFFFF;
-@navbar-link-hover-color: #FFFFFF;
+@navbar-warning-bg: @warning;
+@navbar-success-bg: @success;
+@navbar-info-bg:    @info;
+@navbar-default-bg: @primary;
+@navbar-color: @darkbg-text;
+@navbar-link-color: @darkbg-text;
+@navbar-link-hover-color: @darkbg-text;
 @navbar-link-hover-bg: transparent;
-@navbar-link-active-color: #FFFFFF;
+@navbar-link-active-color: @darkbg-text;
 @navbar-link-active-bg: rgba(0,0,0,0.05);
 @navbar-link-disabled-color: #E5E5E5;
 @navbar-link-disabled-bg: transparent;
-@navbar-brand-color: #FFFFFF;
-@navbar-toggle-border-color: #FFFFFF;
+@navbar-brand-color: @darkbg-text;
+@navbar-toggle-border-color: @darkbg-text;
 @navbar-toggle-hover-bg: transparent;
-@navbar-toggle-icon-bar-bg: #FFFFFF;
-@navbar-border: #FFFFFF;
+@navbar-toggle-icon-bar-bg: @darkbg-text;
+@navbar-border: @darkbg-text;
 
-@alert-success: @btn-success;
-@alert-info: @btn-info;
-@alert-warning: @btn-warning;
-@alert-danger: @btn-danger;
+@alert-success: @success;
+@alert-info: @info;
+@alert-warning: @warning;
+@alert-danger: @danger;
+
+@progress-success: @success;
+@progress-info: @info;
+@progress-warning: @warning;
+@progress-danger: @danger;
 
-@progress-success: @btn-success;
-@progress-info: @btn-info;
-@progress-warning: @btn-warning;
-@progress-danger: @btn-danger;