diff --git a/node_modules/mdl-ext/src/color-themes/_color-themes.scss b/node_modules/mdl-ext/src/color-themes/_color-themes.scss
new file mode 100644
index 0000000..6944941
--- /dev/null
+++ b/node_modules/mdl-ext/src/color-themes/_color-themes.scss
@@ -0,0 +1,57 @@
+/* -------------------------------------------------------------
+   Palette samples. Not part of build
+----------------------------------------------------------------
+
+$mdlext-light-color-primary:          #9E9E9E !default;
+$mdlext-light-color-primary-dark:     #616161 !default;
+$mdlext-light-color-primary-light:    #9E9E9E !default;  // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-light-color-primary-contrast: #212121 !default;  // text color on primary/primary dark background
+$mdlext-light-color-accent:           #E040FB !default;
+$mdlext-light-color-accent-light:     #E040FB !default;  // Fallback color. Set to color-accent if fallback is not needed
+$mdlext-light-color-accent-contrast:  #FAFAFA !default;
+
+$mdlext-light-color-primary:          #F5F5F5 !default;
+$mdlext-light-color-primary-dark:     #E0E0E0 !default;
+$mdlext-light-color-primary-light:    #8BC34A !default;  // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-light-color-primary-contrast: #000000 !default;  // text color on primary/primary dark background
+$mdlext-light-color-accent:           #FFC107 !default;
+$mdlext-light-color-accent-light:     #FFC107 !default;  // Fallback color. Set to color-accent if fallback is not needed
+$mdlext-light-color-accent-contrast:  #FFFFFF !default;
+
+
+$mdlext-light-color-primary:          #673AB7 !default;
+$mdlext-light-color-primary-dark:     #512DA8 !default;
+$mdlext-light-color-primary-light:    #673AB7 !default;   // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-light-color-primary-contrast: #D1C4E9 !default;   // text color on primary/primary dark background
+$mdlext-light-color-accent:           #4CAF50 !default;
+$mdlext-light-color-accent-light:     #4CAF50 !default;   // Fallback color. Set to color-accent if fallback is not needed
+$mdlext-light-color-accent-contrast:  #FFFFFF !default;
+
+
+$mdlext-light-color-primary:          #4CAF50 !default;
+$mdlext-light-color-primary-dark:     #388E3C !default;
+$mdlext-light-color-primary-light:    #4CAF50 !default;  // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-light-color-primary-contrast: #C8E6C9 !default;  // text color on primary/primary dark background
+$mdlext-light-color-accent:           #FF5252 !default;
+$mdlext-light-color-accent-light:     #FF5252 !default;  // Fallback color. Set to color-accent if fallback is not needed
+$mdlext-light-color-accent-contrast:  #FFFFFF !default;
+
+
+$mdlext-light-color-primary:          #4CAF50 !default;
+$mdlext-light-color-primary-dark:     #388E3C !default;
+$mdlext-light-color-primary-light:    #4CAF50 !default;  // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-light-color-primary-contrast: #C8E6C9 !default;  // text color on primary/primary dark background
+$mdlext-light-color-accent:           #03A9F4 !default;
+$mdlext-light-color-accent-light:     #03A9F4 !default;  // Fallback color. Set to color-accent if fallback is not needed
+$mdlext-light-color-accent-contrast:  #FFFFFF !default;
+
+
+$mdlext-dark-color-primary:           #212121 !default;
+$mdlext-dark-color-primary-dark:      #000000 !default;
+$mdlext-dark-color-primary-light:     #607D8B !default;  // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-dark-color-primary-contrast:  #FFFFFF !default;  // text color on primary/primary dark background
+$mdlext-dark-color-accent:            #FF5722 !default;
+$mdlext-dark-color-accent-light:      #FF5722 !default;  // Fallback color. Set to color-accent if fallback is not needed
+$mdlext-dark-color-accent-contrast:   #FFFFFF !default;
+
+*/
diff --git a/node_modules/mdl-ext/src/color-themes/_dark-color-theme.scss b/node_modules/mdl-ext/src/color-themes/_dark-color-theme.scss
new file mode 100644
index 0000000..954e19c
--- /dev/null
+++ b/node_modules/mdl-ext/src/color-themes/_dark-color-theme.scss
@@ -0,0 +1,1132 @@
+@import "color-themes";
+
+.mdlext-dark-color-theme {
+  background-color: $mdlext-dark-content-background-color;
+  color: $mdlext-dark-text-color-primary;
+  a {
+    outline-color: inherit;
+  }
+}
+
+// mdl/src/palette/_palette.scss
+.mdlext-dark-color-theme {
+
+  .mdl-color--primary {
+    background-color: $mdlext-dark-color-primary !important;
+  }
+
+  .mdl-color--primary-contrast {
+    background-color: $mdlext-dark-color-primary-contrast !important;
+  }
+
+  .mdl-color--primary-dark {
+    background-color: $mdlext-dark-color-primary-dark !important;
+  }
+
+  .mdl-color--accent {
+    background-color: $mdlext-dark-color-accent !important;
+  }
+
+  .mdl-color--accent-contrast {
+    background-color: $mdlext-dark-color-accent-contrast !important;
+  }
+
+  .mdl-color-text--primary {
+    color: $mdlext-dark-color-primary !important;
+  }
+
+  .mdl-color-text--primary-contrast {
+    color: $mdlext-dark-color-primary-contrast !important;
+  }
+
+  .mdl-color-text--primary-dark {
+    color: $mdlext-dark-color-primary-dark !important;
+  }
+
+  .mdl-color-text--accent {
+    color: $mdlext-dark-color-accent !important;
+  }
+
+  .mdl-color-text--accent-contrast {
+    color: $mdlext-dark-color-accent-contrast !important;
+  }
+
+}
+
+// mdl/src/typography/_typography.scss
+.mdlext-dark-color-theme {
+  a {
+    color: $mdlext-dark-text-link-color;
+  }
+}
+
+
+// mdl/src/badge/_badge.scss
+// ---------------------------
+.mdlext-dark-color-theme {
+  .mdl-badge {
+
+    &[data-badge]::after {
+      background: $mdlext-dark-badge-background;
+      color: $mdlext-dark-badge-color;
+    }
+
+    &.mdl-badge--no-background {
+      &[data-badge]::after {
+        color: $mdlext-dark-badge-color-inverse;
+        background: $mdlext-dark-badge-background-inverse;
+      }
+    }
+  }
+}
+
+
+// mdl/src/button/_button.scss
+// ---------------------------
+.mdlext-dark-color-theme {
+
+  .mdl-button {
+    background: transparent;
+    color: $mdlext-dark-button-secondary-color;
+
+    &:hover {
+      background-color: $mdlext-dark-button-hover-color;
+    }
+
+    &:focus:not(:active) {
+      background-color: $mdlext-dark-button-focus-color;
+    }
+
+    &:active {
+      background-color: $mdlext-dark-button-active-color;
+    }
+
+    &.mdl-button--colored {
+      color: $mdlext-dark-button-primary-color-alt;
+
+      &:focus:not(:active) {
+        background-color: $mdlext-dark-button-focus-color-alt;
+      }
+    }
+  }
+
+  // Raised buttons
+  .mdl-button--raised {
+    background: $mdlext-dark-button-primary-color;
+
+    &:active {
+      background-color: $mdlext-dark-button-active-color;
+    }
+
+    &:focus:not(:active) {
+      background-color: $mdlext-dark-button-active-color;
+    }
+
+    &.mdl-button--colored {
+      background: $mdlext-dark-button-primary-color-alt;
+      color: $mdlext-dark-button-secondary-color-alt;
+
+      &:hover {
+        background-color: $mdlext-dark-button-hover-color-alt;
+      }
+
+      &:active {
+        background-color: $mdlext-dark-button-active-color-alt;
+      }
+
+      &:focus:not(:active) {
+        background-color: $mdlext-dark-button-active-color-alt;
+      }
+
+      & .mdl-ripple {
+        background: $mdlext-dark-button-ripple-color-alt;
+      }
+    }
+  }
+
+
+  // FABs
+  .mdl-button--fab {
+    background: $mdlext-dark-button-primary-color;
+
+    &:active {
+      background-color: $mdlext-dark-button-active-color;
+    }
+
+    &:focus:not(:active) {
+      background-color: $mdlext-dark-button-active-color;
+    }
+
+    &.mdl-button--colored {
+      background: $mdlext-dark-button-fab-color-alt;
+      color: $mdlext-dark-button-fab-text-color-alt;
+
+      &:hover {
+        background-color: $mdlext-dark-button-fab-hover-color-alt;
+      }
+
+      &:focus:not(:active) {
+        background-color: $mdlext-dark-button-fab-active-color-alt;
+      }
+
+      &:active {
+        background-color: $mdlext-dark-button-fab-active-color-alt;
+      }
+
+      & .mdl-ripple {
+        background: $mdlext-dark-button-fab-ripple-color-alt;
+      }
+    }
+  }
+
+
+  // Icon buttons
+  .mdl-button--icon {
+    color: inherit;
+  }
+
+  // Colorized buttons
+
+  .mdl-button--primary.mdl-button--primary {
+    color: $mdlext-dark-button-primary-color-alt;
+
+    & .mdl-ripple {
+      background: $mdlext-dark-button-secondary-color-alt;
+    }
+    &.mdl-button--raised,
+    &.mdl-button--fab {
+      color: $mdlext-dark-button-secondary-color-alt;
+      background-color: $mdlext-dark-button-primary-color-alt;
+    }
+  }
+
+  .mdl-button--accent.mdl-button--accent {
+    color: $mdlext-dark-button-fab-color-alt;
+
+    & .mdl-ripple {
+      background: $mdlext-dark-button-fab-text-color-alt;
+    }
+    &.mdl-button--raised,
+    &.mdl-button--fab {
+      color: $mdlext-dark-button-fab-text-color-alt;
+      background-color: $mdlext-dark-button-fab-color-alt;
+    }
+  }
+
+  // Disabled buttons
+
+  .mdl-button {
+    // Bump up specificity by using [disabled] twice.
+    &[disabled][disabled],
+    &.mdl-button--disabled.mdl-button--disabled {
+      color: $mdlext-dark-button-secondary-color-disabled;
+      background-color: transparent;
+    }
+
+    &--fab {
+      // Bump up specificity by using [disabled] twice.
+      &[disabled][disabled],
+      &.mdl-button--disabled.mdl-button--disabled {
+        background-color: $mdlext-dark-button-primary-color-disabled;
+        color: $mdlext-dark-button-secondary-color-disabled;
+      }
+    }
+
+    &--raised {
+      // Bump up specificity by using [disabled] twice.
+      &[disabled][disabled],
+      &.mdl-button--disabled.mdl-button--disabled {
+        background-color: $mdlext-dark-button-primary-color-disabled;
+        color: $mdlext-dark-button-secondary-color-disabled;
+      }
+    }
+    &--colored {
+      // Bump up specificity by using [disabled] twice.
+      &[disabled][disabled],
+      &.mdl-button--disabled.mdl-button--disabled {
+        color: $mdlext-dark-button-secondary-color-disabled;
+      }
+    }
+  }
+}
+
+
+// mdl/src/slider/_slider.scss
+// ---------------------------
+.mdlext-dark-color-theme {
+
+  .mdl-slider {
+
+    &.is-upgraded {
+      background: transparent;
+      color: $mdlext-dark-range-color;
+
+      &::-webkit-slider-runnable-track {
+        background: transparent;
+      }
+
+      &::-moz-range-track {
+        background: transparent;
+      }
+
+      &::-ms-track {
+        background: none;
+        color: transparent;
+      }
+
+      /* stylelint-disable */
+      &::-ms-fill-lower {
+        background: linear-gradient(
+          to right,
+          transparent,
+          transparent 16px,
+          $mdlext-dark-range-color 16px,
+          $mdlext-dark-range-color 0
+        );
+      }
+
+      &::-ms-fill-upper {
+        background: linear-gradient(
+          to left,
+          transparent,
+          transparent 16px,
+          $mdlext-dark-range-bg-color 16px,
+          $mdlext-dark-range-bg-color 0);
+      }
+      /* stylelint-enable */
+
+      &::-webkit-slider-thumb {
+        background: $mdlext-dark-range-color;
+      }
+
+      &::-moz-range-thumb {
+        background: $mdlext-dark-range-color;
+      }
+
+      &:focus:not(:active)::-webkit-slider-thumb {
+        box-shadow: 0 0 0 10px $mdlext-dark-range-faded-color;
+      }
+
+      &:focus:not(:active)::-moz-range-thumb {
+        box-shadow: 0 0 0 10px $mdlext-dark-range-faded-color;
+      }
+
+      &:active::-webkit-slider-thumb {
+        background: $mdlext-dark-range-color;
+      }
+
+      &:active::-moz-range-thumb {
+        background: $mdlext-dark-range-color;
+      }
+
+      &::-ms-thumb {
+        background: $mdlext-dark-range-color;
+      }
+
+      /* stylelint-disable */
+      &:focus:not(:active)::-ms-thumb {
+        background: radial-gradient(circle closest-side,
+          $mdlext-dark-range-color 0%,
+          $mdlext-dark-range-color 37.5%,
+          $mdlext-dark-range-faded-color 37.5%,
+          $mdlext-dark-range-faded-color 100%);
+      }
+      /* stylelint-enable */
+
+      &:active::-ms-thumb {
+        background: $mdlext-dark-range-color;
+      }
+
+
+      /**************************** 0-value ****************************/
+
+      &.is-lowest-value::-webkit-slider-thumb {
+        border-color: $mdlext-dark-range-color;
+        background: transparent;
+      }
+
+      &.is-lowest-value::-moz-range-thumb {
+        border-color: $mdlext-dark-range-bg-color;
+        background: transparent;
+      }
+
+      &.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
+        box-shadow: 0 0 0 10px $mdlext-dark-range-bg-focus-color;
+        background: $mdlext-dark-range-bg-focus-color;
+      }
+
+      &.is-lowest-value:focus:not(:active)::-moz-range-thumb {
+        box-shadow: 0 0 0 10px $mdlext-dark-range-bg-focus-color;
+        background: $mdlext-dark-range-bg-focus-color;
+      }
+
+      &.is-lowest-value:active::-webkit-slider-thumb {
+        border-color: $mdlext-dark-range-bg-color;
+      }
+
+      &.is-lowest-value:active::-moz-range-thumb {
+        border-color: $mdlext-dark-range-bg-color;
+      }
+
+      /* stylelint-disable */
+      &.is-lowest-value::-ms-thumb {
+        background: radial-gradient(circle closest-side,
+          transparent 0%,
+          transparent 66.67%,
+          $mdlext-dark-range-bg-color 66.67%,
+          $mdlext-dark-range-bg-color 100%);
+      }
+
+      &.is-lowest-value:focus:not(:active)::-ms-thumb {
+        background: radial-gradient(circle closest-side,
+          $mdlext-dark-range-bg-focus-color 0%,
+          $mdlext-dark-range-bg-focus-color 25%,
+          $mdlext-dark-range-bg-color 25%,
+          $mdlext-dark-range-bg-color 37.5%,
+          $mdlext-dark-range-bg-focus-color 37.5%,
+          $mdlext-dark-range-bg-focus-color 100%);
+      }
+
+      &.is-lowest-value:active::-ms-thumb {
+        background: radial-gradient(circle closest-side,
+          transparent 0%,
+          transparent 77.78%,
+          $mdlext-dark-range-bg-color 77.78%,
+          $mdlext-dark-range-bg-color 100%);
+      }
+      /* stylelint-enable */
+
+      &.is-lowest-value::-ms-fill-lower {
+        background: transparent;
+      }
+
+      /**************************** Disabled ****************************/
+
+      &:disabled:focus::-webkit-slider-thumb,
+      &:disabled:active::-webkit-slider-thumb,
+      &:disabled::-webkit-slider-thumb {
+        background: $mdlext-dark-range-bg-color;
+      }
+
+      &:disabled:focus::-moz-range-thumb,
+      &:disabled:active::-moz-range-thumb,
+      &:disabled::-moz-range-thumb {
+        background: $mdlext-dark-range-bg-color;
+      }
+
+      &:disabled + .mdl-slider__background-flex > .mdl-slider__background-lower {
+        background-color: $mdlext-dark-range-bg-color;
+      }
+
+      &.is-lowest-value:disabled:focus::-webkit-slider-thumb,
+      &.is-lowest-value:disabled:active::-webkit-slider-thumb,
+      &.is-lowest-value:disabled::-webkit-slider-thumb {
+        border-color: $mdlext-dark-range-bg-color;
+        background: transparent;
+      }
+
+      &.is-lowest-value:disabled:focus::-moz-range-thumb,
+      &.is-lowest-value:disabled:active::-moz-range-thumb,
+      &.is-lowest-value:disabled::-moz-range-thumb {
+        border-color: $mdlext-dark-range-bg-color;
+        background: transparent;
+      }
+
+      &:disabled:focus::-ms-thumb,
+      &:disabled:active::-ms-thumb,
+      &:disabled::-ms-thumb {
+        background: $mdlext-dark-range-bg-color;
+      }
+
+      /* stylelint-disable */
+      &.is-lowest-value:disabled:focus::-ms-thumb,
+      &.is-lowest-value:disabled:active::-ms-thumb,
+      &.is-lowest-value:disabled::-ms-thumb {
+        background: radial-gradient(circle closest-side,
+          transparent 0%,
+          transparent 50%,
+          $mdlext-dark-range-bg-color 50%,
+          $mdlext-dark-range-bg-color 100%);
+      }
+
+      &:disabled::-ms-fill-lower {
+        background: linear-gradient(to right,
+          transparent,
+          transparent 25px,
+          $mdlext-dark-range-bg-color 25px,
+          $mdlext-dark-range-bg-color 0);
+      }
+      /* stylelint-enable */
+
+    }
+  }
+
+  .mdl-slider__background-flex {
+    background: transparent;
+  }
+
+  .mdl-slider__background-lower {
+    background: $mdlext-dark-range-color;
+  }
+
+  // This one styles the upper part of the slider track.
+  .mdl-slider__background-upper {
+    background: $mdlext-dark-range-bg-color;
+  }
+}
+
+
+// mdl/src/textfield/_textfield.scss
+// -----------------------------------
+.mdlext-dark-color-theme {
+
+  .mdl-textfield__input {
+    border-bottom-color: $mdlext-dark-input-text-bottom-border-color;
+  }
+  .mdl-textfield.is-invalid .mdl-textfield__input {
+    border-color: $mdlext-dark-input-text-error-color;
+  }
+  fieldset[disabled] .mdl-textfield .mdl-textfield__input,
+  .mdl-textfield.is-disabled .mdl-textfield__input {
+    background-color: transparent;
+    border-bottom-color: $mdlext-dark-input-text-disabled-color;
+    color: $mdlext-dark-input-text-disabled-text-color;
+  }
+  .mdl-textfield__label {
+    color: $mdlext-dark-input-text-label-color;
+  }
+  .mdl-textfield__label::after {
+    background-color: $mdlext-dark-input-text-highlight-color;
+  }
+  fieldset[disabled] .mdl-textfield .mdl-textfield__label,
+  .mdl-textfield.is-disabled.is-disabled .mdl-textfield__label {
+    color: $mdlext-dark-input-text-disabled-text-color;
+  }
+  .mdl-textfield--floating-label.is-focused .mdl-textfield__label,
+  .mdl-textfield--floating-label.is-dirty .mdl-textfield__label,
+  .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
+    color: $mdlext-dark-input-text-highlight-color;
+  }
+  .mdl-textfield--floating-label.is-invalid .mdl-textfield__label {
+    color: $mdlext-dark-input-text-error-color;
+  }
+  .mdl-textfield.is-invalid .mdl-textfield__label::after {
+    background-color: $mdlext-dark-input-text-error-color;
+  }
+  .mdl-textfield__error {
+    color: $mdlext-dark-input-text-error-color;
+  }
+}
+
+
+// mdl/src/checkbox/_checkbox.scss
+// -----------------------------------
+.mdlext-dark-color-theme {
+
+  .mdl-checkbox__box-outline {
+    border-color: $mdlext-dark-checkbox-off-color;
+  }
+  .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
+    border-color: $mdlext-dark-checkbox-color;
+  }
+  fieldset[disabled] .mdl-checkbox .mdl-checkbox__box-outline,
+  .mdl-checkbox.is-disabled .mdl-checkbox__box-outline {
+    border-color: $mdlext-dark-checkbox-disabled-color;
+  }
+
+  .mdl-checkbox__focus-helper {
+    background-color: transparent;
+  }
+  .mdl-checkbox.is-focused.is-checked .mdl-checkbox__focus-helper {
+    box-shadow: 0 0 0 ($checkbox-button-size / 2) $mdlext-dark-checkbox-focus-color;
+    background-color: $mdlext-dark-checkbox-focus-color;
+  }
+
+  .mdl-checkbox__tick-outline {
+    background: transparent;
+  }
+  .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
+    background-color: $mdlext-dark-checkbox-color;
+  }
+  fieldset[disabled] .mdl-checkbox.is-checked .mdl-checkbox__tick-outline,
+  .mdl-checkbox.is-checked.is-disabled .mdl-checkbox__tick-outline {
+    background-color: $mdlext-dark-checkbox-disabled-color;
+  }
+
+  fieldset[disabled] .mdl-checkbox .mdl-checkbox__label,
+  .mdl-checkbox.is-disabled .mdl-checkbox__label {
+    color: $mdlext-dark-checkbox-disabled-color;
+  }
+
+  .mdl-checkbox__ripple-container .mdl-ripple {
+    background: $mdlext-dark-checkbox-color;
+  }
+  fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container .mdl-ripple,
+  .mdl-checkbox.is-disabled .mdl-checkbox__ripple-container .mdl-ripple {
+    background: transparent;
+  }
+
+}
+
+// mdl/src/radio/_radio.scss
+// -----------------------------------
+.mdlext-dark-color-theme {
+  .mdl-radio__outer-circle {
+    border-color: $mdlext-dark-radio-off-color;
+  }
+  .mdl-radio.is-checked .mdl-radio__outer-circle {
+    border-color: $mdlext-dark-radio-color;
+  }
+  .mdl-radio__outer-circle fieldset[disabled] .mdl-radio,
+  .mdl-radio.is-disabled .mdl-radio__outer-circle {
+    border-color: $mdlext-dark-radio-disabled-color;
+  }
+
+  .mdl-radio__inner-circle {
+    background: $mdlext-dark-radio-color;
+  }
+  fieldset[disabled] .mdl-radio .mdl-radio__inner-circle,
+  .mdl-radio.is-disabled .mdl-radio__inner-circle {
+    background: $mdlext-dark-radio-disabled-color;
+  }
+
+  fieldset[disabled] .mdl-radio .mdl-radio__label,
+  .mdl-radio.is-disabled .mdl-radio__label {
+    color: $mdlext-dark-radio-disabled-color;
+  }
+
+  .mdl-radio__ripple-container .mdl-ripple {
+    background: $mdlext-dark-radio-color;
+  }
+  fieldset[disabled] .mdl-radio .mdl-radio__ripple-container .mdl-ripple,
+  .mdl-radio.is-disabled .mdl-radio__ripple-container .mdl-ripple {
+    background: transparent;
+  }
+}
+
+// mdl/src/icon-togglr/_icon-toggle.scss
+// ---------------------------------------
+.mdlext-dark-color-theme {
+  .mdl-icon-toggle__label {
+    color: $mdlext-dark-icon-toggle-color;
+  }
+  .mdl-icon-toggle.is-checked .mdl-icon-toggle__label {
+    color: $mdlext-dark-icon-toggle-checked-color;
+  }
+  .mdl-icon-toggle.is-disabled .mdl-icon-toggle__label {
+    color: $mdlext-dark-icon-toggle-disabled-color;
+  }
+  .mdl-icon-toggle.is-focused .mdl-icon-toggle__label {
+    background-color: $mdlext-dark-icon-toggle-focus-color;
+  }
+  .mdl-icon-toggle.is-focused.is-checked .mdl-icon-toggle__label {
+    background-color: $mdlext-dark-icon-toggle-checked-focus-color;
+  }
+  .mdl-icon-toggle__ripple-container .mdl-ripple {
+    background: $mdlext-dark-icon-toggle-color;
+  }
+  .mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container .mdl-ripple {
+    background: transparent;
+  }
+}
+
+
+// mdl/src/switch/_switch.scss
+// -----------------------------------
+.mdlext-dark-color-theme {
+
+  .mdl-switch__track {
+    background: $mdlext-dark-switch-off-track-color;
+  }
+  .mdl-switch.is-checked .mdl-switch__track {
+    background: $mdlext-dark-switch-track-color;
+  }
+  .mdl-switch__track fieldset[disabled] .mdl-switch,
+  .mdl-switch.is-disabled .mdl-switch__track {
+    background: $mdlext-dark-switch-disabled-track-color;
+  }
+
+  .mdl-switch__thumb {
+    background: $mdlext-dark-switch-off-thumb-color;
+  }
+  .mdl-switch.is-checked .mdl-switch__thumb {
+    background: $mdlext-dark-switch-thumb-color;
+  }
+  .mdl-switch__thumb fieldset[disabled] .mdl-switch,
+  .mdl-switch.is-disabled .mdl-switch__thumb {
+    background: $mdlext-dark-switch-disabled-thumb-color;
+  }
+
+  .mdl-switch__focus-helper {
+    background-color: transparent;
+  }
+  .mdl-switch.is-focused .mdl-switch__focus-helper {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  .mdl-switch.is-focused.is-checked .mdl-switch__focus-helper {
+    box-shadow: 0 0 0 (($switch-ripple-size - $switch-helper-size) / 2) $mdlext-dark-switch-faded-color;
+    background-color: $mdlext-dark-switch-faded-color;
+  }
+
+  .mdl-switch__label fieldset[disabled] .mdl-switch,
+  .mdl-switch.is-disabled .mdl-switch__label {
+    color: $mdlext-dark-switch-disabled-thumb-color;
+  }
+
+  .mdl-switch__ripple-container .mdl-ripple {
+    background: $mdlext-dark-switch-color;
+  }
+  fieldset[disabled] .mdl-switch .mdl-switch__ripple-container .mdl-ripple,
+  .mdl-switch.is-disabled .mdl-switch__ripple-container .mdl-ripple {
+    background: transparent;
+  }
+
+}
+
+
+// mdl/src/data-table/_data-table.scss
+// -----------------------------------
+.mdlext-dark-color-theme {
+
+  .mdl-data-table {
+    border-color: $mdlext-dark-data-table-divider-color;
+    background-color: $mdlext-dark-data-table-background-color;
+
+    tbody {
+      tr {
+        &.is-selected {
+          background-color: $mdlext-dark-data-table-selection-color;
+        }
+
+        &:hover {
+          background-color: $mdlext-dark-data-table-hover-color;
+        }
+      }
+    }
+
+    th {
+      color: $mdlext-dark-data-table-header-color;
+
+      &.mdl-data-table__header--sorted-ascending,
+      &.mdl-data-table__header--sorted-descending {
+        color: $mdlext-dark-data-table-header-sorted-color;
+
+        &:hover {
+          &::before {
+            color: $mdlext-dark-data-table-header-sorted-icon-hover-color;
+          }
+        }
+      }
+    }
+  }
+}
+
+// mdl/src/menu/_menu.scss
+// -----------------------------------
+.mdlext-dark-color-theme {
+
+  .mdl-menu__outline {
+    background: $mdlext-dark-default-dropdown-bg-color;
+  }
+
+  .mdl-menu__item {
+    color: $mdlext-dark-default-item-text-color;
+    background-color: transparent;
+    outline-color: $mdlext-dark-default-item-outline-color;
+
+    &--full-bleed-divider {
+      border-bottom-color: $mdlext-dark-default-item-divider-color;
+    }
+
+    &[disabled],
+    &[data-mdl-disabled] {
+      color: $mdlext-dark-disabled-item-text-color;
+      background-color: transparent;
+
+      &:hover {
+        background-color: transparent;
+      }
+
+      &:focus {
+        background-color: transparent;
+      }
+
+      & .mdl-ripple {
+        background: transparent;
+      }
+    }
+
+    &:hover {
+      background-color: $mdlext-dark-default-item-hover-bg-color;
+    }
+
+    &:focus {
+      background-color: $mdlext-dark-default-item-focus-bg-color;
+    }
+
+    &:active {
+      background-color: $mdlext-dark-default-item-active-bg-color;
+    }
+  }
+}
+
+// mdl/src/card/_card.scss
+// ----------------------------------------
+.mdlext-dark-color-theme {
+  .mdl-card {
+    background: $mdlext-dark-card-background-color;
+  }
+
+  .mdl-card__media {
+    background-color: $mdlext-dark-card-image-placeholder-color;
+  }
+
+  .mdl-card__title {
+    color: $mdlext-dark-card-text-color;
+
+    &.mdl-card--border {
+      border-bottom-color: $mdlext-dark-card-border-color;
+    }
+  }
+
+  .mdl-card__title-text {
+    color: inherit;
+  }
+
+  .mdl-card__subtitle-text {
+    color: $mdlext-dark-card-subtitle-color;
+  }
+
+  .mdl-card__supporting-text {
+    color: $mdlext-dark-card-supporting-text-text-color;
+  }
+
+  .mdl-card__actions {
+    background-color: rgba(255, 255, 255, 0);
+
+    &.mdl-card--border {
+      border-top-color: $mdlext-dark-card-border-color;
+    }
+  }
+}
+
+
+// mdlext/src/selectfield/_selectfield.scss
+// ----------------------------------------
+.mdlext-dark-color-theme {
+
+  .mdlext-selectfield.is-disabled::after {
+    color: $mdlext-dark-input-text-disabled-color;
+    @include mdlext-arrow(bottom, $mdlext-selectfield-arrow-width, $mdlext-selectfield-arrow-length, $mdlext-dark-input-text-disabled-color);
+  }
+
+  .mdlext-selectfield__select {
+    border-bottom-color: $mdlext-dark-input-text-bottom-border-color;
+    color: inherit;
+
+    option {
+      background-color: $mdlext-dark-content-background-color;
+      color: $mdlext-dark-text-color-primary;
+    }
+  }
+  .mdlext-selectfield.is-invalid .mdlext-selectfield__select {
+    border-color: $mdlext-dark-input-text-error-color;
+  }
+  fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__select,
+  .mdlext-selectfield.is-disabled .mdlext-selectfield__select {
+    background-color: transparent;
+    border-bottom-color: $mdlext-dark-input-text-disabled-color;
+    color: $mdlext-dark-input-text-disabled-text-color;
+  }
+
+  .mdlext-selectfield__label {
+    color: $mdlext-dark-input-text-label-color;
+  }
+  fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__label,
+  .mdlext-selectfield.is-disabled.is-disabled .mdlext-selectfield__label {
+    color: $mdlext-dark-input-text-disabled-text-color;
+  }
+  .mdlext-selectfield--floating-label.is-focused .mdlext-selectfield__label,
+  .mdlext-selectfield--floating-label.is-dirty .mdlext-selectfield__label,
+  .mdlext-selectfield--floating-label.is-dirty.is-dirty .mdlext-selectfield__label,
+  .mdlext-selectfield--floating-label.has-placeholder .mdlext-selectfield__label {
+    color: $mdlext-dark-input-text-highlight-color;
+  }
+  .mdlext-selectfield--floating-label.is-invalid .mdlext-selectfield__label {
+    color: $mdlext-dark-input-text-error-color;
+  }
+  .mdlext-selectfield__label::after {
+    background-color: $mdlext-dark-input-text-highlight-color;
+  }
+  .mdlext-selectfield.is-invalid .mdlext-selectfield__label::after {
+    background-color: $mdlext-dark-input-text-error-color;
+  }
+
+  .mdlext-selectfield__error {
+    color: $mdlext-dark-input-text-error-color;
+  }
+}
+
+
+// mdlext/src/menu-button/_menu-button.scss
+// ----------------------------------------
+.mdlext-menu.mdlext-dark-color-theme {
+  background: $mdlext-dark-default-dropdown-bg-color;
+}
+
+.mdlext-dark-color-theme {
+
+  .mdlext-menu {
+    background: $mdlext-dark-default-dropdown-bg-color;
+
+    &__item {
+      color: $mdlext-dark-default-item-text-color;
+      background-color: $mdlext-dark-default-dropdown-bg-color;
+
+      &:active,
+      &[aria-selected='true'] {
+        background-color: $mdlext-dark-default-item-active-bg-color;
+      }
+      &:hover:not([disabled]) {
+        background-color: $mdlext-dark-default-item-hover-bg-color;
+      }
+      &:focus {
+        outline-color: $mdlext-dark-default-item-outline-color;
+        background-color: $mdlext-dark-default-item-focus-bg-color;
+      }
+      &[disabled] {
+        color: $mdlext-dark-disabled-item-text-color;
+
+        > * {
+          color: $mdlext-dark-disabled-item-text-color;
+        }
+      }
+    }
+    &__item-separator {
+      border-bottom: 1px solid $mdlext-dark-default-item-divider-color;
+    }
+  }
+}
+
+
+// mdlext/src/bordered-fields/_bordered-fields.scss
+// -------------------------------------------------
+.mdlext-dark-color-theme {
+
+  .mdlext-bordered-fields {
+
+    .mdl-textfield,
+    .mdlext-selectfield {
+
+      .mdl-textfield__input,
+      .mdlext-selectfield__select {
+        background-color: $mdlext-dark-bordered-field-background-color;
+        border-color: $mdlext-dark-bordered-field-border-color;
+        color: $mdlext-dark-bordered-field-input-text-color;
+
+        &:disabled {
+          color: $mdlext-dark-bordered-field-input-text-disabled-text-color;
+          background-color: $mdlext-dark-bordered-field-disabled-background-color;
+          border-color: $mdlext-dark-bordered-field-disabled-border-color;
+        }
+        &:focus {
+          background-color: $mdlext-dark-bordered-field-focus-background-color;
+          border-color: $mdlext-dark-bordered-field-focus-border-color;
+        }
+      }
+      &.is-invalid {
+        .mdl-textfield__input,
+        .mdlext-selectfield__select {
+          color: $mdlext-dark-bordered-field-input-text-error-color;
+          border-color: $mdlext-dark-bordered-field-error-border-color;
+          background-color: $mdlext-dark-bordered-field-error-background-color;
+
+          &:focus {
+            border-color: $mdlext-dark-bordered-field-error-focus-border-color;
+            background-color: $mdlext-dark-bordered-field-error-focus-background-color;
+          }
+        }
+      }
+    }
+
+    fieldset[disabled] .mdlext-selectfield::after,
+    .mdlext-selectfield.is-disabled::after {
+      color: $mdlext-dark-bordered-field-input-text-disabled-text-color;
+      @include mdlext-arrow(bottom, $mdlext-selectfield-arrow-width, $mdlext-selectfield-arrow-length, $mdlext-dark-bordered-field-input-text-disabled-text-color);
+    }
+
+    fieldset[disabled] .mdl-textfield .mdl-textfield__input,
+    fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__select {
+      color: $mdlext-dark-bordered-field-input-text-disabled-text-color;
+      background-color: $mdlext-dark-bordered-field-disabled-background-color;
+      border-color: $mdlext-dark-bordered-field-disabled-border-color;
+    }
+
+    .mdl-textfield,
+    .mdlext-selectfield {
+
+      .mdl-textfield__label,
+      .mdlext-selectfield__label {
+        color: $mdlext-dark-bordered-field-input-text-label-color;
+      }
+      &.mdl-textfield--floating-label.is-focused.is-focused,
+      &.mdl-textfield--floating-label.is-dirty.is-dirty,
+      &.mdl-textfield--floating-label.has-placeholder,
+      &.mdlext-selectfield--floating-label.is-focused.is-focused,
+      &.mdlext-selectfield--floating-label.is-dirty.is-dirty,
+      &.mdlext-selectfield--floating-label.has-placeholder {
+
+        .mdl-textfield__label,
+        .mdlext-selectfield__label {
+          color: $mdlext-dark-bordered-field-input-text-label-focus-color;
+        }
+      }
+      &.mdl-textfield--floating-label.is-disabled.is-disabled,
+      &.mdlext-selectfield--floating-label.is-disabled.is-disabled {
+
+        .mdl-textfield__label,
+        .mdlext-selectfield__label {
+          color: $mdlext-dark-bordered-field-input-text-label-disabled-color;
+        }
+      }
+      &.mdl-textfield--floating-label.is-invalid.is-invalid,
+      &.mdlext-selectfield--floating-label.is-invalid.is-invalid {
+
+        .mdl-textfield__label,
+        .mdlext-selectfield__label {
+          color: $mdlext-dark-bordered-field-input-text-label-error-color;
+        }
+      }
+    }
+
+    fieldset[disabled] .mdl-textfield .mdl-textfield__label,
+    fieldset[disabled] .mdl-selectfield .mdl-selectfield__label {
+      color: $mdlext-dark-bordered-field-input-text-label-disabled-color;
+    }
+
+    // Icon(s) and/or button(s) inside textfield
+    .mdl-textfield,
+    .mdlext-selectfield {
+      &.is-disabled i,
+      &.is-disabled .mdl-button {
+        color: $mdlext-dark-bordered-field-disabled-border-color;
+      }
+    }
+    fieldset[disabled] .mdl-textfield,
+    fieldset[disabled] .mdlext-selectfield {
+      i,
+      .mdl-button {
+        color: $mdlext-dark-bordered-field-disabled-border-color;
+      }
+    }
+  }
+
+}
+
+
+// mdlext/src/accordion/_accordion.scss
+// ----------------------------------------
+.mdlext-dark-color-theme {
+
+  .mdlext-accordion {
+
+    &__tab {
+      color: $mdlext-dark-accordion-header-secondary-color;
+      background-color: $mdlext-dark-accordion-header-background-color;
+
+      &:focus {
+        outline-color: $mdlext-dark-accordion-header-focus-outline-color;
+      }
+      &[aria-expanded='true'] {
+        background-color: $mdlext-dark-accordion-header-background-open-color;
+      }
+      &[aria-selected='true'] {
+        background-color: $mdlext-dark-accordion-header-background-active-color;
+      }
+      &[disabled] {
+        background-color: $mdlext-dark-accordion-header-disabled-color;
+        color: $mdlext-dark-accordion-header-secondary-color-disabled;
+        pointer-events: none;
+
+        > * {
+          color: $mdlext-dark-accordion-header-secondary-color-disabled;
+        }
+      }
+      &:hover:not([disabled]) {
+        background-color: $mdlext-dark-accordion-header-background-hover-color;
+      }
+      &--ripple {
+        &[aria-selected='true']::before {
+          background: $mdlext-dark-accordion-ripple-color;
+        }
+      }
+    }
+
+    &__tabpanel {
+      color: $mdlext-dark-accordion-content-color;
+      background-color: $mdlext-dark-accordion-content-background-color;
+    }
+  }
+
+  // Vertical layout
+  .mdlext-accordion {
+
+    &--vertical {
+
+      .mdlext-accordion__tab {
+        border-top: 1px solid $mdlext-dark-accordion-header-border-color;
+
+        &[aria-selected='true']::after {
+          background-color: $mdlext-dark-accordion-header-highlight-color;
+        }
+      }
+      .mdlext-accordion__tabpanel {
+        border-top: 1px solid $mdlext-dark-accordion-header-border-color;
+      }
+    }
+  }
+
+  // Horizontal layout
+  .mdlext-accordion {
+
+    &--horizontal {
+
+      .mdlext-accordion__tab {
+        border-left: 1px solid $mdlext-dark-accordion-header-border-color;
+
+        &[aria-selected='true']::after {
+          background-color: $mdlext-dark-accordion-header-highlight-color;
+        }
+      }
+      .mdlext-accordion__tabpanel {
+        border-left: 1px solid $mdlext-dark-accordion-header-border-color;
+      }
+    }
+  }
+
+  .mdlext-accordion {
+
+    &__panel:first-child > &__tab {
+      // Use container to set outer borders
+      border-top-color: transparent;
+      border-left-color: transparent;
+    }
+  }
+
+  // Making accordion appear disabled.
+  // Note: does not prevent tabbing into a disabled accordion
+  .mdlext-accordion[disabled] {
+    .mdlext-accordion__tab {
+      background-color: $mdlext-dark-accordion-header-disabled-color;
+      color: $mdlext-dark-accordion-header-secondary-color-disabled;
+
+      > * {
+        color: $mdlext-dark-accordion-header-secondary-color-disabled;
+      }
+    }
+    .mdlext-accordion__tabpanel {
+      opacity: 0.8;
+      filter: blur(1px) grayscale(80%);
+    }
+  }
+}
diff --git a/node_modules/mdl-ext/src/color-themes/_light-color-theme.scss b/node_modules/mdl-ext/src/color-themes/_light-color-theme.scss
new file mode 100644
index 0000000..5393738
--- /dev/null
+++ b/node_modules/mdl-ext/src/color-themes/_light-color-theme.scss
@@ -0,0 +1,1130 @@
+@import "color-themes";
+
+.mdlext-light-color-theme {
+  background-color: $mdlext-light-content-background-color;
+  color: $mdlext-light-text-color-primary;
+
+  a {
+    outline-color: inherit;
+  }
+}
+
+// mdl/src/palette/_palette.scss
+// -----------------------------
+.mdlext-light-color-theme {
+
+  .mdl-color--primary {
+    background-color: $mdlext-light-color-primary !important;
+  }
+
+  .mdl-color--primary-contrast {
+    background-color: $mdlext-light-color-primary-contrast !important;
+  }
+
+  .mdl-color--primary-dark {
+    background-color: $mdlext-light-color-primary-dark !important;
+  }
+
+  .mdl-color--accent {
+    background-color: $mdlext-light-color-accent !important;
+  }
+
+  .mdl-color--accent-contrast {
+    background-color: $mdlext-light-color-accent-contrast !important;
+  }
+
+  .mdl-color-text--primary {
+    color: $mdlext-light-color-primary !important;
+  }
+
+  .mdl-color-text--primary-contrast {
+    color: $mdlext-light-color-primary-contrast !important;
+  }
+
+  .mdl-color-text--primary-dark {
+    color: $mdlext-light-color-primary-dark !important;
+  }
+
+  .mdl-color-text--accent {
+    color: $mdlext-light-color-accent !important;
+  }
+
+  .mdl-color-text--accent-contrast {
+    color: $mdlext-light-color-accent-contrast !important;
+  }
+
+}
+
+// mdl/src/typography/_typography.scss
+// -----------------------------------
+.mdlext-light-color-theme {
+  a {
+    color: $mdlext-light-text-link-color;
+  }
+}
+
+
+// mdl/src/badge/_badge.scss
+// ---------------------------
+.mdlext-light-color-theme {
+  .mdl-badge {
+
+    &[data-badge]::after {
+      background: $mdlext-light-badge-background;
+      color: $mdlext-light-badge-color;
+    }
+
+    &.mdl-badge--no-background {
+      &[data-badge]::after {
+        color: $mdlext-light-badge-color-inverse;
+        background: $mdlext-light-badge-background-inverse;
+      }
+    }
+  }
+}
+
+
+// mdl/src/button/_button.scss
+// ---------------------------
+.mdlext-light-color-theme {
+
+  .mdl-button {
+    background: transparent;
+    color: $mdlext-light-button-secondary-color;
+
+    &:hover {
+      background-color: $mdlext-light-button-hover-color;
+    }
+
+    &:focus:not(:active) {
+      background-color: $mdlext-light-button-focus-color;
+    }
+
+    &:active {
+      background-color: $mdlext-light-button-active-color;
+    }
+
+    &.mdl-button--colored {
+      color: $mdlext-light-button-primary-color-alt;
+
+      &:focus:not(:active) {
+        background-color: $mdlext-light-button-focus-color-alt;
+      }
+    }
+  }
+
+  // Raised buttons
+  .mdl-button--raised {
+    background: $mdlext-light-button-primary-color;
+
+    &:active {
+      background-color: $mdlext-light-button-active-color;
+    }
+
+    &:focus:not(:active) {
+      background-color: $mdlext-light-button-active-color;
+    }
+
+    &.mdl-button--colored {
+      background: $mdlext-light-button-primary-color-alt;
+      color: $mdlext-light-button-secondary-color-alt;
+
+      &:hover {
+        background-color: $mdlext-light-button-hover-color-alt;
+      }
+
+      &:active {
+        background-color: $mdlext-light-button-active-color-alt;
+      }
+
+      &:focus:not(:active) {
+        background-color: $mdlext-light-button-active-color-alt;
+      }
+
+      & .mdl-ripple {
+        background: $mdlext-light-button-ripple-color-alt;
+      }
+    }
+  }
+
+
+  // FABs
+  .mdl-button--fab {
+    background: $mdlext-light-button-primary-color;
+
+    &:active {
+      background-color: $mdlext-light-button-active-color;
+    }
+
+    &:focus:not(:active) {
+      background-color: $mdlext-light-button-active-color;
+    }
+
+    &.mdl-button--colored {
+      background: $mdlext-light-button-fab-color-alt;
+      color: $mdlext-light-button-fab-text-color-alt;
+
+      &:hover {
+        background-color: $mdlext-light-button-fab-hover-color-alt;
+      }
+
+      &:focus:not(:active) {
+        background-color: $mdlext-light-button-fab-active-color-alt;
+      }
+
+      &:active {
+        background-color: $mdlext-light-button-fab-active-color-alt;
+      }
+
+      & .mdl-ripple {
+        background: $mdlext-light-button-fab-ripple-color-alt;
+      }
+    }
+  }
+
+
+  // Icon buttons
+  .mdl-button--icon {
+    color: inherit;
+  }
+
+  // Colorized buttons
+
+  .mdl-button--primary.mdl-button--primary {
+    color: $mdlext-light-button-primary-color-alt;
+
+    & .mdl-ripple {
+      background: $mdlext-light-button-secondary-color-alt;
+    }
+    &.mdl-button--raised,
+    &.mdl-button--fab {
+      color: $mdlext-light-button-secondary-color-alt;
+      background-color: $mdlext-light-button-primary-color-alt;
+    }
+  }
+
+  .mdl-button--accent.mdl-button--accent {
+    color: $mdlext-light-button-fab-color-alt;
+
+    & .mdl-ripple {
+      background: $mdlext-light-button-fab-text-color-alt;
+    }
+    &.mdl-button--raised,
+    &.mdl-button--fab {
+      color: $mdlext-light-button-fab-text-color-alt;
+      background-color: $mdlext-light-button-fab-color-alt;
+    }
+  }
+
+  // Disabled buttons
+
+  .mdl-button {
+    // Bump up specificity by using [disabled] twice.
+    &[disabled][disabled],
+    &.mdl-button--disabled.mdl-button--disabled {
+      color: $mdlext-light-button-secondary-color-disabled;
+      background-color: transparent;
+    }
+
+    &--fab {
+      // Bump up specificity by using [disabled] twice.
+      &[disabled][disabled],
+      &.mdl-button--disabled.mdl-button--disabled {
+        background-color: $mdlext-light-button-primary-color-disabled;
+        color: $mdlext-light-button-secondary-color-disabled;
+      }
+    }
+
+    &--raised {
+      // Bump up specificity by using [disabled] twice.
+      &[disabled][disabled],
+      &.mdl-button--disabled.mdl-button--disabled {
+        background-color: $mdlext-light-button-primary-color-disabled;
+        color: $mdlext-light-button-secondary-color-disabled;
+      }
+    }
+    &--colored {
+      // Bump up specificity by using [disabled] twice.
+      &[disabled][disabled],
+      &.mdl-button--disabled.mdl-button--disabled {
+        color: $mdlext-light-button-secondary-color-disabled;
+      }
+    }
+  }
+}
+
+// mdl/src/slider/_slider.scss
+// ---------------------------
+.mdlext-light-color-theme {
+  .mdl-slider {
+
+    &.is-upgraded {
+      background: transparent;
+      color: $mdlext-light-range-color;
+
+      &::-webkit-slider-runnable-track {
+        background: transparent;
+      }
+
+      &::-moz-range-track {
+        background: transparent;
+      }
+
+      &::-ms-track {
+        background: none;
+        color: transparent;
+      }
+
+      /* stylelint-disable */
+      &::-ms-fill-lower {
+        background: linear-gradient(to right,
+          transparent,
+          transparent 16px,
+          $mdlext-light-range-color 16px,
+          $mdlext-light-range-color 0);
+      }
+
+      &::-ms-fill-upper {
+        background: linear-gradient(to left,
+          transparent,
+          transparent 16px,
+          $mdlext-light-range-bg-color 16px,
+          $mdlext-light-range-bg-color 0);
+      }
+      /* stylelint-enable */
+
+
+      /**************************** Thumbs ****************************/
+      &::-webkit-slider-thumb {
+        background: $mdlext-light-range-color;
+      }
+
+      &::-moz-range-thumb {
+        background: $mdlext-light-range-color;
+      }
+
+      &:focus:not(:active)::-webkit-slider-thumb {
+        box-shadow: 0 0 0 10px $mdlext-light-range-faded-color;
+      }
+
+      &:focus:not(:active)::-moz-range-thumb {
+        box-shadow: 0 0 0 10px $mdlext-light-range-faded-color;
+      }
+
+      &:active::-webkit-slider-thumb {
+        background: $mdlext-light-range-color;
+      }
+
+      &:active::-moz-range-thumb {
+        background: $mdlext-light-range-color;
+      }
+
+      &::-ms-thumb {
+        background: $mdlext-light-range-color;
+      }
+
+      /* stylelint-disable */
+      &:focus:not(:active)::-ms-thumb {
+        background: radial-gradient(circle closest-side,
+          $mdlext-light-range-color 0%,
+          $mdlext-light-range-color 37.5%,
+          $mdlext-light-range-faded-color 37.5%,
+          $mdlext-light-range-faded-color 100%);
+      }
+      /* stylelint-enable */
+
+      &:active::-ms-thumb {
+        background: $mdlext-light-range-color;
+      }
+
+
+      /**************************** 0-value ****************************/
+
+      &.is-lowest-value::-webkit-slider-thumb {
+        border-color: $mdlext-light-range-color;
+        background: transparent;
+      }
+
+      &.is-lowest-value::-moz-range-thumb {
+        border-color: $mdlext-light-range-bg-color;
+        background: transparent;
+      }
+
+      &.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
+        box-shadow: 0 0 0 10px $mdlext-light-range-bg-focus-color;
+        background: $mdlext-light-range-bg-focus-color;
+      }
+
+      &.is-lowest-value:focus:not(:active)::-moz-range-thumb {
+        box-shadow: 0 0 0 10px $mdlext-light-range-bg-focus-color;
+        background: $mdlext-light-range-bg-focus-color;
+      }
+
+      &.is-lowest-value:active::-webkit-slider-thumb {
+        border-color: $mdlext-light-range-bg-color;
+      }
+
+      &.is-lowest-value:active::-moz-range-thumb {
+        border-color: $mdlext-light-range-bg-color;
+      }
+
+      /* stylelint-disable */
+      &.is-lowest-value::-ms-thumb {
+        background: radial-gradient(circle closest-side,
+          transparent 0%,
+          transparent 66.67%,
+          $mdlext-light-range-bg-color 66.67%,
+          $mdlext-light-range-bg-color 100%);
+      }
+
+      &.is-lowest-value:focus:not(:active)::-ms-thumb {
+        background: radial-gradient(circle closest-side,
+          $mdlext-light-range-bg-focus-color 0%,
+          $mdlext-light-range-bg-focus-color 25%,
+          $mdlext-light-range-bg-color 25%,
+          $mdlext-light-range-bg-color 37.5%,
+          $mdlext-light-range-bg-focus-color 37.5%,
+          $mdlext-light-range-bg-focus-color 100%);
+      }
+
+      &.is-lowest-value:active::-ms-thumb {
+        background: radial-gradient(circle closest-side,
+          transparent 0%,
+          transparent 77.78%,
+          $mdlext-light-range-bg-color 77.78%,
+          $mdlext-light-range-bg-color 100%);
+      }
+      /* stylelint-enable */
+
+      &.is-lowest-value::-ms-fill-lower {
+        background: transparent;
+      }
+
+      /**************************** Disabled ****************************/
+
+      &:disabled:focus::-webkit-slider-thumb,
+      &:disabled:active::-webkit-slider-thumb,
+      &:disabled::-webkit-slider-thumb {
+        background: $mdlext-light-range-bg-color;
+      }
+
+      &:disabled:focus::-moz-range-thumb,
+      &:disabled:active::-moz-range-thumb,
+      &:disabled::-moz-range-thumb {
+        background: $mdlext-light-range-bg-color;
+      }
+
+      &:disabled + .mdl-slider__background-flex > .mdl-slider__background-lower {
+        background-color: $mdlext-light-range-bg-color;
+      }
+
+      &.is-lowest-value:disabled:focus::-webkit-slider-thumb,
+      &.is-lowest-value:disabled:active::-webkit-slider-thumb,
+      &.is-lowest-value:disabled::-webkit-slider-thumb {
+        border-color: $mdlext-light-range-bg-color;
+        background: transparent;
+      }
+
+      &.is-lowest-value:disabled:focus::-moz-range-thumb,
+      &.is-lowest-value:disabled:active::-moz-range-thumb,
+      &.is-lowest-value:disabled::-moz-range-thumb {
+        border-color: $mdlext-light-range-bg-color;
+        background: transparent;
+      }
+
+      &:disabled:focus::-ms-thumb,
+      &:disabled:active::-ms-thumb,
+      &:disabled::-ms-thumb {
+        background: $mdlext-light-range-bg-color;
+      }
+
+      /* stylelint-disable */
+      &.is-lowest-value:disabled:focus::-ms-thumb,
+      &.is-lowest-value:disabled:active::-ms-thumb,
+      &.is-lowest-value:disabled::-ms-thumb {
+        background: radial-gradient(circle closest-side,
+          transparent 0%,
+          transparent 50%,
+          $mdlext-light-range-bg-color 50%,
+          $mdlext-light-range-bg-color 100%);
+      }
+
+      &:disabled::-ms-fill-lower {
+        background: linear-gradient(to right,
+          transparent,
+          transparent 25px,
+          $mdlext-light-range-bg-color 25px,
+          $mdlext-light-range-bg-color 0);
+      }
+      /* stylelint-enable */
+
+    }
+  }
+
+  .mdl-slider__background-flex {
+    background: transparent;
+  }
+
+  .mdl-slider__background-lower {
+    background: $mdlext-light-range-color;
+  }
+
+  // This one styles the upper part of the slider track.
+  .mdl-slider__background-upper {
+    background: $mdlext-light-range-bg-color;
+  }
+}
+
+
+// mdl/src/textfield/_textfield.scss
+// -----------------------------------
+.mdlext-light-color-theme {
+
+  .mdl-textfield__input {
+    border-bottom-color: $mdlext-light-input-text-bottom-border-color;
+  }
+  .mdl-textfield.is-invalid .mdl-textfield__input {
+    border-color: $mdlext-light-input-text-error-color;
+  }
+  fieldset[disabled] .mdl-textfield .mdl-textfield__input,
+  .mdl-textfield.is-disabled .mdl-textfield__input {
+    background-color: transparent;
+    border-bottom-color: $mdlext-light-input-text-disabled-color;
+    color: $mdlext-light-input-text-disabled-text-color;
+  }
+  .mdl-textfield__label {
+    color: $mdlext-light-input-text-label-color;
+  }
+  .mdl-textfield__label::after {
+    background-color: $mdlext-light-input-text-highlight-color;
+  }
+  fieldset[disabled] .mdl-textfield .mdl-textfield__label,
+  .mdl-textfield.is-disabled.is-disabled .mdl-textfield__label {
+    color: $mdlext-light-input-text-disabled-text-color;
+  }
+  .mdl-textfield--floating-label.is-focused .mdl-textfield__label,
+  .mdl-textfield--floating-label.is-dirty .mdl-textfield__label,
+  .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
+    color: $mdlext-light-input-text-highlight-color;
+  }
+  .mdl-textfield--floating-label.is-invalid .mdl-textfield__label {
+    color: $mdlext-light-input-text-error-color;
+  }
+  .mdl-textfield.is-invalid .mdl-textfield__label::after {
+    background-color: $mdlext-light-input-text-error-color;
+  }
+  .mdl-textfield__error {
+    color: $mdlext-light-input-text-error-color;
+  }
+}
+
+
+// mdl/src/checkbox/_checkbox.scss
+// -----------------------------------
+.mdlext-light-color-theme {
+
+  .mdl-checkbox__box-outline {
+    border-color: $mdlext-light-checkbox-off-color;
+  }
+  .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
+    border-color: $mdlext-light-checkbox-color;
+  }
+  fieldset[disabled] .mdl-checkbox .mdl-checkbox__box-outline,
+  .mdl-checkbox.is-disabled .mdl-checkbox__box-outline {
+    border-color: $mdlext-light-checkbox-disabled-color;
+  }
+
+  .mdl-checkbox__focus-helper {
+    background-color: transparent;
+  }
+  .mdl-checkbox.is-focused.is-checked .mdl-checkbox__focus-helper {
+    box-shadow: 0 0 0 ($checkbox-button-size / 2) $mdlext-light-checkbox-focus-color;
+    background-color: $mdlext-light-checkbox-focus-color;
+  }
+
+  .mdl-checkbox__tick-outline {
+    background: transparent;
+  }
+  .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
+    background-color: $mdlext-light-checkbox-color;
+  }
+  fieldset[disabled] .mdl-checkbox.is-checked .mdl-checkbox__tick-outline,
+  .mdl-checkbox.is-checked.is-disabled .mdl-checkbox__tick-outline {
+    background-color: $mdlext-light-checkbox-disabled-color;
+  }
+
+  fieldset[disabled] .mdl-checkbox .mdl-checkbox__label,
+  .mdl-checkbox.is-disabled .mdl-checkbox__label {
+    color: $mdlext-light-checkbox-disabled-color;
+  }
+
+  .mdl-checkbox__ripple-container .mdl-ripple {
+    background: $mdlext-light-checkbox-color;
+  }
+  fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container .mdl-ripple,
+  .mdl-checkbox.is-disabled .mdl-checkbox__ripple-container .mdl-ripple {
+    background: transparent;
+  }
+
+}
+
+// mdl/src/radio/_radio.scss
+// -----------------------------------
+.mdlext-light-color-theme {
+  .mdl-radio__outer-circle {
+    border-color: $mdlext-light-radio-off-color;
+  }
+  .mdl-radio.is-checked .mdl-radio__outer-circle {
+    border-color: $mdlext-light-radio-color;
+  }
+  .mdl-radio__outer-circle fieldset[disabled] .mdl-radio,
+  .mdl-radio.is-disabled .mdl-radio__outer-circle {
+    border-color: $mdlext-light-radio-disabled-color;
+  }
+
+  .mdl-radio__inner-circle {
+    background: $mdlext-light-radio-color;
+  }
+  fieldset[disabled] .mdl-radio .mdl-radio__inner-circle,
+  .mdl-radio.is-disabled .mdl-radio__inner-circle {
+    background: $mdlext-light-radio-disabled-color;
+  }
+
+  fieldset[disabled] .mdl-radio .mdl-radio__label,
+  .mdl-radio.is-disabled .mdl-radio__label {
+    color: $mdlext-light-radio-disabled-color;
+  }
+
+  .mdl-radio__ripple-container .mdl-ripple {
+    background: $mdlext-light-radio-color;
+  }
+  fieldset[disabled] .mdl-radio .mdl-radio__ripple-container .mdl-ripple,
+  .mdl-radio.is-disabled .mdl-radio__ripple-container .mdl-ripple {
+    background: transparent;
+  }
+}
+
+// mdl/src/icon-togglr/_icon-toggle.scss
+// ---------------------------------------
+.mdlext-light-color-theme {
+  .mdl-icon-toggle__label {
+    color: $mdlext-light-icon-toggle-color;
+  }
+  .mdl-icon-toggle.is-checked .mdl-icon-toggle__label {
+    color: $mdlext-light-icon-toggle-checked-color;
+  }
+  .mdl-icon-toggle.is-disabled .mdl-icon-toggle__label {
+    color: $mdlext-light-icon-toggle-disabled-color;
+  }
+  .mdl-icon-toggle.is-focused .mdl-icon-toggle__label {
+    background-color: $mdlext-light-icon-toggle-focus-color;
+  }
+  .mdl-icon-toggle.is-focused.is-checked .mdl-icon-toggle__label {
+    background-color: $mdlext-light-icon-toggle-checked-focus-color;
+  }
+  .mdl-icon-toggle__ripple-container .mdl-ripple {
+    background: $mdlext-light-icon-toggle-color;
+  }
+  .mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container .mdl-ripple {
+    background: transparent;
+  }
+}
+
+
+// mdl/src/switch/_switch.scss
+// -----------------------------------
+.mdlext-light-color-theme {
+
+  .mdl-switch__track {
+    background: $mdlext-light-switch-off-track-color;
+  }
+  .mdl-switch.is-checked .mdl-switch__track {
+    background: $mdlext-light-switch-track-color;
+  }
+  .mdl-switch__track fieldset[disabled] .mdl-switch,
+  .mdl-switch.is-disabled .mdl-switch__track {
+    background: $mdlext-light-switch-disabled-track-color;
+  }
+
+  .mdl-switch__thumb {
+    background: $mdlext-light-switch-off-thumb-color;
+  }
+  .mdl-switch.is-checked .mdl-switch__thumb {
+    background: $mdlext-light-switch-thumb-color;
+  }
+  .mdl-switch__thumb fieldset[disabled] .mdl-switch,
+  .mdl-switch.is-disabled .mdl-switch__thumb {
+    background: $mdlext-light-switch-disabled-thumb-color;
+  }
+
+  .mdl-switch__focus-helper {
+    background-color: transparent;
+  }
+  .mdl-switch.is-focused .mdl-switch__focus-helper {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  .mdl-switch.is-focused.is-checked .mdl-switch__focus-helper {
+    box-shadow: 0 0 0 (($switch-ripple-size - $switch-helper-size) / 2) $mdlext-light-switch-faded-color;
+    background-color: $mdlext-light-switch-faded-color;
+  }
+
+  .mdl-switch__label fieldset[disabled] .mdl-switch,
+  .mdl-switch.is-disabled .mdl-switch__label {
+    color: $mdlext-light-switch-disabled-thumb-color;
+  }
+
+  .mdl-switch__ripple-container .mdl-ripple {
+    background: $mdlext-light-switch-color;
+  }
+  fieldset[disabled] .mdl-switch .mdl-switch__ripple-container .mdl-ripple,
+  .mdl-switch.is-disabled .mdl-switch__ripple-container .mdl-ripple {
+    background: transparent;
+  }
+}
+
+
+// mdl/src/data-table/_data-table.scss
+// -----------------------------------
+.mdlext-light-color-theme {
+
+  .mdl-data-table {
+    border-color: $mdlext-light-data-table-divider-color;
+    background-color: $mdlext-light-data-table-background-color;
+
+    tbody {
+      tr {
+        &.is-selected {
+          background-color: $mdlext-light-data-table-selection-color;
+        }
+        &:hover {
+          background-color: $mdlext-light-data-table-hover-color;
+        }
+      }
+    }
+    th {
+      color: $data-table-header-color;
+
+      &.mdl-data-table__header--sorted-ascending,
+      &.mdl-data-table__header--sorted-descending {
+        color: $mdlext-light-data-table-header-sorted-color;
+
+        &:hover {
+          &::before {
+            color: $mdlext-light-data-table-header-sorted-icon-hover-color;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+// mdl/src/menu/_menu.scss
+// -----------------------------------
+.mdlext-light-color-theme {
+
+  .mdl-menu__outline {
+    background: $mdlext-light-default-dropdown-bg-color;
+  }
+
+  .mdl-menu__item {
+    color: $mdlext-light-default-item-text-color;
+    background-color: transparent;
+    outline-color: $mdlext-light-default-item-outline-color;
+
+    &--full-bleed-divider {
+      border-bottom-color: $mdlext-light-default-item-divider-color;
+    }
+
+    &[disabled],
+    &[data-mdl-disabled] {
+      color: $mdlext-light-disabled-item-text-color;
+      background-color: transparent;
+
+      &:hover {
+        background-color: transparent;
+      }
+
+      &:focus {
+        background-color: transparent;
+      }
+
+      & .mdl-ripple {
+        background: transparent;
+      }
+    }
+
+    &:hover {
+      background-color: $mdlext-light-default-item-hover-bg-color;
+    }
+
+    &:focus {
+      background-color: $mdlext-light-default-item-focus-bg-color;
+    }
+
+    &:active {
+      background-color: $mdlext-light-default-item-active-bg-color;
+    }
+  }
+}
+
+
+// mdl/src/card/_card.scss
+// ----------------------------------------
+.mdlext-light-color-theme {
+
+  .mdl-card {
+    background: $mdlext-light-card-background-color;
+  }
+
+  .mdl-card__media {
+    background-color: $mdlext-light-card-image-placeholder-color;
+  }
+
+  .mdl-card__title {
+    color: $mdlext-light-card-text-color;
+
+    &.mdl-card--border {
+      border-bottom-color: $mdlext-light-card-border-color;
+    }
+  }
+
+  .mdl-card__title-text {
+    color: inherit;
+  }
+
+  .mdl-card__subtitle-text {
+    color: $mdlext-light-card-subtitle-color;
+  }
+
+  .mdl-card__supporting-text {
+    color: $mdlext-light-card-supporting-text-text-color;
+  }
+
+  .mdl-card__actions {
+    background-color: rgba(0, 0, 0, 0);
+
+    &.mdl-card--border {
+      border-top-color: $mdlext-light-card-border-color;
+    }
+  }
+}
+
+
+// mdlext/src/selectfield/_selectfield.scss
+// ----------------------------------------
+.mdlext-light-color-theme {
+
+  .mdlext-selectfield.is-disabled::after {
+    color: $mdlext-light-input-text-disabled-color;
+    @include mdlext-arrow(bottom, $mdlext-selectfield-arrow-width, $mdlext-selectfield-arrow-length, $mdlext-light-input-text-disabled-color);
+  }
+
+  .mdlext-selectfield__select {
+    border-bottom-color: $mdlext-light-input-text-bottom-border-color;
+    color: inherit;
+
+    option {
+      background-color: $mdlext-light-content-background-color;
+      color: $mdlext-light-text-color-primary;
+    }
+  }
+  .mdlext-selectfield.is-invalid .mdlext-selectfield__select {
+    border-color: $mdlext-light-input-text-error-color;
+  }
+  fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__select,
+  .mdlext-selectfield.is-disabled .mdlext-selectfield__select {
+    background-color: transparent;
+    border-bottom-color: $mdlext-light-input-text-disabled-color;
+    color: $mdlext-light-input-text-disabled-text-color;
+  }
+
+  .mdlext-selectfield__label {
+    color: $mdlext-light-input-text-label-color;
+  }
+  fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__label,
+  .mdlext-selectfield.is-disabled.is-disabled .mdlext-selectfield__label {
+    color: $mdlext-light-input-text-disabled-text-color;
+  }
+  .mdlext-selectfield--floating-label.is-focused .mdlext-selectfield__label,
+  .mdlext-selectfield--floating-label.is-dirty .mdlext-selectfield__label,
+  .mdlext-selectfield--floating-label.is-dirty.is-dirty .mdlext-selectfield__label,
+  .mdlext-selectfield--floating-label.has-placeholder .mdlext-selectfield__label {
+    color: $mdlext-light-input-text-highlight-color;
+  }
+  .mdlext-selectfield--floating-label.is-invalid .mdlext-selectfield__label {
+    color: $mdlext-light-input-text-error-color;
+  }
+  .mdlext-selectfield__label::after {
+    background-color: $mdlext-light-input-text-highlight-color;
+  }
+  .mdlext-selectfield.is-invalid .mdlext-selectfield__label::after {
+    background-color: $mdlext-light-input-text-error-color;
+  }
+
+  .mdlext-selectfield__error {
+    color: $mdlext-light-input-text-error-color;
+  }
+}
+
+// mdlext/src/menu-button/_menu-button.scss
+// ----------------------------------------
+.mdlext-menu.mdlext-light-color-theme {
+  background: $mdlext-light-default-dropdown-bg-color;
+}
+
+.mdlext-light-color-theme {
+
+  .mdlext-menu {
+    background: $mdlext-light-default-dropdown-bg-color;
+
+    &__item {
+      color: $mdlext-light-default-item-text-color;
+      background-color: $mdlext-light-default-dropdown-bg-color;
+
+      &:active,
+      &[aria-selected='true'] {
+        background-color: $mdlext-light-default-item-active-bg-color;
+      }
+      &:hover:not([disabled]) {
+        background-color: $mdlext-light-default-item-hover-bg-color;
+      }
+      &:focus {
+        outline-color: $mdlext-light-default-item-outline-color;
+        background-color: $mdlext-light-default-item-focus-bg-color;
+      }
+      &[disabled] {
+        color: $mdlext-light-disabled-item-text-color;
+
+        > * {
+          color: $mdlext-light-disabled-item-text-color;
+        }
+      }
+    }
+    &__item-separator {
+      border-bottom: 1px solid $mdlext-light-default-item-divider-color;
+    }
+  }
+}
+
+
+// mdlext/src/bordered-fields/_bordered-fields.scss
+// -------------------------------------------------
+.mdlext-light-color-theme {
+
+  .mdlext-bordered-fields {
+
+    .mdl-textfield,
+    .mdlext-selectfield {
+
+      .mdl-textfield__input,
+      .mdlext-selectfield__select {
+        background-color: $mdlext-light-bordered-field-background-color;
+        border-color: $mdlext-light-bordered-field-border-color;
+        color: $mdlext-light-bordered-field-input-text-color;
+
+        &:disabled {
+          color: $mdlext-light-bordered-field-input-text-disabled-text-color;
+          background-color: $mdlext-light-bordered-field-disabled-background-color;
+          border-color: $mdlext-light-bordered-field-disabled-border-color;
+        }
+        &:focus {
+          background-color: $mdlext-light-bordered-field-focus-background-color;
+          border-color: $mdlext-light-bordered-field-focus-border-color;
+        }
+      }
+      &.is-invalid {
+        .mdl-textfield__input,
+        .mdlext-selectfield__select {
+          color: $mdlext-light-bordered-field-input-text-error-color;
+          border-color: $mdlext-light-bordered-field-error-border-color;
+          background-color: $mdlext-light-bordered-field-error-background-color;
+
+          &:focus {
+            border-color: $mdlext-light-bordered-field-error-focus-border-color;
+            background-color: $mdlext-light-bordered-field-error-focus-background-color;
+          }
+        }
+      }
+    }
+
+    fieldset[disabled] .mdlext-selectfield::after,
+    .mdlext-selectfield.is-disabled::after {
+      color: $mdlext-light-bordered-field-input-text-disabled-text-color;
+      @include mdlext-arrow(bottom, $mdlext-selectfield-arrow-width, $mdlext-selectfield-arrow-length, $mdlext-light-bordered-field-input-text-disabled-text-color);
+    }
+
+    fieldset[disabled] .mdl-textfield .mdl-textfield__input,
+    fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__select {
+      color: $mdlext-light-bordered-field-input-text-disabled-text-color;
+      background-color: $mdlext-light-bordered-field-disabled-background-color;
+      border-color: $mdlext-light-bordered-field-disabled-border-color;
+    }
+
+    .mdl-textfield,
+    .mdlext-selectfield {
+
+      .mdl-textfield__label,
+      .mdlext-selectfield__label {
+        color: $mdlext-light-bordered-field-input-text-label-color;
+      }
+      &.mdl-textfield--floating-label.is-focused.is-focused,
+      &.mdl-textfield--floating-label.is-dirty.is-dirty,
+      &.mdl-textfield--floating-label.has-placeholder,
+      &.mdlext-selectfield--floating-label.is-focused.is-focused,
+      &.mdlext-selectfield--floating-label.is-dirty.is-dirty,
+      &.mdlext-selectfield--floating-label.has-placeholder {
+
+        .mdl-textfield__label,
+        .mdlext-selectfield__label {
+          color: $mdlext-light-bordered-field-input-text-label-focus-color;
+        }
+      }
+      &.mdl-textfield--floating-label.is-disabled.is-disabled,
+      &.mdlext-selectfield--floating-label.is-disabled.is-disabled {
+
+        .mdl-textfield__label,
+        .mdlext-selectfield__label {
+          color: $mdlext-light-bordered-field-input-text-label-disabled-color;
+        }
+      }
+      &.mdl-textfield--floating-label.is-invalid.is-invalid,
+      &.mdlext-selectfield--floating-label.is-invalid.is-invalid {
+
+        .mdl-textfield__label,
+        .mdlext-selectfield__label {
+          color: $mdlext-light-bordered-field-input-text-label-error-color;
+        }
+      }
+    }
+
+    fieldset[disabled] .mdl-textfield .mdl-textfield__label,
+    fieldset[disabled] .mdl-selectfield .mdl-selectfield__label {
+      color: $mdlext-light-bordered-field-input-text-label-disabled-color;
+    }
+
+    // Icon(s) and/or button(s) inside textfield
+    .mdl-textfield,
+    .mdlext-selectfield {
+      &.is-disabled i,
+      &.is-disabled .mdl-button {
+        color: $mdlext-light-bordered-field-disabled-border-color;
+      }
+    }
+    fieldset[disabled] .mdl-textfield,
+    fieldset[disabled] .mdlext-selectfield {
+      i,
+      .mdl-button {
+        color: $mdlext-light-bordered-field-disabled-border-color;
+      }
+    }
+  }
+}
+
+
+// mdlext/src/accordion/_accordion.scss
+// ----------------------------------------
+.mdlext-light-color-theme {
+
+  .mdlext-accordion {
+
+    &__tab {
+      color: $mdlext-light-accordion-header-secondary-color;
+      background-color: $mdlext-light-accordion-header-background-color;
+
+      &:focus {
+        outline-color: $mdlext-light-accordion-header-focus-outline-color;
+      }
+      &[aria-expanded='true'] {
+        background-color: $mdlext-light-accordion-header-background-open-color;
+      }
+      &[aria-selected='true'] {
+        background-color: $mdlext-light-accordion-header-background-active-color;
+      }
+      &[disabled] {
+        background-color: $mdlext-light-accordion-header-disabled-color;
+        color: $mdlext-light-accordion-header-secondary-color-disabled;
+        pointer-events: none;
+
+        > * {
+          color: $mdlext-light-accordion-header-secondary-color-disabled;
+        }
+      }
+      &:hover:not([disabled]) {
+        background-color: $mdlext-light-accordion-header-background-hover-color;
+      }
+      &--ripple {
+        &[aria-selected='true']::before {
+          background: $mdlext-light-accordion-ripple-color;
+        }
+      }
+    }
+
+    &__tabpanel {
+      color: $mdlext-light-accordion-content-color;
+      background-color: $mdlext-light-accordion-content-background-color;
+    }
+  }
+
+  // Vertical layout
+  .mdlext-accordion {
+
+    &--vertical {
+
+      .mdlext-accordion__tab {
+        border-top: 1px solid $mdlext-light-accordion-header-border-color;
+
+        &[aria-selected='true']::after {
+          background-color: $mdlext-light-accordion-header-highlight-color;
+        }
+      }
+      .mdlext-accordion__tabpanel {
+        border-top: 1px solid $mdlext-light-accordion-header-border-color;
+      }
+    }
+  }
+
+  // Horizontal layout
+  .mdlext-accordion {
+
+    &--horizontal {
+
+      .mdlext-accordion__tab {
+        border-left: 1px solid $mdlext-light-accordion-header-border-color;
+
+        &[aria-selected='true']::after {
+          background-color: $mdlext-light-accordion-header-highlight-color;
+        }
+      }
+      .mdlext-accordion__tabpanel {
+        border-left: 1px solid $mdlext-light-accordion-header-border-color;
+      }
+    }
+  }
+
+  .mdlext-accordion {
+
+    &__panel:first-child > &__tab {
+      // Use container to set outer borders
+      border-top-color: transparent;
+      border-left-color: transparent;
+    }
+  }
+
+  // Making accordion appear disabled.
+  // Note: does not prevent tabbing into a disabled accordion
+  .mdlext-accordion[disabled] {
+    .mdlext-accordion__tab {
+      background-color: $mdlext-light-accordion-header-disabled-color;
+      color: $mdlext-light-accordion-header-secondary-color-disabled;
+
+      > * {
+        color: $mdlext-light-accordion-header-secondary-color-disabled;
+      }
+    }
+    .mdlext-accordion__tabpanel {
+      opacity: 0.8;
+      filter: blur(1px) grayscale(80%);
+    }
+  }
+}
diff --git a/node_modules/mdl-ext/src/color-themes/readme.md b/node_modules/mdl-ext/src/color-themes/readme.md
new file mode 100644
index 0000000..6266567
--- /dev/null
+++ b/node_modules/mdl-ext/src/color-themes/readme.md
@@ -0,0 +1,104 @@
+# Color Themes
+![Color Themes](../../etc/palette.png)
+
+The **color-themes** component demonstrates how you can create your own themes of 
+[material design colors](https://www.google.com/design/spec/style/color.html).
+
+## Introduction
+Material Design Lite provides only one color theme, but in many web designs more than one theme is required, e.g. a 
+dark theme and a light theme. This component provides the necessary SASS files to use two additional color themes in MDL.
+
+### To include a MDLEXT color theme component:
+&nbsp;1. Code a block element, as the "outer" container, intended to hold all of the color theme.
+```html
+<section>
+</section>
+```
+
+&nbsp;2. Add one of the `mdlext-light-color-theme` or `mdlext-dark-color-theme` classes to the block element using the `class` attribute.
+```html
+<section class="mdlext-light-color-theme">
+</section>
+```
+
+&nbsp;3. Add the MDL components that shuld be rendered with the spesified color theme.
+```html
+<section class="mdlext-light-color-theme">
+  <div class="mdl-card mdl-shadow--2dp">
+    <header class="mdl-card__title mdl-color--primary mdl-color-text--primary-contrast">
+      <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+        <i class="material-icons">view_headline</i>
+      </button>
+      <h2 class="mdl-card__title-text">A card with a Color Theme</h2>
+      <div class="mdl-layout-spacer"></div>
+      <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+        <i class="material-icons">share</i>
+      </button>
+    </header>
+    <div class="mdl-card__supporting-text">
+      Some supporting text ...
+    </div>
+    <footer class="mdl-card__actions mdl-card--border">
+      <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+        Read more
+      </a>
+      <div class="mdl-layout-spacer"></div>
+      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+    </footer>
+  </div>
+  <p>More content ...</p>
+</section>  
+```
+
+### Create your own color theme
+Creating your own color theme is simple. For each of the themes, light or dark, you must modify six SASS variables. 
+The variables defines the primary and accent colors for the theme, and their corresponding contrast colors. 
+
+Start by picking some sensible primary and accent colors from the 
+[material color plaette](https://www.google.com/design/spec/style/color.html#color-color-palette) - or use one of the
+web based platte generators as an aid. The [material palette](http://www.materialpalette.com/) is used for this example.
+ 
+Pick a primary and an accent color from the [material palette](http://www.materialpalette.com/), e.g. grey/yellow.
+Download the SASS version of the palette and translate the variables to the MDLEXT color theme.
+
+The downloaded material palette SASS variables:
+```sass
+$primary-color-dark:   #616161
+$primary-color:        #9E9E9E
+$primary-color-light:  #F5F5F5
+$primary-color-text:   #212121
+$accent-color:         #FFEB3B
+$primary-text-color:   #212121
+$secondary-text-color: #727272
+$divider-color:        #B6B6B6
+```
+
+Open the MDLEXT [color-themes](./_color-themes.scss) SASS file and translate material palette variables to MDLEXT color theme:
+```sass
+$mdlext-light-color-primary:          #9E9E9E;
+$mdlext-light-color-primary-dark:     #616161;
+$mdlext-light-color-primary-light:    #9E9E9E; // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-light-color-primary-contrast: #F5F5F5;  
+$mdlext-light-color-accent:           #FFEB3B; 
+$mdlext-light-color-accent-light:     #FFEB3B; // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-light-color-accent-contrast:  #FFFFFF;
+```
+
+Save the modified variables to your own SASS project, recompile and try out your new theme.
+
+There are a few more SASS variables you can modify - and they should be relativeley self explanatory. By default these 
+values are set in accordance with the guidance given in the 
+[material design colors](https://www.google.com/design/spec/style/color.html) guide.
+
+#### Examples
+See the [example code](./snippets/color-themes.html).
+
+## Configuration options
+
+The MDLEXT CSS classes apply various predefined visual and behavioral enhancements to MDL components. 
+The table below lists the available classes and their effects.
+
+| MDLEXT class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdlext-light-color-theme` | Defines container as an MDLEXT light color theme component | Required on an "outer" block element|
+| `mdlext-dark-color-theme` | Defines container as an MDLEXT dark coolor theme component | Required on an "outer" block element|
diff --git a/node_modules/mdl-ext/src/color-themes/snippets/color-themes.html b/node_modules/mdl-ext/src/color-themes/snippets/color-themes.html
new file mode 100644
index 0000000..1dc8ae5
--- /dev/null
+++ b/node_modules/mdl-ext/src/color-themes/snippets/color-themes.html
@@ -0,0 +1,2769 @@
+<style>
+  .demo-theme-container {
+    margin: 0 auto 32px;
+    /*max-width: 800px;*/
+  }
+
+  .demo-theme-container table.info,
+  .demo-card-grid table.info {
+    width: 100%
+  }
+  .demo-theme-container table.info th,
+  .demo-card-grid table.info th {
+    padding-right: 40px;
+    vertical-align: middle;
+    text-align: left;
+    width: 30%;
+  }
+  .demo-theme-container section,
+  .demo-card-grid section {
+    margin: 0 16px;
+  }
+
+  .demo-badge-grid {
+  }
+  .demo-badge-grid .mdl-cell {
+    text-align: center;
+  }
+  .demo-badge-grid .mdl-cell p {
+    margin-top: 32px;
+  }
+
+  .demo-button-grid {
+  }
+  .demo-button-grid .mdl-cell {
+    text-align: center;
+    padding: 12px 4px;
+  }
+
+  .demo-toggle-grid {
+  }
+  .demo-toggle-grid .mdl-cell p {
+    margin-top: 16px;
+  }
+
+  .demo-slider-grid  {
+  }
+  .demo-slider-grid p {
+    margin-top: 16px;
+  }
+
+  .textfield-demo-container {
+  }
+
+  .textfield-demo-container .mdl-cell {
+    padding: 0 4px 8px 0;
+  }
+
+  .textfield-demo-container .mdl-cell p {
+    margin-bottom: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+
+  .demo-menu {
+    padding-top: 16px;
+    max-width: 300px;
+  }
+  .demo-menu-container {
+    position: relative;
+    width: 100%;
+  }
+  .demo-menu-bar {
+    box-sizing: border-box;
+    height: 64px;
+    width: 100%;
+    padding: 16px;
+  }
+  .demo-menu-background-light {
+    background: white;
+    height: 148px;
+    width: 100%;
+  }
+  .demo-menu-background-dark {
+    background: #212121;
+    height: 148px;
+    width: 100%;
+  }
+
+
+  .mdl-card {
+    width: auto;
+  }
+  .mdl-card__media {
+    margin: 0;
+    text-align: center;
+  }
+  .mdl-card__media > img {
+    max-width: 100%;
+    height: auto;
+  }
+  .mdl-card__supporting-text {
+    width: auto;
+  }
+  .mdl-card__actions {
+    display: flex;
+  }
+
+
+  .borderedfield-demo-container .mdl-cell {
+    padding: 0 4px 8px 0;
+  }
+
+  .borderedfield-demo-container .mdl-cell p {
+    margin-bottom: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  /* File input example */
+  .mdl-button--file input {
+    cursor: pointer;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+  }
+
+</style>
+
+
+<datalist id="languages">
+  <option value="HTML">
+  <option value="CSS">
+  <option value="JavaScript">
+  <option value="Java">
+  <option value="Ruby">
+  <option value="PHP">
+  <option value="Go">
+  <option value="Erlang">
+  <option value="Python">
+  <option value="C">
+  <option value="C#">
+  <option value="C++">
+</datalist>
+
+
+<div class="mdl-grid demo-card-grid" style="margin-bottom: 32px;">
+
+  <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdlext-light-color-theme">
+    <div class="mdl-card mdl-shadow--2dp">
+      <header class="mdl-card__title mdl-color--primary mdl-color-text--primary-contrast">
+        <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+          <i class="material-icons">view_headline</i>
+        </button>
+        <h2 class="mdl-card__title-text">Light Theme</h2>
+        <div class="mdl-layout-spacer"></div>
+        <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+          <i class="material-icons">share</i>
+        </button>
+      </header>
+      <figure class="mdl-card__media">
+        <img src="./images/_DSC7535-2.jpg" alt="">
+      </figure>
+      <section style="margin-top:16px">
+        <table class="info">
+          <tr>
+            <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+            <td class="mdl-color--primary-dark mdl-color-text--primary-contrast">primary dark</td>
+          </tr>
+          <tr>
+            <th class="mdl-typography--caption-color-contrast">primary</th>
+            <td class="mdl-color--primary mdl-color-text--primary-contrast">primary</td>
+          </tr>
+          <tr>
+            <th class="mdl-typography--caption-color-contrast">accent</th>
+            <td class="mdl-color--accent mdl-color-text--accent-contrast">accent</td>
+          </tr>
+          <tr>
+            <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+            <td class="mdl-color--primary-contrast mdl-color-text--primary-dark">primary dark, inverted</td>
+          </tr>
+          <tr>
+            <th class="mdl-typography--caption-color-contrast">primary</th>
+            <td class="mdl-color--primary-contrast mdl-color-text--primary">primary, inverted</td>
+          </tr>
+          <tr>
+            <th class="mdl-typography--caption-color-contrast">accent</th>
+            <td class="mdl-color--accent-contrast mdl-color-text--accent">accent, inverted</td>
+          </tr>
+        </table>
+      </section>
+
+      <div class="mdl-card__supporting-text">
+        Card Supporting Text
+      </div>
+
+      <footer class="mdl-card__actions mdl-card--border">
+        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+          Read more
+        </a>
+        <div class="mdl-layout-spacer"></div>
+        <button class="mdl-button mdl-button--icon"><i class="material-icons">radio</i></button>
+        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+      </footer>
+    </div>
+
+  </div>
+
+
+  <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdlext-dark-color-theme">
+
+    <div class="mdl-card mdl-shadow--2dp">
+      <header class="mdl-card__title mdl-color--primary mdl-color-text--primary-contrast">
+        <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+          <i class="material-icons">view_headline</i>
+        </button>
+        <h2 class="mdl-card__title-text">Dark Theme</h2>
+        <div class="mdl-layout-spacer"></div>
+        <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+          <i class="material-icons">share</i>
+        </button>
+      </header>
+      <figure class="mdl-card__media">
+        <img src="./images/_DSC7535-2.jpg" alt="">
+      </figure>
+      <section style="margin-top:16px">
+        <table class="info">
+          <tr>
+            <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+            <td class="mdl-color--primary-dark mdl-color-text--primary-contrast">primary dark</td>
+          </tr>
+          <tr>
+            <th class="mdl-typography--caption-color-contrast">primary</th>
+            <td class="mdl-color--primary mdl-color-text--primary-contrast">primary</td>
+          </tr>
+          <tr>
+            <th class="mdl-typography--caption-color-contrast">accent</th>
+            <td class="mdl-color--accent mdl-color-text--accent-contrast">accent</td>
+          </tr>
+          <tr>
+            <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+            <td class="mdl-color--primary-contrast mdl-color-text--primary-dark">primary dark, inverted</td>
+          </tr>
+          <tr>
+            <th class="mdl-typography--caption-color-contrast">primary</th>
+            <td class="mdl-color--primary-contrast mdl-color-text--primary">primary, inverted</td>
+          </tr>
+          <tr>
+            <th class="mdl-typography--caption-color-contrast">accent</th>
+            <td class="mdl-color--accent-contrast mdl-color-text--accent">accent, inverted</td>
+          </tr>
+        </table>
+      </section>
+
+      <div class="mdl-card__supporting-text">
+        Card Supporting Text
+      </div>
+
+      <footer class="mdl-card__actions mdl-card--border">
+        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+          Read more
+        </a>
+        <div class="mdl-layout-spacer"></div>
+        <button class="mdl-button mdl-button--icon"><i class="material-icons">radio</i></button>
+        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+      </footer>
+    </div>
+
+  </div>
+
+</div>
+
+
+
+
+<h2>Light Color Theme</h2>
+
+<div class="demo-theme-container mdlext-light-color-theme">
+
+  <section>
+    <table class="info">
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">.mdl-typography--</th>
+        <td class="mdl-typography--title">Scale &amp; Basic Styles</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">display-4</th>
+        <td class="mdl-typography--display-4">Light 112px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">display-3</th>
+        <td class="mdl-typography--display-3">Regular 56px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">display-2</th>
+        <td class="mdl-typography--display-2">Regular 45px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">display-1</th>
+        <td class="mdl-typography--display-1">Regular 34px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">headline</th>
+        <td class="mdl-typography--headline">Regular 24px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">title</th>
+        <td class="mdl-typography--title">Medium 20px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">subhead</th>
+        <td class="mdl-typography--subhead">Regular 16px (Device), Regular 15px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">body-2</th>
+        <td class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">body-1</th>
+        <td class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">body-2-force-preferred-font</th>
+        <td class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">body-1-force-preferred-font</th>
+        <td class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">caption</th>
+        <td class="mdl-typography--caption">Regular 12px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">menu</th>
+        <td class="mdl-typography--menu">Medium 14px (Device), Medium 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">button</th>
+        <td class="mdl-typography--button">Medium (All Caps) 14px</td>
+      </tr>
+
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+        <td class="mdl-color--primary-dark mdl-color-text--primary-contrast">mdl-color--primary-dark mdl-color-text--primary-contrast</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">primary</th>
+        <td class="mdl-color--primary mdl-color-text--primary-contrast">mdl-color--primary mdl-color-text--primary-contrast</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">accent</th>
+        <td class="mdl-color--accent mdl-color-text--accent-contrast">mdl-color--accent mdl-color-text--accent-contrast</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+        <td class="mdl-color--primary-contrast mdl-color-text--primary-dark">mdl-color--primary-contrast mdl-color-text--primary-dark</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">primary</th>
+        <td class="mdl-color--primary-contrast mdl-color-text--primary">mdl-color-text--primary</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">accent</th>
+        <td class="mdl-color--accent-contrast mdl-color-text--accent">mdl-color--accent-contrast mdl-color-text--accent</td>
+      </tr>
+    </table>
+  </section>
+
+  <section>
+    <h1>Base font</h1>
+
+    <p>Material Design Lite start’s with a base font of</p>
+    <ul>
+      <li>A size of 14px</li>
+      <li>A weight of 400</li>
+      <li>A line height of 20px</li>
+    </ul>
+
+    <p class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</p>
+    <p class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</p>
+    <p class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</p>
+    <p class="mdl-typography--body-2-color-contrast">Body with color contrast</p>
+    <p class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</p>
+    <p><a href="#" onclick="return false">An anchor</a></p>
+
+    <h1>Headings</h1>
+    <h1>h1 (56px) <small>Subtitle</small></h1>
+    <h2>h2 (45px) <small>Subtitle</small></h2>
+    <h3>h3 (34px) <small>Subtitle</small></h3>
+    <h4>h4 (24px) <small>Subtitle</small></h4>
+    <h5>h5 (20px) <small>Subtitle</small></h5>
+    <h6>h6 (16px) <small>Subtitle</small></h6>
+  </section>
+
+
+  <!-- textfields -->
+  <section class = "textfield-demo-container">
+
+    <div class="mdl-grid mdl-grid--no-spacing">
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield">
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+          <label class="mdl-textfield__label">Number...</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" list="languages" placeholder="Select a programming language" required>
+          <label class="mdl-textfield__label">Programming Language</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+          <label class="mdl-textfield__label">Number...</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" disabled value="123">
+          <label class="mdl-textfield__label">Number...</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label">
+          <label class="mdl-button mdl-js-button mdl-button--icon" for="mdl-expandable-demo3">
+            <i class="material-icons">search</i>
+          </label>
+          <div class="mdl-textfield__expandable-holder">
+            <input class="mdl-textfield__input" type="text" name="q" value="" id="mdl-expandable-demo3" pattern=".{3,}" />
+            <label class="mdl-textfield__label" for="mdl-expandable-demo1">Expandable Input</label>
+          </div>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--8-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--full-width mdl-textfield--floating-label">
+          <textarea class="mdl-textfield__input" rows= "3"></textarea>
+          <label class="mdl-textfield__label">Text lines...</label>
+        </div>
+      </div>
+
+    </div>
+
+  </section>
+
+
+  <!-- Selectfield -->
+  <section style="margin-bottom: 16px;">
+    <div class="mdl-grid mdl-grid--no-spacing">
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield">
+          <select class="mdlext-selectfield__select">
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+          <select class="mdlext-selectfield__select">
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+          <select class="mdlext-selectfield__select" disabled>
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+    </div>
+  </section>
+
+
+  <!-- bordered fields -->
+  <section class="mdlext-bordered-fields" style="margin-top:16px;">
+
+    <div class="mdl-grid mdl-grid--no-spacing">
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" list="languages" placeholder="Select a language" required>
+          <label class="mdl-textfield__label">Programming language</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+          <label class="mdl-textfield__label">Numeric with floating label</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" disabled value="123">
+          <label class="mdl-textfield__label" >Disabled floating label</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right ">
+          <input class="mdl-textfield__input" type="text" id="uploadfile12" readonly>
+          <label class="mdl-textfield__label">File (work in progress)</label>
+
+          <label class="mdl-button mdl-js-button mdl-button--primary mdl-button--icon mdl-button--file" for="uploadfile12">
+            <i class="material-icons">attach_file</i>
+            <input type="file" id="uploadBtn12">
+          </label>
+        </div>
+        <!--
+          // Need a script to work properly - something like this
+        -->
+        <script>
+          (function() {
+            'use strict';
+            document.querySelector('#uploadBtn12').addEventListener('change', function() {
+              var n = document.querySelector("#uploadfile12");
+              n.value = this.files[0].name;
+              n.parentNode.classList.add('is-dirty');
+            });
+          }());
+        </script>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+          <i class="material-icons">radio</i>
+          <input class="mdl-textfield__input" type="text" disabled>
+          <label class="mdl-textfield__label">Text, disabled</label>
+          <i class="material-icons">fingerprint</i>
+        </div>
+      </div>
+
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left">
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">phone</i>
+          </label>
+
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right">
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">settings_voice</i>
+          </label>
+        </div>
+      </div>
+
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+          <select class="mdlext-selectfield__select">
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+          <select class="mdlext-selectfield__select" disabled>
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label mdlext-bordered-fields__icon-left">
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">phone</i>
+          </label>
+          <select class="mdlext-selectfield__select">
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label mdlext-bordered-fields__icon-left">
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">phone</i>
+          </label>
+          <select class="mdlext-selectfield__select" disabled>
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left">
+          <i class="material-icons">radio</i>
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right">
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+          <i class="material-icons">fingerprint</i>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+          <i class="material-icons">radio</i>
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+          <i class="material-icons">fingerprint</i>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">phone</i>
+          </label>
+
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">settings_voice</i>
+          </label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">phone</i>
+          </label>
+
+          <input class="mdl-textfield__input" type="text" disabled>
+          <label class="mdl-textfield__label">Text...</label>
+
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">settings_voice</i>
+          </label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+          <i class="material-icons">radio</i>
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">settings_voice</i>
+          </label>
+        </div>
+      </div>
+
+    </div>
+
+    <fieldset disabled>
+      <legend>Disabled fieldset</legend>
+      <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+        <select class="mdlext-selectfield__select">
+          <option value=""></option>
+          <option value="option1">option 1</option>
+          <option value="option2">option 2</option>
+          <option value="option3">option 3</option>
+          <option value="option4">option 4</option>
+          <option value="option5">option 5</option>
+          <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option>
+        </select>
+        <label class="mdlext-selectfield__label">Profession</label>
+      </div>
+
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+        <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+        <label class="mdl-textfield__label">Number...</label>
+        <span class="mdl-textfield__error">Input is not a number!</span>
+      </div>
+
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+        <i class="material-icons">radio</i>
+        <input class="mdl-textfield__input" type="text">
+        <label class="mdl-textfield__label">Text...</label>
+        <label class="mdl-button mdl-js-button mdl-button--icon">
+          <i class="material-icons">settings_voice</i>
+        </label>
+      </div>
+    </fieldset>
+
+  </section>
+
+
+  <!-- Badges -->
+  <section style="margin-top:16px">
+    <div class="mdl-grid demo-badge-grid">
+      <div class="mdl-cell mdl-cell--2-col">
+        <span class="mdl-badge" data-badge="4">Inbox</span>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <span class="material-icons mdl-badge" data-badge="1">account_box</span>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <span class="mdl-badge" data-badge="♥">Mood</span>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <span class="material-icons mdl-badge" data-badge="♥">account_box</span>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <a href="#" onclick="return false" class="mdl-badge" data-badge="5">Inbox</a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Buttons -->
+  <section>
+    <div class="mdl-grid demo-button-grid">
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab">
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab" disabled>
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab" disabled>
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised">
+          Raised
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised" disabled>
+          Disabled
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+          Colored
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
+          Accent
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
+          <i class="material-icons">settings</i>&nbsp;Settings
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect animated bounce">
+          <i class="material-icons">favorite</i>&nbsp;Fav
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button">
+          Flat
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button" disabled>
+          Disabled
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--primary">
+          Colored
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--accent">
+          Accent
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button">
+          <i class="material-icons">snooze</i>&nbsp;Ring, ring...
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--icon">
+          <i class="material-icons">mood</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
+          <i class="material-icons">mood</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab mdl-color--lime mdl-button--accent">
+          <i class="material-icons">cloud</i>
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised mdl-color--deep-orange-100 mdl-js-ripple-effect">
+          <i class="material-icons">settings</i>&nbsp;Settings
+        </button>
+      </div>
+    </div>
+  </section>
+
+
+  <!-- Toggles -->
+  <section>
+    <div class="mdl-grid demo-toggle-grid">
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-checkbox__input" checked>
+          <span class="mdl-checkbox__label">Checkbox</span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-checkbox__input">
+          <span class="mdl-checkbox__label">Checkbox</span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-checkbox__input" checked disabled>
+          <span class="mdl-checkbox__label">Checkbox</span>
+        </label>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+          <input type="radio" class="mdl-radio__button" name="options30" value="1" checked>
+          <span class="mdl-radio__label">First</span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+          <input type="radio" class="mdl-radio__button" name="options30" value="2">
+          <span class="mdl-radio__label">Second</span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+          <input type="radio" class="mdl-radio__button" name="options30" value="3" disabled>
+          <span class="mdl-radio__label">Third</span>
+        </label>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-icon-toggle__input" checked>
+          <i class="mdl-icon-toggle__label material-icons">format_bold</i>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-icon-toggle__input">
+          <i class="mdl-icon-toggle__label material-icons">format_italic</i>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-icon-toggle__input" disabled>
+          <i class="mdl-icon-toggle__label material-icons">format_italic</i>
+        </label>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-switch__input" checked>
+          <span class="mdl-switch__label"></span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-switch__input">
+          <span class="mdl-switch__label"></span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-switch__input" disabled>
+          <span class="mdl-switch__label"></span>
+        </label>
+      </div>
+    </div>
+  </section>
+
+
+  <!-- Sliders -->
+  <section>
+    <div class="mdl-grid demo-slider-grid">
+      <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-phone">
+        <!-- Default Slider -->
+        <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0">
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-phone">
+        <!-- Slider with Starting Value -->
+        <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="25">
+      </div>
+    </div>
+  </section>
+
+
+  <!-- Data table -->
+  <section>
+    <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
+      <thead>
+      <tr>
+        <th class="mdl-data-table__cell--non-numeric">Materials</th>
+        <th>Quantity</th>
+        <th>Unit price</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
+        <td>25</td>
+        <td>$2.90</td>
+      </tr>
+      <tr>
+        <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
+        <td>50</td>
+        <td>$1.25</td>
+      </tr>
+      <tr>
+        <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
+        <td>10</td>
+        <td>$2.35</td>
+      </tr>
+      </tbody>
+    </table>
+  </section>
+
+
+  <!-- Menu -->
+  <!--
+  <section>
+    <div class="demo-menu demo-menu__lower-left">
+      <div class="demo-menu-container mdl-shadow--2dp mdl-color--primary-dark mdl-color-text--primary-contrast">
+        <div class="demo-menu-bar">
+          <button id="demo-menu-lower-left-30" class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">more_vert</i>
+          </button>
+          <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-left-30">
+            <li class="mdl-menu__item">Some Action</li>
+            <li class="mdl-menu__item">Another Action</li>
+            <li disabled class="mdl-menu__item">Disabled Action</li>
+            <li class="mdl-menu__item">Yet Another Action</li>
+          </ul>
+
+          <span>Menu lower left</span>
+
+        </div>
+        <div class="demo-menu-background-light"></div>
+      </div>
+    </div>
+  </section>
+  -->
+
+  <!-- Menu button -->
+  <section style="padding-bottom:16px">
+    <h4>Menu button</h4>
+
+    <button class="mdl-button mdl-button--raised mdl-js-ripple-effect mdl-js-button mdlext-js-menu-button">
+      <i class="material-icons">gesture</i>
+      <span class="mdlext-menu-button__caption">Select</span>
+      <i class="material-icons mdlext-aria-expanded-more-less"></i>
+    </button>
+    <ul class="mdlext-menu mdlext-light-color-theme" hidden >
+      <li class="mdlext-menu__item">
+        <i class="material-icons md-18">info</i>
+        <span class="mdlext-menu__item__caption">Menu item #1</span>
+      </li>
+      <li class="mdlext-menu__item">
+        <i class="material-icons md-18">help_outline</i>
+        <span class="mdlext-menu__item__caption">Menu item #2. A long text to check ellipsis overflow 0123456789</span>
+        <i class="material-icons md-18">radio</i>
+      </li>
+      <li class="mdlext-menu__item-separator"></li>
+      <li class="mdlext-menu__item" disabled>
+        <span class="mdlext-menu__item__caption">Menu item #3, disabled</span>
+        <i class="material-icons md-18">accessibility</i>
+      </li>
+      <li class="mdlext-menu__item-separator"></li>
+      <li class="mdlext-menu__item">
+        <span class="mdlext-menu__item__caption">Menu item #IV</span>
+        <i class="material-icons md-18">build</i>
+      </li>
+      <li class="mdlext-menu__item">
+        <span class="mdlext-menu__item__caption">Menu item #V</span>
+        <i class="material-icons md-18">build</i>
+      </li>
+      <li class="mdlext-menu__item-separator"></li>
+      <li class="mdlext-menu__item">
+        <span class="mdlext-menu__item__caption">Menu item #VI</span>
+        <i class="material-icons md-18">build</i>
+      </li>
+      <li class="mdlext-menu__item">
+        <span class="mdlext-menu__item__caption">Menu item #VII</span>
+        <i class="material-icons md-18">build</i>
+      </li>
+      <li class="mdlext-menu__item">
+        Menu item #n
+      </li>
+    </ul>
+  </section>
+
+</div>
+
+
+
+<!-- Dark theme -->
+<h2>Dark Color Theme</h2>
+
+
+<div class="demo-theme-container mdlext-dark-color-theme">
+
+  <section>
+    <table class="info">
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">.mdl-typography--</th>
+        <td class="mdl-typography--title">Scale &amp; Basic Styles</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">display-4</th>
+        <td class="mdl-typography--display-4">Light 112px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">display-3</th>
+        <td class="mdl-typography--display-3">Regular 56px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">display-2</th>
+        <td class="mdl-typography--display-2">Regular 45px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">display-1</th>
+        <td class="mdl-typography--display-1">Regular 34px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">headline</th>
+        <td class="mdl-typography--headline">Regular 24px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">title</th>
+        <td class="mdl-typography--title">Medium 20px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">subhead</th>
+        <td class="mdl-typography--subhead">Regular 16px (Device), Regular 15px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">body-2</th>
+        <td class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">body-1</th>
+        <td class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">body-2-force-preferred-font</th>
+        <td class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">body-1-force-preferred-font</th>
+        <td class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">caption</th>
+        <td class="mdl-typography--caption">Regular 12px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">menu</th>
+        <td class="mdl-typography--menu">Medium 14px (Device), Medium 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">button</th>
+        <td class="mdl-typography--button">Medium (All Caps) 14px</td>
+      </tr>
+
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+        <td class="mdl-color--primary-dark mdl-color-text--primary-contrast">mdl-color--primary-dark mdl-color-text--primary-contrast</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">primary</th>
+        <td class="mdl-color--primary mdl-color-text--primary-contrast">mdl-color--primary mdl-color-text--primary-contrast</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">accent</th>
+        <td class="mdl-color--accent mdl-color-text--accent-contrast">mdl-color--accent mdl-color-text--accent-contrast</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+        <td class="mdl-color--primary-contrast mdl-color-text--primary-dark">mdl-color--primary-contrast mdl-color-text--primary-dark</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">primary</th>
+        <td class="mdl-color--primary-contrast mdl-color-text--primary">mdl-color-text--primary</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">accent</th>
+        <td class="mdl-color--accent-contrast mdl-color-text--accent">mdl-color--accent-contrast mdl-color-text--accent</td>
+      </tr>
+    </table>
+  </section>
+
+  <section>
+    <h1>Base font</h1>
+
+    <p>Material Design Lite start’s with a base font of</p>
+    <ul>
+      <li>A size of 14px</li>
+      <li>A weight of 400</li>
+      <li>A line height of 20px</li>
+    </ul>
+
+    <p class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</p>
+    <p class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</p>
+    <p class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</p>
+    <p class="mdl-typography--body-2-color-contrast">Body with color contrast</p>
+    <p class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</p>
+    <p><a href="#" onclick="return false">An anchor</a></p>
+
+    <h1>Headings</h1>
+    <h1>h1 (56px) <small>Subtitle</small></h1>
+    <h2>h2 (45px) <small>Subtitle</small></h2>
+    <h3>h3 (34px) <small>Subtitle</small></h3>
+    <h4>h4 (24px) <small>Subtitle</small></h4>
+    <h5>h5 (20px) <small>Subtitle</small></h5>
+    <h6>h6 (16px) <small>Subtitle</small></h6>
+  </section>
+
+
+  <!-- textfields -->
+  <section class = "textfield-demo-container">
+
+    <div class="mdl-grid mdl-grid--no-spacing">
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield">
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+          <label class="mdl-textfield__label">Number...</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" list="languages" placeholder="Select a programming language" required>
+          <label class="mdl-textfield__label">Programming Language</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+          <label class="mdl-textfield__label">Number...</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" disabled value="123">
+          <label class="mdl-textfield__label">Number...</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label">
+          <label class="mdl-button mdl-js-button mdl-button--icon" for="mdl-expandable-demo2">
+            <i class="material-icons">search</i>
+          </label>
+          <div class="mdl-textfield__expandable-holder">
+            <input class="mdl-textfield__input" type="text" name="q" value="" id="mdl-expandable-demo2" pattern=".{3,}" />
+            <label class="mdl-textfield__label" for="mdl-expandable-demo2">Expandable Input</label>
+          </div>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--8-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--full-width mdl-textfield--floating-label">
+          <textarea class="mdl-textfield__input" rows= "3" ></textarea>
+          <label class="mdl-textfield__label">Text lines...</label>
+        </div>
+      </div>
+
+    </div>
+
+  </section>
+
+
+
+  <!-- Selectfield -->
+  <section style="margin-bottom: 16px;">
+    <div class="mdl-grid mdl-grid--no-spacing">
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield">
+          <select class="mdlext-selectfield__select" name="mdl-professsion3">
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+          <select class="mdlext-selectfield__select" name="mdl-professsion20">
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+          <select class="mdlext-selectfield__select" name="mdl-professsion22" disabled>
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+    </div>
+  </section>
+
+
+
+  <!-- bordered fields -->
+  <section class="mdlext-bordered-fields" style="margin-top:16px;">
+
+    <div class="mdl-grid mdl-grid--no-spacing">
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" list="languages" placeholder="Select a language" required>
+          <label class="mdl-textfield__label">Programming language</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+          <label class="mdl-textfield__label">Numeric with floating label</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" disabled value="123">
+          <label class="mdl-textfield__label" >Disabled floating label</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right ">
+          <input class="mdl-textfield__input" type="text" id="uploadfile22" readonly>
+          <label class="mdl-textfield__label">File (work in progress)</label>
+
+          <label class="mdl-button mdl-js-button mdl-button--primary mdl-button--icon mdl-button--file" for="uploadfile22">
+            <i class="material-icons">attach_file</i>
+            <input type="file" id="uploadBtn22">
+          </label>
+        </div>
+        <!--
+          // Need a script to work properly - something like this
+        -->
+        <script>
+          (function() {
+            'use strict';
+            document.querySelector('#uploadBtn22').addEventListener('change', function() {
+              var n = document.querySelector("#uploadfile22");
+              n.value = this.files[0].name;
+              n.parentNode.classList.add('is-dirty');
+            });
+          }());
+        </script>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+          <i class="material-icons">radio</i>
+          <input class="mdl-textfield__input" type="text" disabled>
+          <label class="mdl-textfield__label">Text, disabled</label>
+          <i class="material-icons">fingerprint</i>
+        </div>
+      </div>
+
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left">
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">phone</i>
+          </label>
+
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right">
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">settings_voice</i>
+          </label>
+        </div>
+      </div>
+
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+          <select class="mdlext-selectfield__select">
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+          <select class="mdlext-selectfield__select" disabled>
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label mdlext-bordered-fields__icon-left">
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">phone</i>
+          </label>
+          <select class="mdlext-selectfield__select">
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label mdlext-bordered-fields__icon-left">
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">phone</i>
+          </label>
+          <select class="mdlext-selectfield__select" disabled>
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left">
+          <i class="material-icons">radio</i>
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right">
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+          <i class="material-icons">fingerprint</i>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+          <i class="material-icons">radio</i>
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+          <i class="material-icons">fingerprint</i>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">phone</i>
+          </label>
+
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">settings_voice</i>
+          </label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">phone</i>
+          </label>
+
+          <input class="mdl-textfield__input" type="text" disabled>
+          <label class="mdl-textfield__label">Text...</label>
+
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">settings_voice</i>
+          </label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+          <i class="material-icons">radio</i>
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">settings_voice</i>
+          </label>
+        </div>
+      </div>
+
+    </div>
+
+    <fieldset disabled>
+      <legend>Disabled fieldset</legend>
+      <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+        <select class="mdlext-selectfield__select">
+          <option value=""></option>
+          <option value="option1">option 1</option>
+          <option value="option2">option 2</option>
+          <option value="option3">option 3</option>
+          <option value="option4">option 4</option>
+          <option value="option5">option 5</option>
+          <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option>
+        </select>
+        <label class="mdlext-selectfield__label">Profession</label>
+      </div>
+
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+        <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+        <label class="mdl-textfield__label">Number...</label>
+        <span class="mdl-textfield__error">Input is not a number!</span>
+      </div>
+
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+        <i class="material-icons">radio</i>
+        <input class="mdl-textfield__input" type="text">
+        <label class="mdl-textfield__label">Text...</label>
+        <label class="mdl-button mdl-js-button mdl-button--icon">
+          <i class="material-icons">settings_voice</i>
+        </label>
+      </div>
+    </fieldset>
+
+  </section>
+
+
+  <!-- Badges -->
+  <section style="margin-top:16px">
+    <div class="mdl-grid demo-badge-grid">
+      <div class="mdl-cell mdl-cell--2-col">
+        <span class="mdl-badge" data-badge="4">Inbox</span>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <span class="material-icons mdl-badge" data-badge="1">account_box</span>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <span class="mdl-badge" data-badge="♥">Mood</span>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <span class="material-icons mdl-badge" data-badge="♥">account_box</span>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <a href="#" onclick="return false" class="mdl-badge" data-badge="5">Inbox</a>
+      </div>
+    </div>
+
+  </section>
+
+
+  <!-- Buttons -->
+  <section>
+    <div class="mdl-grid demo-button-grid">
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab">
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab" disabled>
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab" disabled>
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised">
+          Raised
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised" disabled>
+          Disabled
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+          Colored
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
+          Accent
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
+          <i class="material-icons">settings</i>&nbsp;Settings
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect animated bounce">
+          <i class="material-icons">favorite</i>&nbsp;Fav
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button">
+          Flat
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button" disabled>
+          Disabled
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--primary">
+          Colored
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--accent">
+          Accent
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button">
+          <i class="material-icons">snooze</i>&nbsp;Ring, ring...
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--icon">
+          <i class="material-icons">mood</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
+          <i class="material-icons">mood</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab mdl-color--lime mdl-button--accent">
+          <i class="material-icons">cloud</i>
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised mdl-color--deep-orange-100 mdl-js-ripple-effect">
+          <i class="material-icons">settings</i>&nbsp;Settings
+        </button>
+      </div>
+    </div>
+  </section>
+
+  <!-- Toggles -->
+  <section>
+    <div class="mdl-grid demo-toggle-grid">
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-checkbox__input" checked>
+          <span class="mdl-checkbox__label">Checkbox</span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-checkbox__input">
+          <span class="mdl-checkbox__label">Checkbox</span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-checkbox__input" checked disabled>
+          <span class="mdl-checkbox__label">Checkbox</span>
+        </label>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+          <input type="radio" class="mdl-radio__button" name="options2" value="1" checked>
+          <span class="mdl-radio__label">First</span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+          <input type="radio" class="mdl-radio__button" name="options2" value="2">
+          <span class="mdl-radio__label">Second</span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+          <input type="radio" class="mdl-radio__button" name="options2" value="3" disabled>
+          <span class="mdl-radio__label">Third</span>
+        </label>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-icon-toggle__input" checked>
+          <i class="mdl-icon-toggle__label material-icons">format_bold</i>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-icon-toggle__input">
+          <i class="mdl-icon-toggle__label material-icons">format_italic</i>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-icon-toggle__input" disabled>
+          <i class="mdl-icon-toggle__label material-icons">format_italic</i>
+        </label>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-switch__input" checked>
+          <span class="mdl-switch__label"></span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-switch__input">
+          <span class="mdl-switch__label"></span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-switch__input" disabled>
+          <span class="mdl-switch__label"></span>
+        </label>
+      </div>
+    </div>
+  </section>
+
+
+
+  <!-- Sliders -->
+  <section>
+    <div class="mdl-grid demo-slider-grid">
+      <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-phone">
+        <!-- Default Slider -->
+        <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0">
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-phone">
+        <!-- Slider with Starting Value -->
+        <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="25">
+      </div>
+    </div>
+  </section>
+
+
+  <!-- Data table -->
+  <section>
+    <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
+      <thead>
+      <tr>
+        <th class="mdl-data-table__cell--non-numeric">Materials</th>
+        <th>Quantity</th>
+        <th>Unit price</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
+        <td>25</td>
+        <td>$2.90</td>
+      </tr>
+      <tr>
+        <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
+        <td>50</td>
+        <td>$1.25</td>
+      </tr>
+      <tr>
+        <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
+        <td>10</td>
+        <td>$2.35</td>
+      </tr>
+      </tbody>
+    </table>
+  </section>
+
+
+  <!-- Menu -->
+  <!--
+  <section>
+    <div class="demo-menu">
+      <div class="demo-menu-container mdl-shadow--2dp mdl-color--primary-dark mdl-color-text--primary-contrast">
+        <div class="demo-menu-background-dark"></div>
+        <div class="demo-menu-bar">
+          <button id="demo-menu-top-left" class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">more_vert</i>
+          </button>
+
+          <ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
+              for="demo-menu-top-left">
+            <li class="mdl-menu__item">Some Action</li>
+            <li class="mdl-menu__item">Another Action</li>
+            <li disabled class="mdl-menu__item">Disabled Action</li>
+            <li class="mdl-menu__item">Yet Another Action</li>
+          </ul>
+
+          <span>Menu top left</span>
+        </div>
+      </div>
+    </div>
+  </section>
+  -->
+
+  <!-- Menu button -->
+  <section style="padding-bottom:16px">
+    <h4>Menu button</h4>
+    <button class="mdl-button mdl-button--raised mdl-js-ripple-effect mdl-js-button mdlext-js-menu-button">
+      <i class="material-icons">gesture</i>
+      <span class="mdlext-menu-button__caption">Select</span>
+      <i class="material-icons mdlext-aria-expanded-more-less"></i>
+    </button>
+    <ul class="mdlext-menu mdlext-dark-color-theme" hidden >
+      <li class="mdlext-menu__item">
+        <i class="material-icons md-18">info</i>
+        <span class="mdlext-menu__item__caption">Menu item #1</span>
+      </li>
+      <li class="mdlext-menu__item">
+        <i class="material-icons md-18">help_outline</i>
+        <span class="mdlext-menu__item__caption">Menu item #2. A long text to check ellipsis overflow 0123456789</span>
+        <i class="material-icons md-18">radio</i>
+      </li>
+      <li class="mdlext-menu__item-separator"></li>
+      <li class="mdlext-menu__item" disabled>
+        <span class="mdlext-menu__item__caption">Menu item #3, disabled</span>
+        <i class="material-icons md-18">accessibility</i>
+      </li>
+      <li class="mdlext-menu__item-separator"></li>
+      <li class="mdlext-menu__item">
+        <span class="mdlext-menu__item__caption">Menu item #IV</span>
+        <i class="material-icons md-18">build</i>
+      </li>
+      <li class="mdlext-menu__item">
+        <span class="mdlext-menu__item__caption">Menu item #V</span>
+        <i class="material-icons md-18">build</i>
+      </li>
+      <li class="mdlext-menu__item-separator"></li>
+      <li class="mdlext-menu__item">
+        <span class="mdlext-menu__item__caption">Menu item #VI</span>
+        <i class="material-icons md-18">build</i>
+      </li>
+      <li class="mdlext-menu__item">
+        <span class="mdlext-menu__item__caption">Menu item #VII</span>
+        <i class="material-icons md-18">build</i>
+      </li>
+      <li class="mdlext-menu__item">
+        Menu item #n
+      </li>
+    </ul>
+  </section>
+
+
+</div>
+
+
+
+<h2>Default Color Theme</h2>
+
+<!-- Default theme -->
+<div class="demo-theme-container">
+
+  <section>
+    <table class="info">
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">.mdl-typography--</th>
+        <td class="mdl-typography--title">Scale &amp; Basic Styles</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">display-4</th>
+        <td class="mdl-typography--display-4">Light 112px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">display-3</th>
+        <td class="mdl-typography--display-3">Regular 56px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">display-2</th>
+        <td class="mdl-typography--display-2">Regular 45px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">display-1</th>
+        <td class="mdl-typography--display-1">Regular 34px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">headline</th>
+        <td class="mdl-typography--headline">Regular 24px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">title</th>
+        <td class="mdl-typography--title">Medium 20px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">subhead</th>
+        <td class="mdl-typography--subhead">Regular 16px (Device), Regular 15px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">body-2</th>
+        <td class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">body-1</th>
+        <td class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">body-2-force-preferred-font</th>
+        <td class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">body-1-force-preferred-font</th>
+        <td class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">caption</th>
+        <td class="mdl-typography--caption">Regular 12px</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">menu</th>
+        <td class="mdl-typography--menu">Medium 14px (Device), Medium 13px (Desktop)</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">button</th>
+        <td class="mdl-typography--button">Medium (All Caps) 14px</td>
+      </tr>
+
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+        <td class="mdl-color--primary-dark mdl-color-text--primary-contrast">mdl-color--primary-dark mdl-color-text--primary-contrast</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">primary</th>
+        <td class="mdl-color--primary mdl-color-text--primary-contrast">mdl-color--primary mdl-color-text--primary-contrast</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">accent</th>
+        <td class="mdl-color--accent mdl-color-text--accent-contrast">mdl-color--accent mdl-color-text--accent-contrast</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+        <td class="mdl-color--primary-contrast mdl-color-text--primary-dark">mdl-color--primary-contrast mdl-color-text--primary-dark</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">primary</th>
+        <td class="mdl-color--primary-contrast mdl-color-text--primary">mdl-color-text--primary</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">accent</th>
+        <td class="mdl-color--accent-contrast mdl-color-text--accent">mdl-color--accent-contrast mdl-color-text--accent</td>
+      </tr>
+    </table>
+  </section>
+
+  <section>
+    <h1>Base font</h1>
+
+    <p>Material Design Lite start’s with a base font of</p>
+    <ul>
+      <li>A size of 14px</li>
+      <li>A weight of 400</li>
+      <li>A line height of 20px</li>
+    </ul>
+
+    <p class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</p>
+    <p class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</p>
+    <p class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</p>
+    <p class="mdl-typography--body-2-color-contrast">Body with color contrast</p>
+    <p class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</p>
+    <p><a href="#" onclick="return false">An anchor</a></p>
+
+    <h1>Headings</h1>
+    <h1>h1 (56px) <small>Subtitle</small></h1>
+    <h2>h2 (45px) <small>Subtitle</small></h2>
+    <h3>h3 (34px) <small>Subtitle</small></h3>
+    <h4>h4 (24px) <small>Subtitle</small></h4>
+    <h5>h5 (20px) <small>Subtitle</small></h5>
+    <h6>h6 (16px) <small>Subtitle</small></h6>
+  </section>
+
+
+  <!-- textfields -->
+  <section class = "textfield-demo-container">
+
+    <div class="mdl-grid mdl-grid--no-spacing">
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield">
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+          <label class="mdl-textfield__label">Number...</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" list="languages" placeholder="Select a programming language" required>
+          <label class="mdl-textfield__label">Programming Language</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+          <label class="mdl-textfield__label">Number...</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" disabled value="123">
+          <label class="mdl-textfield__label">Number...</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label">
+          <label class="mdl-button mdl-js-button mdl-button--icon" for="mdl-expandable-demo1">
+            <i class="material-icons">search</i>
+          </label>
+          <div class="mdl-textfield__expandable-holder">
+            <input class="mdl-textfield__input" type="text" name="q" value="" id="mdl-expandable-demo1" pattern=".{3,}" />
+            <label class="mdl-textfield__label" for="mdl-expandable-demo1">Expandable Input</label>
+          </div>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--8-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--full-width mdl-textfield--floating-label">
+          <textarea class="mdl-textfield__input" rows= "3"></textarea>
+          <label class="mdl-textfield__label">Text lines...</label>
+        </div>
+      </div>
+
+    </div>
+
+  </section>
+
+
+  <!-- Selectfield -->
+  <section style="margin-bottom: 16px;">
+    <div class="mdl-grid mdl-grid--no-spacing">
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield">
+          <select class="mdlext-selectfield__select">
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+          <select class="mdlext-selectfield__select">
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+          <select class="mdlext-selectfield__select" disabled>
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+    </div>
+  </section>
+
+
+
+  <!-- bordered fields -->
+  <section class="mdlext-bordered-fields" style="margin-top:16px;">
+
+    <div class="mdl-grid mdl-grid--no-spacing">
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" list="languages" placeholder="Select a language" required>
+          <label class="mdl-textfield__label">Programming language</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+          <label class="mdl-textfield__label">Numeric with floating label</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" disabled value="123">
+          <label class="mdl-textfield__label" >Disabled floating label</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right ">
+          <input class="mdl-textfield__input" type="text" id="uploadfile33" readonly>
+          <label class="mdl-textfield__label">File (work in progress)</label>
+
+          <label class="mdl-button mdl-js-button mdl-button--primary mdl-button--icon mdl-button--file" for="uploadfile33">
+            <i class="material-icons">attach_file</i>
+            <input type="file" id="uploadBtn33">
+          </label>
+        </div>
+        <!--
+          // Need a script to work properly - something like this
+        -->
+        <script>
+          (function() {
+            'use strict';
+            document.querySelector('#uploadBtn33').addEventListener('change', function() {
+              var n = document.querySelector("#uploadfile33");
+              n.value = this.files[0].name;
+              n.parentNode.classList.add('is-dirty');
+            });
+          }());
+        </script>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+          <i class="material-icons">radio</i>
+          <input class="mdl-textfield__input" type="text" disabled>
+          <label class="mdl-textfield__label">Text, disabled</label>
+          <i class="material-icons">fingerprint</i>
+        </div>
+      </div>
+
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left">
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">phone</i>
+          </label>
+
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right">
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">settings_voice</i>
+          </label>
+        </div>
+      </div>
+
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+          <select class="mdlext-selectfield__select">
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+          <select class="mdlext-selectfield__select" disabled>
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label mdlext-bordered-fields__icon-left">
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">phone</i>
+          </label>
+          <select class="mdlext-selectfield__select">
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label mdlext-bordered-fields__icon-left">
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">phone</i>
+          </label>
+          <select class="mdlext-selectfield__select" disabled>
+            <option value=""></option>
+            <option value="option1">option 1</option>
+            <option value="option2">option 2</option>
+            <option value="option3">option 3</option>
+            <option value="option4">option 4</option>
+            <option value="option5">option 5</option>
+          </select>
+          <label class="mdlext-selectfield__label">Profession</label>
+        </div>
+      </div>
+
+
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left">
+          <i class="material-icons">radio</i>
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right">
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+          <i class="material-icons">fingerprint</i>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+          <i class="material-icons">radio</i>
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+          <i class="material-icons">fingerprint</i>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">phone</i>
+          </label>
+
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">settings_voice</i>
+          </label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">phone</i>
+          </label>
+
+          <input class="mdl-textfield__input" type="text" disabled>
+          <label class="mdl-textfield__label">Text...</label>
+
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">settings_voice</i>
+          </label>
+        </div>
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+          <i class="material-icons">radio</i>
+          <input class="mdl-textfield__input" type="text">
+          <label class="mdl-textfield__label">Text...</label>
+          <label class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">settings_voice</i>
+          </label>
+        </div>
+      </div>
+
+    </div>
+
+  </section>
+
+
+  <!-- Badges -->
+  <section style="margin-top:16px">
+    <div class="mdl-grid demo-badge-grid">
+      <div class="mdl-cell mdl-cell--2-col">
+        <span class="mdl-badge" data-badge="4">Inbox</span>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <span class="material-icons mdl-badge" data-badge="1">account_box</span>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <span class="mdl-badge" data-badge="♥">Mood</span>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <span class="material-icons mdl-badge" data-badge="♥">account_box</span>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <a href="#" onclick="return false" class="mdl-badge" data-badge="5">Inbox</a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Buttons -->
+  <section>
+    <div class="mdl-grid demo-button-grid">
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab">
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab" disabled>
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab" disabled>
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised">
+          Raised
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised" disabled>
+          Disabled
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+          Colored
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
+          Accent
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
+          <i class="material-icons">settings</i>&nbsp;Settings
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect animated bounce">
+          <i class="material-icons">favorite</i>&nbsp;Fav
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button">
+          Flat
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button" disabled>
+          Disabled
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--primary">
+          Colored
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--accent">
+          Accent
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button">
+          <i class="material-icons">snooze</i>&nbsp;Ring, ring...
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--icon">
+          <i class="material-icons">mood</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
+          <i class="material-icons">mood</i>
+        </button>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--fab mdl-color--lime mdl-button--accent">
+          <i class="material-icons">cloud</i>
+        </button>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+        <button class="mdl-button mdl-js-button mdl-button--raised mdl-color--deep-orange-100 mdl-js-ripple-effect">
+          <i class="material-icons">settings</i>&nbsp;Settings
+        </button>
+      </div>
+    </div>
+  </section>
+
+
+  <!-- Toggles -->
+  <section>
+    <div class="mdl-grid demo-toggle-grid">
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-checkbox__input" checked>
+          <span class="mdl-checkbox__label">Checkbox</span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-checkbox__input">
+          <span class="mdl-checkbox__label">Checkbox</span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-checkbox__input" checked disabled>
+          <span class="mdl-checkbox__label">Checkbox</span>
+        </label>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+          <input type="radio" class="mdl-radio__button" name="options" value="1" checked>
+          <span class="mdl-radio__label">First</span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+          <input type="radio" class="mdl-radio__button" name="options" value="2">
+          <span class="mdl-radio__label">Second</span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+          <input type="radio" class="mdl-radio__button" name="options" value="3" disabled>
+          <span class="mdl-radio__label">Third</span>
+        </label>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-icon-toggle__input" checked>
+          <i class="mdl-icon-toggle__label material-icons">format_bold</i>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-icon-toggle__input">
+          <i class="mdl-icon-toggle__label material-icons">format_italic</i>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-icon-toggle__input" disabled>
+          <i class="mdl-icon-toggle__label material-icons">format_italic</i>
+        </label>
+      </div>
+
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-switch__input" checked>
+          <span class="mdl-switch__label"></span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-switch__input">
+          <span class="mdl-switch__label"></span>
+        </label>
+      </div>
+      <div class="mdl-cell mdl-cell--2-col">
+        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+          <input type="checkbox" class="mdl-switch__input" disabled>
+          <span class="mdl-switch__label"></span>
+        </label>
+      </div>
+    </div>
+  </section>
+
+
+  <!-- Sliders -->
+  <section>
+    <div class="mdl-grid demo-slider-grid">
+      <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-phone">
+        <!-- Default Slider -->
+        <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0">
+      </div>
+
+      <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-phone">
+        <!-- Slider with Starting Value -->
+        <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="25">
+      </div>
+    </div>
+  </section>
+
+
+  <!-- Data table -->
+  <section>
+    <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
+      <thead>
+      <tr>
+        <th class="mdl-data-table__cell--non-numeric">Materials</th>
+        <th>Quantity</th>
+        <th>Unit price</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
+        <td>25</td>
+        <td>$2.90</td>
+      </tr>
+      <tr>
+        <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
+        <td>50</td>
+        <td>$1.25</td>
+      </tr>
+      <tr>
+        <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
+        <td>10</td>
+        <td>$2.35</td>
+      </tr>
+      </tbody>
+    </table>
+  </section>
+
+
+  <!-- Menu -->
+  <!--
+  <section>
+    <div class="demo-menu demo-menu__lower-left">
+      <div class="demo-menu-container mdl-shadow--2dp mdl-color--primary-dark mdl-color-text--primary-contrast">
+        <div class="demo-menu-bar">
+          <button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">more_vert</i>
+          </button>
+          <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-left">
+            <li class="mdl-menu__item">Some Action</li>
+            <li class="mdl-menu__item">Another Action</li>
+            <li disabled class="mdl-menu__item">Disabled Action</li>
+            <li class="mdl-menu__item">Yet Another Action</li>
+          </ul>
+
+          <span>Menu lower left</span>
+
+        </div>
+        <div class="demo-menu-background-light"></div>
+      </div>
+    </div>
+  </section>
+  -->
+
+  <!-- Menu button -->
+  <section style="padding-bottom:16px">
+    <h4>Menu button</h4>
+    <button class="mdl-button mdl-button--raised mdl-js-ripple-effect mdl-js-button mdlext-js-menu-button">
+      <i class="material-icons">gesture</i>
+      <span class="mdlext-menu-button__caption">Select</span>
+      <i class="material-icons mdlext-aria-expanded-more-less"></i>
+    </button>
+    <ul class="mdlext-menu" hidden >
+      <li class="mdlext-menu__item">
+        <i class="material-icons md-18">info</i>
+        <span class="mdlext-menu__item__caption">Menu item #1</span>
+      </li>
+      <li class="mdlext-menu__item">
+        <i class="material-icons md-18">help_outline</i>
+        <span class="mdlext-menu__item__caption">Menu item #2. A long text to check ellipsis overflow 0123456789</span>
+        <i class="material-icons md-18">radio</i>
+      </li>
+      <li class="mdlext-menu__item-separator"></li>
+      <li class="mdlext-menu__item" disabled>
+        <span class="mdlext-menu__item__caption">Menu item #3, disabled</span>
+        <i class="material-icons md-18">accessibility</i>
+      </li>
+      <li class="mdlext-menu__item-separator"></li>
+      <li class="mdlext-menu__item">
+        <span class="mdlext-menu__item__caption">Menu item #IV</span>
+        <i class="material-icons md-18">build</i>
+      </li>
+      <li class="mdlext-menu__item">
+        <span class="mdlext-menu__item__caption">Menu item #V</span>
+        <i class="material-icons md-18">build</i>
+      </li>
+      <li class="mdlext-menu__item-separator"></li>
+      <li class="mdlext-menu__item">
+        <span class="mdlext-menu__item__caption">Menu item #VI</span>
+        <i class="material-icons md-18">build</i>
+      </li>
+      <li class="mdlext-menu__item">
+        <span class="mdlext-menu__item__caption">Menu item #VII</span>
+        <i class="material-icons md-18">build</i>
+      </li>
+      <li class="mdlext-menu__item">
+        Menu item #n
+      </li>
+    </ul>
+  </section>
+
+</div>
+
+