semantic-ui-sass 0.19.3.1 → 1.7.0.0

data/app/assets/stylesheets/semantic-ui/elements/_all.scss

@@ -1,13 +1,14 @@
-@import 'basic.icon';
 @import 'button';
 @import 'divider';
+@import 'flag';
 @import 'header';
 @import 'icon';
 @import 'image';
 @import 'input';
 @import 'label';
+@import 'list';
 @import 'loader';
-@import 'progress';
+@import 'rail';
 @import 'reveal';
 @import 'segment';
 @import 'step';

data/app/assets/stylesheets/semantic-ui/elements/_button.scss

@@ -1,8 +1,7 @@
-@import '../depends/loader';
-/*
- * # Semantic - Button
- * http://github.com/jlukic/semantic-ui/
- *
+ /*
+ * # Semantic UI
+ * https://github.com/Semantic-Org/Semantic-UI
+ * http://www.semantic-ui.com/
  *
  * Copyright 2014 Contributors
  * Released under the MIT license
@@ -10,91 +9,75 @@
  *
  */
 
+
+
 /*******************************
             Button
 *******************************/
 
-/* Prototype */
-
 .ui.button {
   cursor: pointer;
   display: inline-block;
-  vertical-align: middle;
   min-height: 1em;
   outline: none;
   border: none;
-  background-color: #FAFAFA;
-  color: #808080;
-  margin: 0em;
-  padding: 0.8em 1.5em;
-  font-size: 1rem;
-  text-transform: uppercase;
-  line-height: 1;
+  vertical-align: baseline;
+  background-color: #e0e0e0;
+  color: rgba(0, 0, 0, 0.6);
+  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  margin: 0em 0.25em 0em 0em;
+  padding: 0.78571em 1.5em 0.78571em;
+  text-transform: none;
+  text-shadow: none;
   font-weight: bold;
+  line-height: 1;
   font-style: normal;
   text-align: center;
   text-decoration: none;
-  background-image: -webkit-gradient(linear, top left, bottom left, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.05)));
-  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
-  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
-  border-radius: 0.25em;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset;
+  background-image: none;
+  border-radius: 0.2857rem;
+  box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
   -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-transition: opacity 0.25s ease,
-    background-color 0.25s ease,
-    color 0.25s ease,
-    background 0.25s ease,
-    -webkit-box-shadow 0.25s ease;
-  transition: opacity 0.25s ease,
-    background-color 0.25s ease,
-    color 0.25s ease,
-    background 0.25s ease,
-    box-shadow 0.25s ease;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
+          transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
+  will-change: '';
+  -webkit-tap-highlight-color: transparent;
 }
 
+
 /*******************************
             States
 *******************************/
 
+
 /*--------------
-     Active
+      Hover
 ---------------*/
 
-.ui.buttons .active.button,
-.ui.active.button {
-  background-color: #EAEAEA;
+.ui.button:hover {
+  background-color: #e8e8e8;
   background-image: none;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
-  color: rgba(0, 0, 0, 0.7);
+  box-shadow: '';
+  color: rgba(0, 0, 0, 0.8);
+}
+.ui.button:hover .icon {
+  opacity: 0.85;
 }
 
 /*--------------
-      Hover
+      Focus
 ---------------*/
 
-.ui.button:hover {
-  background-image: -webkit-gradient(linear, top left, bottom left, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.08)));
-  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
-  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
-  color: rgba(0, 0, 0, 0.7);
-}
-
-.ui.button.active:hover {
-  background-image: none;
+.ui.button:focus {
+  background-color: '';
+  background-image: '';
+  box-shadow: 0px 0px 0px 1px transparent inset, 0px 0px 1px rgba(81, 167, 232, 0.8) inset, 0px 0px 3px 2px rgba(81, 167, 232, 0.8);
+  color: rgba(0, 0, 0, 0.8);
 }
-
-.ui.button:hover .icon,
-.ui.button.hover .icon {
+.ui.button:focus .icon {
   opacity: 0.85;
 }
 
@@ -104,61 +87,130 @@
 
 .ui.button:active,
 .ui.active.button:active {
-  background-color: #F1F1F1;
-  color: rgba(0, 0, 0, 0.7);
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
+  background-color: #cccccc;
+  background-image: '';
+  color: rgba(0, 0, 0, 0.8);
+  box-shadow: 0px 0px 0px 1px transparent inset, 0px 1px 4px 0px rgba(39, 41, 43, 0.15) inset;
+}
+
+/*--------------
+     Active
+---------------*/
+
+.ui.active.button {
+  background-color: #d0d0d0;
+  background-image: none;
+  box-shadow: 0px 0px 0px 1px transparent inset;
+  color: rgba(0, 0, 0, 0.8);
+}
+.ui.button.active:hover {
+  background-color: #d0d0d0;
+  background-image: none;
+  color: rgba(0, 0, 0, 0.8);
+}
+.ui.button.active:active {
+  background-color: #d0d0d0;
+  background-image: none;
 }
 
 /*--------------
     Loading
 ---------------*/
 
-.ui.loading.button {
+
+/* Specificity hack */
+.ui.loading.loading.loading.loading.loading.loading.button {
   position: relative;
   cursor: default;
-  background-color: #FFFFFF !important;
+  point-events: none;
+  text-shadow: none !important;
   color: transparent !important;
   -webkit-transition: all 0s linear;
-  transition: all 0s linear;
+          transition: all 0s linear;
+}
+.ui.loading.button:before {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+  margin: -0.64285em 0em 0em -0.64285em;
+  width: 1.2857em;
+  height: 1.2857em;
+  border-radius: 500rem;
+  border: 0.2em solid rgba(0, 0, 0, 0.15);
 }
-
 .ui.loading.button:after {
   position: absolute;
-  top: 0em;
-  left: 0em;
-  width: 100%;
-  height: 100%;
   content: '';
-  background: transparent image-url("semantic-ui/loader-mini.gif") no-repeat 50% 50%;
+  top: 50%;
+  left: 50%;
+  margin: -0.64285em 0em 0em -0.64285em;
+  width: 1.2857em;
+  height: 1.2857em;
+  -webkit-animation: button-spin 0.6s linear;
+          animation: button-spin 0.6s linear;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  border-radius: 500rem;
+  border-color: #ffffff transparent transparent;
+  border-style: solid;
+  border-width: 0.2em;
+  box-shadow: 0px 0px 0px 1px transparent;
 }
-
 .ui.labeled.icon.loading.button .icon {
   background-color: transparent;
-  -webkit-box-shadow: none;
   box-shadow: none;
 }
+@-webkit-keyframes button-spin {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes button-spin {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+.ui.basic.loading.button:not(.inverted):before {
+  border-color: rgba(0, 0, 0, 0.1);
+}
+.ui.basic.loading.button:not(.inverted):after {
+  border-top-color: #aaaaaa;
+}
 
 /*-------------------
       Disabled
 --------------------*/
 
+.ui.buttons .disabled.button,
 .ui.disabled.button,
 .ui.disabled.button:hover,
 .ui.disabled.button.active {
-  background-color: #DDDDDD !important;
   cursor: default;
-  color: rgba(0, 0, 0, 0.5) !important;
+  background-color: #dcddde !important;
+  color: rgba(0, 0, 0, 0.4) !important;
   opacity: 0.3 !important;
   background-image: none !important;
-  -webkit-box-shadow: none !important;
   box-shadow: none !important;
+  pointer-events: none;
 }
 
+
 /*******************************
              Types
 *******************************/
 
+
 /*-------------------
        Animated
 --------------------*/
@@ -166,310 +218,293 @@
 .ui.animated.button {
   position: relative;
   overflow: hidden;
+  padding-right: 0em !important;
+}
+.ui.animated.button .content {
+  will-change: transform, opacity;
 }
-
 .ui.animated.button .visible.content {
   position: relative;
+  margin-right: 1.5em;
 }
-
 .ui.animated.button .hidden.content {
   position: absolute;
   width: 100%;
 }
 
 /* Horizontal */
-
 .ui.animated.button .visible.content,
 .ui.animated.button .hidden.content {
   -webkit-transition: right 0.3s ease 0s;
-  transition: right 0.3s ease 0s;
+          transition: right 0.3s ease 0s;
 }
-
 .ui.animated.button .visible.content {
   left: auto;
   right: 0%;
 }
-
 .ui.animated.button .hidden.content {
   top: 50%;
   left: auto;
   right: -100%;
-  margin-top: -0.55em;
+  margin-top: -0.5em;
 }
-
 .ui.animated.button:hover .visible.content {
   left: auto;
   right: 200%;
 }
-
 .ui.animated.button:hover .hidden.content {
   left: auto;
   right: 0%;
 }
 
 /* Vertical */
-
 .ui.vertical.animated.button .visible.content,
 .ui.vertical.animated.button .hidden.content {
-  -webkit-transition: top 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
-  transition: top 0.3s ease 0s, transform 0.3s ease 0s;
+  -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease;
+          transition: top 0.3s ease, transform 0.3s ease;
 }
-
 .ui.vertical.animated.button .visible.content {
   -webkit-transform: translateY(0%);
-  -ms-transform: translateY(0%);
-  transform: translateY(0%);
+      -ms-transform: translateY(0%);
+          transform: translateY(0%);
   right: auto;
 }
-
 .ui.vertical.animated.button .hidden.content {
-  top: -100%;
+  top: -50%;
   left: 0%;
   right: auto;
 }
-
 .ui.vertical.animated.button:hover .visible.content {
   -webkit-transform: translateY(200%);
-  -ms-transform: translateY(200%);
-  transform: translateY(200%);
+      -ms-transform: translateY(200%);
+          transform: translateY(200%);
   right: auto;
 }
-
 .ui.vertical.animated.button:hover .hidden.content {
   top: 50%;
   right: auto;
 }
 
 /* Fade */
-
 .ui.fade.animated.button .visible.content,
 .ui.fade.animated.button .hidden.content {
-  -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
-  transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
+  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
+          transition: opacity 0.3s ease, transform 0.3s ease;
 }
-
 .ui.fade.animated.button .visible.content {
   left: auto;
   right: auto;
   opacity: 1;
   -webkit-transform: scale(1);
-  -ms-transform: scale(1);
-  transform: scale(1);
+      -ms-transform: scale(1);
+          transform: scale(1);
 }
-
 .ui.fade.animated.button .hidden.content {
   opacity: 0;
   left: 0%;
   right: auto;
-  -webkit-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
+  -webkit-transform: scale(1.5);
+      -ms-transform: scale(1.5);
+          transform: scale(1.5);
 }
-
 .ui.fade.animated.button:hover .visible.content {
   left: auto;
   right: auto;
   opacity: 0;
-  -webkit-transform: scale(0.7);
-  -ms-transform: scale(0.7);
-  transform: scale(0.7);
+  -webkit-transform: scale(0.75);
+      -ms-transform: scale(0.75);
+          transform: scale(0.75);
 }
-
 .ui.fade.animated.button:hover .hidden.content {
   left: 0%;
   right: auto;
   opacity: 1;
   -webkit-transform: scale(1);
-  -ms-transform: scale(1);
-  transform: scale(1);
+      -ms-transform: scale(1);
+          transform: scale(1);
 }
 
 /*-------------------
-       Primary
+       Inverted
 --------------------*/
 
-.ui.primary.buttons .button,
-.ui.primary.button {
-  background-color: #D95C5C;
-  color: #FFFFFF;
+.ui.inverted.button {
+  box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  background: transparent none;
+  color: #ffffff;
+  text-shadow: none !important;
 }
-
-.ui.primary.buttons .button:hover,
-.ui.primary.button:hover,
-.ui.primary.buttons .active.button,
-.ui.primary.button.active {
-  background-color: #E75859;
-  color: #FFFFFF;
+.ui.inverted.buttons .button {
+  margin: 0px 0px 0px -2px;
 }
-
-.ui.primary.buttons .button:active,
-.ui.primary.button:active {
-  background-color: #D24B4C;
-  color: #FFFFFF;
+.ui.inverted.buttons .button:first-child {
+  margin-left: 0em;
 }
-
-/*-------------------
-      Secondary
---------------------*/
-
-.ui.secondary.buttons .button,
-.ui.secondary.button {
-  background-color: #00B5AD;
-  color: #FFFFFF;
+.ui.inverted.vertical.buttons .button {
+  margin: 0px 0px -2px 0px;
 }
-
-.ui.secondary.buttons .button:hover,
-.ui.secondary.button:hover,
-.ui.secondary.buttons .active.button,
-.ui.secondary.button.active {
-  background-color: #009A93;
-  color: #FFFFFF;
+.ui.inverted.vertical.buttons .button:first-child {
+  margin-top: 0em;
 }
-
-.ui.secondary.buttons .button:active,
-.ui.secondary.button:active {
-  background-color: #00847E;
-  color: #FFFFFF;
+.ui.inverted.buttons .button:hover {
+  position: relative;
+}
+.ui.inverted.button:hover {
+  background: #ffffff;
+  box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  color: rgba(0, 0, 0, 0.8);
 }
 
 /*-------------------
        Social
 --------------------*/
 
-/* Facebook */
 
+/* Facebook */
 .ui.facebook.button {
-  background-color: #3B579D;
-  color: #FFFFFF;
+  background-color: #3b579d;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
 }
-
 .ui.facebook.button:hover {
-  background-color: #3A59A9;
-  color: #FFFFFF;
+  background-color: #3f5da8;
+  color: #ffffff;
+  text-shadow: none;
 }
-
 .ui.facebook.button:active {
-  background-color: #334F95;
-  color: #FFFFFF;
+  background-color: #314983;
+  color: #ffffff;
+  text-shadow: none;
 }
 
 /* Twitter */
-
 .ui.twitter.button {
-  background-color: #4092CC;
-  color: #FFFFFF;
+  background-color: #4092cc;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
 }
-
 .ui.twitter.button:hover {
-  background-color: #399ADE;
-  color: #FFFFFF;
+  background-color: #4c99cf;
+  color: #ffffff;
+  text-shadow: none;
 }
-
 .ui.twitter.button:active {
-  background-color: #3283BC;
-  color: #FFFFFF;
+  background-color: #3180b7;
+  color: #ffffff;
+  text-shadow: none;
 }
 
 /* Google Plus */
-
 .ui.google.plus.button {
-  background-color: #D34836;
-  color: #FFFFFF;
+  background-color: #d34836;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
 }
-
 .ui.google.plus.button:hover {
-  background-color: #E3432E;
-  color: #FFFFFF;
+  background-color: #d65343;
+  color: #ffffff;
+  text-shadow: none;
 }
-
 .ui.google.plus.button:active {
-  background-color: #CA3A27;
-  color: #FFFFFF;
+  background-color: #bc3a29;
+  color: #ffffff;
+  text-shadow: none;
 }
 
 /* Linked In */
-
 .ui.linkedin.button {
-  background-color: #1F88BE;
-  color: #FFFFFF;
+  background-color: #1f88be;
+  color: #ffffff;
+  text-shadow: none;
 }
-
 .ui.linkedin.button:hover {
-  background-color: #1394D6;
-  color: #FFFFFF;
+  background-color: #2191cb;
+  color: #ffffff;
+  text-shadow: none;
 }
-
 .ui.linkedin.button:active {
-  background-color: #1179AE;
-  color: #FFFFFF;
+  background-color: #1a729f;
+  color: #ffffff;
+  text-shadow: none;
 }
 
 /* YouTube */
-
 .ui.youtube.button {
-  background-color: #CC181E;
-  color: #FFFFFF;
+  background-color: #cc181e;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
 }
-
 .ui.youtube.button:hover {
-  background-color: #DF0209;
-  color: #FFFFFF;
+  background-color: #da1a20;
+  color: #ffffff;
+  text-shadow: none;
 }
-
 .ui.youtube.button:active {
-  background-color: #A50006;
-  color: #FFFFFF;
+  background-color: #ac1419;
+  color: #ffffff;
+  text-shadow: none;
 }
 
 /* Instagram */
-
 .ui.instagram.button {
-  background-color: #49769C;
-  color: #FFFFFF;
+  background-color: #49769c;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
 }
-
 .ui.instagram.button:hover {
-  background-color: #4781B1;
-  color: #FFFFFF;
+  background-color: #4e7ea6;
+  color: #ffffff;
+  text-shadow: none;
 }
-
 .ui.instagram.button:active {
-  background-color: #38658A;
-  color: #FFFFFF;
+  background-color: #3e6484;
+  color: #ffffff;
+  text-shadow: none;
 }
 
 /* Pinterest */
-
 .ui.pinterest.button {
-  background-color: #00ACED;
-  color: #FFFFFF;
+  background-color: #00aced;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
 }
-
 .ui.pinterest.button:hover {
-  background-color: #00B9FF;
-  color: #FFFFFF;
+  background-color: #00b7fc;
+  color: #ffffff;
+  text-shadow: none;
 }
-
 .ui.pinterest.button:active {
-  background-color: #009EDA;
-  color: #FFFFFF;
+  background-color: #0092c9;
+  color: #ffffff;
+  text-shadow: none;
 }
 
-/* vk.com */
-
+/* VK */
 .ui.vk.button {
   background-color: #4D7198;
-  color: #FFFFFF;
+  color: #ffffff;
+  background-image: none;
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
 }
-
 .ui.vk.button:hover {
-  background-color: #537AA5;
-  color: #FFFFFF;
+  background-color: #5279a2;
+  color: #ffffff;
 }
-
 .ui.vk.button:active {
-  background-color: #405E7E;
-  color: #FFFFFF;
+  background-color: #415f80;
+  color: #ffffff;
 }
 
 /*--------------
@@ -477,148 +512,100 @@
 ---------------*/
 
 .ui.button > .icon {
-  margin-right: 0.6em;
-  line-height: 1;
-  -webkit-transition: opacity 0.1s ease;
-  transition: opacity 0.1s ease;
+  opacity: 0.8;
+  margin: 0em 0.4em 0em -0.2em;
+  -webkit-transition: opacity 0.2s ease;
+          transition: opacity 0.2s ease;
+  vertical-align: baseline;
+  color: '';
 }
+.ui.button > .right.icon {
+  margin: 0em -0.2em 0em 0.4em;
+}
+
 
 /*******************************
            Variations
 *******************************/
 
+
 /*-------------------
        Floated
 --------------------*/
 
-.ui.left.floated.buttons,
-.ui.left.floated.button {
+.ui[class*="left floated"].buttons,
+.ui[class*="left floated"].button {
   float: left;
+  margin-left: 0em;
   margin-right: 0.25em;
 }
-
-.ui.right.floated.buttons,
-.ui.right.floated.button {
+.ui[class*="right floated"].buttons,
+.ui[class*="right floated"].button {
   float: right;
+  margin-right: 0em;
   margin-left: 0.25em;
 }
 
 /*-------------------
-        Sizes
+       Compact
 --------------------*/
 
-.ui.buttons .button,
-.ui.button {
-  font-size: 1rem;
+.ui.compact.buttons .button,
+.ui.compact.button {
+  padding: 0.5892825em 1.125em 0.5892825em;
 }
-
-.ui.mini.buttons .button,
-.ui.mini.buttons .or,
-.ui.mini.button {
-  font-size: 0.8rem;
+.ui.compact.icon.buttons .button,
+.ui.compact.icon.button {
+  padding: 0.5892825em 0.5892825em 0.5892825em;
+}
+.ui.compact.labeled.icon.buttons .button,
+.ui.compact.labeled.icon.button {
+  padding: 0.5892825em 3.69642em 0.5892825em;
 }
 
+/*-------------------
+        Sizes
+--------------------*/
+
 .ui.mini.buttons .button,
+.ui.mini.buttons .or,
 .ui.mini.button {
-  padding: 0.6em 0.8em;
-}
-
-.ui.mini.icon.buttons .button,
-.ui.mini.buttons .icon.button {
-  padding: 0.6em 0.6em;
+  font-size: 0.71428571rem;
 }
-
 .ui.tiny.buttons .button,
 .ui.tiny.buttons .or,
 .ui.tiny.button {
-  font-size: 0.875em;
-}
-
-.ui.tiny.buttons .button,
-.ui.tiny.buttons .button,
-.ui.tiny.button {
-  padding: 0.6em 0.8em;
-}
-
-.ui.tiny.icon.buttons .button,
-.ui.tiny.buttons .icon.button {
-  padding: 0.6em 0.6em;
+  font-size: 0.85714286rem;
 }
-
 .ui.small.buttons .button,
 .ui.small.buttons .or,
 .ui.small.button {
-  font-size: 0.875rem;
+  font-size: 0.92857143rem;
+}
+.ui.buttons .button,
+.ui.buttons .or,
+.ui.button {
+  font-size: 1rem;
 }
-
 .ui.large.buttons .button,
 .ui.large.buttons .or,
 .ui.large.button {
-  font-size: 1.125rem;
+  font-size: 1.14285714rem;
 }
-
 .ui.big.buttons .button,
 .ui.big.buttons .or,
 .ui.big.button {
-  font-size: 1.25rem;
+  font-size: 1.28571429rem;
 }
-
 .ui.huge.buttons .button,
 .ui.huge.buttons .or,
 .ui.huge.button {
-  font-size: 1.375rem;
+  font-size: 1.42857143rem;
 }
-
 .ui.massive.buttons .button,
 .ui.massive.buttons .or,
 .ui.massive.button {
-  font-size: 1.5rem;
-  font-weight: bold;
-}
-
-/* Or resize */
-
-.ui.tiny.buttons .or:before,
-.ui.mini.buttons .or:before {
-  width: 1.45em;
-  height: 1.55em;
-  line-height: 1.4;
-  margin-left: -0.725em;
-  margin-top: -0.25em;
-}
-
-.ui.tiny.buttons .or:after,
-.ui.mini.buttons .or:after {
-  height: 1.45em;
-}
-
-/* loading */
-
-.ui.huge.loading.button:after {
-  background-image: image-url("semantic-ui/loader-small.gif");
-}
-
-.ui.massive.buttons .loading.button:after,
-.ui.gigantic.buttons .loading.button:after,
-.ui.massive.loading.button:after,
-.ui.gigantic.loading.button:after {
-  background-image: image-url("semantic-ui/loader-medium.gif");
-}
-
-.ui.huge.loading.button:after,
-.ui.huge.loading.button.active:after {
-  background-image: image-url("semantic-ui/loader-small.gif");
-}
-
-.ui.massive.buttons .loading.button:after,
-.ui.gigantic.buttons .loading.button:after,
-.ui.massive.loading.button:after,
-.ui.gigantic.loading.button:after,
-.ui.massive.buttons .loading.button.active:after,
-.ui.gigantic.buttons .loading.button.active:after,
-.ui.massive.loading.button.active:after,
-.ui.gigantic.loading.button.active:after {
-  background-image: image-url("semantic-ui/loader-medium.gif");
+  font-size: 1.71428571rem;
 }
 
 /*--------------
@@ -627,9 +614,8 @@
 
 .ui.icon.buttons .button,
 .ui.icon.button {
-  padding: 0.8em;
+  padding: 0.78571em 0.78571em 0.78571em;
 }
-
 .ui.icon.buttons .button > .icon,
 .ui.icon.button > .icon {
   opacity: 0.9;
@@ -643,202 +629,196 @@
 
 .ui.basic.buttons .button,
 .ui.basic.button {
-  background-color: transparent !important;
+  background: transparent !important;
   background-image: none;
-  color: #808080 !important;
+  color: rgba(0, 0, 0, 0.6) !important;
   font-weight: normal;
+  border-radius: 0.2857rem;
   text-transform: none;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  text-shadow: none !important;
+  box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset;
 }
-
 .ui.basic.buttons {
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  border-radius: 0.25em;
+  box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15);
+  border-radius: 0.2857rem;
+}
+.ui.basic.buttons .button {
+  border-radius: 0em;
 }
-
 .ui.basic.buttons .button:hover,
 .ui.basic.button:hover {
-  background-image: none;
-  color: #7F7F7F !important;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
+  background: #fafafa !important;
+  color: rgba(0, 0, 0, 0.8) !important;
+  box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset, 0px 0px 0px 0px rgba(39, 41, 43, 0.15) inset;
 }
-
 .ui.basic.buttons .button:active,
 .ui.basic.button:active {
-  background-color: rgba(0, 0, 0, 0.02) !important;
-  color: #7F7F7F !important;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  background: #f8f8f8 !important;
+  color: rgba(0, 0, 0, 0.8) !important;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(39, 41, 43, 0.15) inset;
 }
-
 .ui.basic.buttons .button.active,
 .ui.basic.button.active {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: #7F7F7F;
-  -webkit-box-shadow: 0px 0px 0px 1px #BDBDBD inset;
-  box-shadow: 0px 0px 0px 1px #BDBDBD inset;
+  background: rgba(0, 0, 0, 0.05) !important;
+  box-shadow: '' !important;
+  color: rgba(0, 0, 0, 0.8);
+  box-shadow: rgba(39, 41, 43, 0.3);
 }
-
 .ui.basic.buttons .button.active:hover,
 .ui.basic.button.active:hover {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
-/* Inverted */
+/* Vertical */
+.ui.basic.buttons .button:hover {
+  box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset, 0px 0px 0px 0px rgba(39, 41, 43, 0.15) inset inset;
+}
+.ui.basic.buttons .button:active {
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(39, 41, 43, 0.15) inset inset;
+}
+.ui.basic.buttons .button.active {
+  box-shadow: rgba(39, 41, 43, 0.3) inset;
+}
 
+/* Standard Basic Inverted */
 .ui.basic.inverted.buttons .button,
 .ui.basic.inverted.button {
-  color: #FAFAFA !important;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
-  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
+  background-color: transparent !important;
+  color: #fafafa !important;
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
 }
-
 .ui.basic.inverted.buttons .button:hover,
 .ui.basic.inverted.button:hover {
-  background-image: none;
-  color: #FFFFFF !important;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
-  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
+  color: #ffffff !important;
+  box-shadow: 0px 0px 0px 2px #ffffff inset !important;
 }
-
 .ui.basic.inverted.buttons .button:active,
 .ui.basic.inverted.button:active {
   background-color: rgba(255, 255, 255, 0.05) !important;
-  color: #FFFFFF !important;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8) inset !important;
-  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8) inset !important;
+  color: #ffffff !important;
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.9) inset !important;
 }
-
 .ui.basic.inverted.buttons .button.active,
 .ui.basic.inverted.button.active {
-  background-color: rgba(255, 255, 255, 0.5);
-  color: #FFFFFF;
-  -webkit-box-shadow: none;
-  box-shadow: none;
+  background-color: rgba(255, 255, 255, 0.05);
+  color: #ffffff;
+  text-shadow: none;
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.7) inset;
 }
-
 .ui.basic.inverted.buttons .button.active:hover,
 .ui.basic.inverted.button.active:hover {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(255, 255, 255, 0.07);
+  box-shadow: 0px 0px 0px 2px #ffffff inset !important;
 }
 
 /* Basic Group */
-
 .ui.basic.buttons .button {
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-
-.ui.basic.buttons .button:hover,
-.ui.basic.buttons .button:active {
-  -webkit-box-shadow: none;
+  border-left: 1px solid rgba(39, 41, 43, 0.15);
   box-shadow: none;
 }
-
-.ui.basic.buttons .button.active,
-.ui.basic.buttons .button.active:hover {
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
+.ui.basic.vertical.buttons .button {
+  border-left: none;
 }
 
 /*--------------
-   Labeled Icon
+  Labeled Icon
 ---------------*/
 
 .ui.labeled.icon.buttons .button,
 .ui.labeled.icon.button {
   position: relative;
-  padding-left: 4em !important;
-  padding-right: 1.4em !important;
+  padding-left: 4.07142em !important;
+  padding-right: 1.5em !important;
 }
 
+/* Left Labeled */
 .ui.labeled.icon.buttons > .button > .icon,
 .ui.labeled.icon.button > .icon {
   position: absolute;
-  top: 0em;
-  left: 0em;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-  width: 2.75em;
+  width: 2.57142em;
   height: 100%;
-  padding-top: 0.8em;
   background-color: rgba(0, 0, 0, 0.05);
   text-align: center;
-  border-radius: 0.25em 0px 0px 0.25em;
+  color: '';
+  border-radius: 0.2857rem 0px 0px 0.2857rem;
   line-height: 1;
-  -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
-  box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
+  box-shadow: -1px 0px 0px 0px transparent inset;
 }
 
+/* Left Labeled */
+.ui.labeled.icon.buttons > .button > .icon,
+.ui.labeled.icon.button > .icon {
+  top: 0em;
+  left: 0em;
+}
+
+/* Right Labeled */
+.ui[class*="right labeled"].icon.button {
+  padding-right: 4.07142em !important;
+  padding-left: 1.5em !important;
+}
+.ui[class*="right labeled"].icon.button > .icon {
+  left: auto;
+  right: 0em;
+  border-radius: 0em 0.2857rem 0.2857rem 0em;
+  box-shadow: 1px 0px 0px 0px transparent inset;
+}
+.ui.labeled.icon.buttons > .button > .icon:before,
+.ui.labeled.icon.button > .icon:before,
+.ui.labeled.icon.buttons > .button > .icon:after,
+.ui.labeled.icon.button > .icon:after {
+  display: block;
+  position: absolute;
+  width: 100%;
+  top: 50%;
+  text-align: center;
+  margin-top: -0.5em;
+}
 .ui.labeled.icon.buttons .button > .icon {
   border-radius: 0em;
 }
-
 .ui.labeled.icon.buttons .button:first-child > .icon {
-  border-top-left-radius: 0.25em;
-  border-bottom-left-radius: 0.25em;
+  border-top-left-radius: 0.2857rem;
+  border-bottom-left-radius: 0.2857rem;
 }
-
 .ui.labeled.icon.buttons .button:last-child > .icon {
-  border-top-right-radius: 0.25em;
-  border-bottom-right-radius: 0.25em;
+  border-top-right-radius: 0.2857rem;
+  border-bottom-right-radius: 0.2857rem;
 }
-
 .ui.vertical.labeled.icon.buttons .button:first-child > .icon {
   border-radius: 0em;
-  border-top-left-radius: 0.25em;
+  border-top-left-radius: 0.2857rem;
 }
-
 .ui.vertical.labeled.icon.buttons .button:last-child > .icon {
   border-radius: 0em;
-  border-bottom-left-radius: 0.25em;
-}
-
-.ui.right.labeled.icon.button {
-  padding-left: 1.4em !important;
-  padding-right: 4em !important;
-}
-
-.ui.left.fluid.labeled.icon.button,
-.ui.right.fluid.labeled.icon.button {
-  padding-left: 1.4em !important;
-  padding-right: 1.4em !important;
+  border-bottom-left-radius: 0.2857rem;
 }
 
-.ui.right.labeled.icon.button .icon {
-  left: auto;
-  right: 0em;
-  border-radius: 0em 0.25em 0.25em 0em;
-  -webkit-box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
-  box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
+/* Fluid Labeled */
+.ui.fluid[class*="left labeled"].icon.button,
+.ui.fluid[class*="right labeled"].icon.button {
+  padding-left: 1.5em !important;
+  padding-right: 1.5em !important;
 }
 
 /*--------------
      Toggle
 ---------------*/
 
-/* Toggle (Modifies active state to give affordances) */
 
+/* Toggle (Modifies active state to give affordances) */
 .ui.toggle.buttons .active.button,
 .ui.buttons .button.toggle.active,
 .ui.button.toggle.active {
-  background-color: #5BBD72 !important;
-  color: #FFFFFF !important;
-  -webkit-box-shadow: none !important;
+  background-color: #5bbd72 !important;
   box-shadow: none !important;
+  text-shadow: none;
+  color: #ffffff !important;
 }
-
 .ui.button.toggle.active:hover {
-  background-color: #58CB73 !important;
-  color: #FFFFFF !important;
-  -webkit-box-shadow: none !important;
-  box-shadow: none !important;
+  background-color: #66c17b !important;
+  text-shadow: none;
+  color: #ffffff !important;
 }
 
 /*--------------
@@ -848,6 +828,10 @@
 .ui.circular.button {
   border-radius: 10em;
 }
+.ui.circular.button > .icon {
+  width: 1em;
+  vertical-align: baseline;
+}
 
 /*--------------
      Attached
@@ -855,31 +839,28 @@
 
 .ui.attached.button {
   display: block;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
-}
-
+  margin: 0em;
+  box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) !important;
+  border-radius: 0em;
+}
 .ui.attached.top.button {
-  border-radius: 0.25em 0.25em 0em 0em;
+  border-radius: 0.2857rem 0.2857rem 0em 0em;
 }
-
 .ui.attached.bottom.button {
-  border-radius: 0em 0em 0.25em 0.25em;
+  border-radius: 0em 0em 0.2857rem 0.2857rem;
 }
-
 .ui.attached.left.button {
   display: inline-block;
   border-left: none;
   padding-right: 0.75em;
   text-align: right;
-  border-radius: 0.25em 0em 0em 0.25em;
+  border-radius: 0.2857rem 0em 0em 0.2857rem;
 }
-
 .ui.attached.right.button {
   display: inline-block;
   padding-left: 0.75em;
   text-align: left;
-  border-radius: 0em 0.25em 0.25em 0em;
+  border-radius: 0em 0.2857rem 0.2857rem 0em;
 }
 
 /*-------------------
@@ -890,56 +871,36 @@
   position: relative;
   float: left;
   width: 0.3em;
-  height: 1.1em;
+  height: 2.57142em;
   z-index: 3;
 }
-
 .ui.buttons .or:before {
   position: absolute;
+  text-align: center;
+  border-radius: 500rem;
+  content: 'or';
   top: 50%;
   left: 50%;
-  content: 'or';
-  background-color: #FFFFFF;
-  margin-top: -0.1em;
-  margin-left: -0.9em;
-  width: 1.8em;
-  height: 1.8em;
-  line-height: 1.55;
-  color: #AAAAAA;
+  background-color: #ffffff;
+  text-shadow: none;
+  margin-top: -0.892855em;
+  margin-left: -0.892855em;
+  width: 1.78571em;
+  height: 1.78571em;
+  line-height: 1.78571em;
+  color: rgba(0, 0, 0, 0.4);
   font-style: normal;
-  font-weight: normal;
-  text-align: center;
-  border-radius: 500px;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
+  font-weight: bold;
+  box-shadow: 0px 0px 0px 1px transparent inset;
 }
-
 .ui.buttons .or[data-text]:before {
   content: attr(data-text);
 }
 
-.ui.buttons .or:after {
-  position: absolute;
-  top: 0em;
-  left: 0em;
-  content: ' ';
-  width: 0.3em;
-  height: 1.7em;
-  background-color: transparent;
-  border-top: 0.5em solid #FFFFFF;
-  border-bottom: 0.5em solid #FFFFFF;
-}
-
 /* Fluid Or */
-
 .ui.fluid.buttons .or {
   width: 0em !important;
 }
-
 .ui.fluid.buttons .or:after {
   display: none;
 }
@@ -948,197 +909,217 @@
        Attached
 --------------------*/
 
-/* Plural Attached */
 
+/* Plural Attached */
 .attached.ui.buttons {
   margin: 0px;
-  border-radius: 4px 4px 0px 0px;
+  border-radius: 0em 0em 0em 0em;
+}
+.attached.ui.buttons .button {
+  margin: 0em;
 }
-
 .attached.ui.buttons .button:first-child {
-  border-radius: 4px 0px 0px 0px;
+  border-radius: 0em 0em 0em 0em;
 }
-
 .attached.ui.buttons .button:last-child {
-  border-radius: 0px 4px 0px 0px;
+  border-radius: 0em 0em 0em 0em;
 }
 
-/* Bottom Side */
+/* Top Side */
+[class*="top attached"].ui.buttons {
+  margin-bottom: -1px;
+  border-radius: 0.2857rem 0.2857rem 0em 0em;
+}
+[class*="top attached"].ui.buttons .button:first-child {
+  border-radius: 0.2857rem 0em 0em 0em;
+}
+[class*="top attached"].ui.buttons .button:last-child {
+  border-radius: 0em 0.2857rem 0em 0em;
+}
 
-.bottom.attached.ui.buttons {
+/* Bottom Side */
+[class*="bottom attached"].ui.buttons {
   margin-top: -1px;
-  border-radius: 0px 0px 4px 4px;
+  border-radius: 0em 0em 0.2857rem 0.2857rem;
 }
-
-.bottom.attached.ui.buttons .button:first-child {
-  border-radius: 0px 0px 0px 4px;
+[class*="bottom attached"].ui.buttons .button:first-child {
+  border-radius: 0em 0em 0em 0.2857rem;
 }
-
-.bottom.attached.ui.buttons .button:last-child {
-  border-radius: 0px 0px 4px 0px;
+[class*="bottom attached"].ui.buttons .button:last-child {
+  border-radius: 0em 0em 0.2857rem 0em;
 }
 
 /* Left Side */
-
-.left.attached.ui.buttons {
+[class*="left attached"].ui.buttons {
   margin-left: -1px;
-  border-radius: 0px 4px 4px 0px;
+  border-radius: 0em 0.2857rem 0.2857rem 0em;
 }
-
-.left.attached.ui.buttons .button:first-child {
+[class*="left attached"].ui.buttons .button:first-child {
   margin-left: -1px;
-  border-radius: 0px 4px 0px 0px;
+  border-radius: 0em 0.2857rem 0em 0em;
 }
-
-.left.attached.ui.buttons .button:last-child {
+[class*="left attached"].ui.buttons .button:last-child {
   margin-left: -1px;
-  border-radius: 0px 0px 4px 0px;
+  border-radius: 0em 0em 0.2857rem 0em;
 }
 
 /* Right Side */
-
-.right.attached.ui.buttons,
-.right.attached.ui.buttons .button {
+[class*="right attached"].ui.buttons,
+[class*="right attached"].ui.buttons .button {
   margin-right: -1px;
-  border-radius: 4px 0px 0px 4px;
+  border-radius: 0.2857rem 0em 0em 0.2857rem;
 }
-
-.right.attached.ui.buttons .button:first-child {
+[class*="right attached"].ui.buttons .button:first-child {
   margin-left: -1px;
-  border-radius: 4px 0px 0px 0px;
+  border-radius: 0.2857rem 0em 0em 0em;
 }
-
-.right.attached.ui.buttons .button:last-child {
+[class*="right attached"].ui.buttons .button:last-child {
   margin-left: -1px;
-  border-radius: 0px 0px 0px 4px;
+  border-radius: 0em 0em 0em 0.2857rem;
 }
 
 /* Fluid */
-
 .ui.fluid.buttons,
 .ui.button.fluid,
 .ui.fluid.buttons > .button {
   display: block;
   width: 100%;
 }
-
+.ui.\32.buttons,
+.ui.two.buttons {
+  width: 100%;
+}
 .ui.\32.buttons > .button,
 .ui.two.buttons > .button {
   width: 50%;
 }
-
+.ui.\33.buttons,
+.ui.three.buttons {
+  width: 100%;
+}
 .ui.\33.buttons > .button,
 .ui.three.buttons > .button {
   width: 33.333%;
 }
-
+.ui.\34.buttons,
+.ui.four.buttons {
+  width: 100%;
+}
 .ui.\34.buttons > .button,
 .ui.four.buttons > .button {
   width: 25%;
 }
-
+.ui.\35.buttons,
+.ui.five.buttons {
+  width: 100%;
+}
 .ui.\35.buttons > .button,
 .ui.five.buttons > .button {
   width: 20%;
 }
-
+.ui.\36.buttons,
+.ui.six.buttons {
+  width: 100%;
+}
 .ui.\36.buttons > .button,
 .ui.six.buttons > .button {
   width: 16.666%;
 }
-
+.ui.\37.buttons,
+.ui.seven.buttons {
+  width: 100%;
+}
 .ui.\37.buttons > .button,
 .ui.seven.buttons > .button {
   width: 14.285%;
 }
-
+.ui.\38.buttons,
+.ui.eight.buttons {
+  width: 100%;
+}
 .ui.\38.buttons > .button,
 .ui.eight.buttons > .button {
   width: 12.500%;
 }
-
+.ui.\39.buttons,
+.ui.nine.buttons {
+  width: 100%;
+}
 .ui.\39.buttons > .button,
 .ui.nine.buttons > .button {
   width: 11.11%;
 }
-
+.ui.\31\30.buttons,
+.ui.ten.buttons {
+  width: 100%;
+}
 .ui.\31\30.buttons > .button,
 .ui.ten.buttons > .button {
   width: 10%;
 }
-
+.ui.\31\31.buttons,
+.ui.eleven.buttons {
+  width: 100%;
+}
 .ui.\31\31.buttons > .button,
 .ui.eleven.buttons > .button {
   width: 9.09%;
 }
-
+.ui.\31\32.buttons,
+.ui.twelve.buttons {
+  width: 100%;
+}
 .ui.\31\32.buttons > .button,
 .ui.twelve.buttons > .button {
   width: 8.3333%;
 }
 
 /* Fluid Vertical Buttons */
-
 .ui.fluid.vertical.buttons,
 .ui.fluid.vertical.buttons > .button {
   display: block;
   width: auto;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
 }
-
 .ui.\32.vertical.buttons > .button,
 .ui.two.vertical.buttons > .button {
   height: 50%;
 }
-
 .ui.\33.vertical.buttons > .button,
 .ui.three.vertical.buttons > .button {
   height: 33.333%;
 }
-
 .ui.\34.vertical.buttons > .button,
 .ui.four.vertical.buttons > .button {
   height: 25%;
 }
-
 .ui.\35.vertical.buttons > .button,
 .ui.five.vertical.buttons > .button {
   height: 20%;
 }
-
 .ui.\36.vertical.buttons > .button,
 .ui.six.vertical.buttons > .button {
   height: 16.666%;
 }
-
 .ui.\37.vertical.buttons > .button,
 .ui.seven.vertical.buttons > .button {
   height: 14.285%;
 }
-
 .ui.\38.vertical.buttons > .button,
 .ui.eight.vertical.buttons > .button {
   height: 12.500%;
 }
-
 .ui.\39.vertical.buttons > .button,
 .ui.nine.vertical.buttons > .button {
   height: 11.11%;
 }
-
 .ui.\31\30.vertical.buttons > .button,
 .ui.ten.vertical.buttons > .button {
   height: 10%;
 }
-
 .ui.\31\31.vertical.buttons > .button,
 .ui.eleven.vertical.buttons > .button {
   height: 9.09%;
 }
-
 .ui.\31\32.vertical.buttons > .button,
 .ui.twelve.vertical.buttons > .button {
   height: 8.3333%;
@@ -1148,156 +1129,1088 @@
        Colors
 --------------------*/
 
+
 /*--- Black ---*/
 
 .ui.black.buttons .button,
 .ui.black.button {
-  background-color: #5C6166;
-  color: #FFFFFF;
+  background-color: #1b1c1d;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+}
+.ui.black.button {
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
 }
-
 .ui.black.buttons .button:hover,
 .ui.black.button:hover {
-  background-color: #4C4C4C;
-  color: #FFFFFF;
+  background-color: #1b1c1d;
+  color: #ffffff;
+  text-shadow: none;
 }
-
 .ui.black.buttons .button:active,
 .ui.black.button:active {
+  background-color: #0a0a0b;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.black.buttons .button.active,
+.ui.black.buttons .button.active:active,
+.ui.black.button.active,
+.ui.black.button .button.active:active {
+  background-color: #0f0f10;
+  color: #ffffff;
+  text-shadow: none;
+}
+
+/* Basic */
+.ui.basic.black.buttons .button,
+.ui.basic.black.button {
+  box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+.ui.basic.black.buttons .button:hover,
+.ui.basic.black.button:hover {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #1b1c1d inset !important;
+  color: #1b1c1d !important;
+}
+.ui.basic.black.buttons .button:active,
+.ui.basic.black.button:active {
+  box-shadow: 0px 0px 0px 2px #0a0a0b inset !important;
+  color: #0a0a0b !important;
+}
+.ui.basic.black.buttons .button.active,
+.ui.basic.black.button.active {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #0a0a0b inset !important;
+  color: #0a0a0b !important;
+}
+.ui.buttons > .basic.black.button:not(:first-child) {
+  margin-left: -2px;
+}
+
+/* Inverted */
+.ui.inverted.black.buttons .button,
+.ui.inverted.black.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px #d4d4d5 inset !important;
+  color: #ffffff;
+}
+.ui.inverted.black.buttons .button:hover,
+.ui.inverted.black.button:hover {
+  box-shadow: 0px 0px 0px 2px #333333 inset !important;
+  background-color: #333333;
+  color: #ffffff;
+}
+.ui.inverted.black.buttons .button.active,
+.ui.inverted.black.button.active {
+  box-shadow: 0px 0px 0px 2px #333333 inset !important;
   background-color: #333333;
-  color: #FFFFFF;
+  color: #ffffff;
+}
+.ui.inverted.black.buttons .button:active,
+.ui.inverted.black.button:active {
+  box-shadow: 0px 0px 0px 2px #212121 inset !important;
+  background-color: #212121;
+  color: #ffffff;
+}
+
+/* Inverted Basic */
+.ui.inverted.black.basic.buttons .button,
+.ui.inverted.black.buttons .basic.button,
+.ui.inverted.black.basic.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
+  color: #ffffff !important;
+}
+.ui.inverted.black.basic.buttons .button:hover,
+.ui.inverted.black.buttons .basic.button:hover,
+.ui.inverted.black.basic.button:hover {
+  box-shadow: 0px 0px 0px 2px #333333 inset !important;
+  color: #ffffff !important;
+}
+.ui.inverted.black.basic.buttons .button.active,
+.ui.inverted.black.buttons .basic.button.active,
+.ui.inverted.black.basic.button.active {
+  box-shadow: 0px 0px 0px 2px #333333 inset !important;
+  color: #ffffff !important;
+}
+.ui.inverted.black.basic.buttons .button:active,
+.ui.inverted.black.buttons .basic.button:active,
+.ui.inverted.black.basic.button:active {
+  box-shadow: 0px 0px 0px 2px #212121 inset !important;
+  color: #ffffff !important;
+}
+
+/*--- Blue ---*/
+
+.ui.blue.buttons .button,
+.ui.blue.button {
+  background-color: #3b83c0;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+}
+.ui.blue.button {
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
+}
+.ui.blue.buttons .button:hover,
+.ui.blue.button:hover {
+  background-color: #458ac6;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.blue.buttons .button:active,
+.ui.blue.button:active {
+  background-color: #3370a5;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.blue.buttons .button.active,
+.ui.blue.buttons .button.active:active,
+.ui.blue.button.active,
+.ui.blue.button .button.active:active {
+  background-color: #3576ac;
+  color: #ffffff;
+  text-shadow: none;
+}
+
+/* Basic */
+.ui.basic.blue.buttons .button,
+.ui.basic.blue.button {
+  box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+.ui.basic.blue.buttons .button:hover,
+.ui.basic.blue.button:hover {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #458ac6 inset !important;
+  color: #458ac6 !important;
+}
+.ui.basic.blue.buttons .button:active,
+.ui.basic.blue.button:active {
+  box-shadow: 0px 0px 0px 2px #3370a5 inset !important;
+  color: #3370a5 !important;
+}
+.ui.basic.blue.buttons .button.active,
+.ui.basic.blue.button.active {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #3370a5 inset !important;
+  color: #3370a5 !important;
+}
+.ui.buttons > .basic.blue.button:not(:first-child) {
+  margin-left: -2px;
+}
+
+/* Inverted */
+.ui.inverted.blue.buttons .button,
+.ui.inverted.blue.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px #54c8ff inset !important;
+  color: #54c8ff;
+}
+.ui.inverted.blue.buttons .button:hover,
+.ui.inverted.blue.button:hover {
+  box-shadow: 0px 0px 0px 2px #54c8ff inset !important;
+  background-color: #54c8ff;
+  color: #ffffff;
+}
+.ui.inverted.blue.buttons .button.active,
+.ui.inverted.blue.button.active {
+  box-shadow: 0px 0px 0px 2px #54c8ff inset !important;
+  background-color: #54c8ff;
+  color: #ffffff;
+}
+.ui.inverted.blue.buttons .button:active,
+.ui.inverted.blue.button:active {
+  box-shadow: 0px 0px 0px 2px #30bdff inset !important;
+  background-color: #30bdff;
+  color: #ffffff;
+}
+
+/* Inverted Basic */
+.ui.inverted.blue.basic.buttons .button,
+.ui.inverted.blue.buttons .basic.button,
+.ui.inverted.blue.basic.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
+  color: #ffffff !important;
+}
+.ui.inverted.blue.basic.buttons .button:hover,
+.ui.inverted.blue.buttons .basic.button:hover,
+.ui.inverted.blue.basic.button:hover {
+  box-shadow: 0px 0px 0px 2px #54c8ff inset !important;
+  color: #54c8ff !important;
+}
+.ui.inverted.blue.basic.buttons .button.active,
+.ui.inverted.blue.buttons .basic.button.active,
+.ui.inverted.blue.basic.button.active {
+  box-shadow: 0px 0px 0px 2px #54c8ff inset !important;
+  color: #54c8ff !important;
+}
+.ui.inverted.blue.basic.buttons .button:active,
+.ui.inverted.blue.buttons .basic.button:active,
+.ui.inverted.blue.basic.button:active {
+  box-shadow: 0px 0px 0px 2px #30bdff inset !important;
+  color: #54c8ff !important;
 }
 
 /*--- Green ---*/
 
 .ui.green.buttons .button,
 .ui.green.button {
-  background-color: #5BBD72;
-  color: #FFFFFF;
+  background-color: #5bbd72;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+}
+.ui.green.button {
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
 }
-
 .ui.green.buttons .button:hover,
-.ui.green.button:hover,
-.ui.green.buttons .active.button,
-.ui.green.button.active {
-  background-color: #58cb73;
-  color: #FFFFFF;
+.ui.green.button:hover {
+  background-color: #66c17b;
+  color: #ffffff;
+  text-shadow: none;
 }
-
 .ui.green.buttons .button:active,
 .ui.green.button:active {
-  background-color: #4CB164;
-  color: #FFFFFF;
+  background-color: #46ae5f;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.green.buttons .button.active,
+.ui.green.buttons .button.active:active,
+.ui.green.button.active,
+.ui.green.button .button.active:active {
+  background-color: #49b562;
+  color: #ffffff;
+  text-shadow: none;
+}
+
+/* Basic */
+.ui.basic.green.buttons .button,
+.ui.basic.green.button {
+  box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+.ui.basic.green.buttons .button:hover,
+.ui.basic.green.button:hover {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #66c17b inset !important;
+  color: #66c17b !important;
+}
+.ui.basic.green.buttons .button:active,
+.ui.basic.green.button:active {
+  box-shadow: 0px 0px 0px 2px #46ae5f inset !important;
+  color: #46ae5f !important;
+}
+.ui.basic.green.buttons .button.active,
+.ui.basic.green.button.active {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #46ae5f inset !important;
+  color: #46ae5f !important;
+}
+.ui.buttons > .basic.green.button:not(:first-child) {
+  margin-left: -2px;
 }
 
-/*--- Red ---*/
-
-.ui.red.buttons .button,
-.ui.red.button {
-  background-color: #D95C5C;
-  color: #FFFFFF;
+/* Inverted */
+.ui.inverted.green.buttons .button,
+.ui.inverted.green.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px #2ecc40 inset !important;
+  color: #2ecc40;
+}
+.ui.inverted.green.buttons .button:hover,
+.ui.inverted.green.button:hover {
+  box-shadow: 0px 0px 0px 2px #2ecc40 inset !important;
+  background-color: #2ecc40;
+  color: #ffffff;
+}
+.ui.inverted.green.buttons .button.active,
+.ui.inverted.green.button.active {
+  box-shadow: 0px 0px 0px 2px #2ecc40 inset !important;
+  background-color: #2ecc40;
+  color: #ffffff;
+}
+.ui.inverted.green.buttons .button:active,
+.ui.inverted.green.button:active {
+  box-shadow: 0px 0px 0px 2px #27af37 inset !important;
+  background-color: #27af37;
+  color: #ffffff;
+}
+
+/* Inverted Basic */
+.ui.inverted.green.basic.buttons .button,
+.ui.inverted.green.buttons .basic.button,
+.ui.inverted.green.basic.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
+  color: #ffffff !important;
 }
-
-.ui.red.buttons .button:hover,
-.ui.red.button:hover,
-.ui.red.buttons .active.button,
-.ui.red.button.active {
-  background-color: #E75859;
-  color: #FFFFFF;
+.ui.inverted.green.basic.buttons .button:hover,
+.ui.inverted.green.buttons .basic.button:hover,
+.ui.inverted.green.basic.button:hover {
+  box-shadow: 0px 0px 0px 2px #2ecc40 inset !important;
+  color: #2ecc40 !important;
 }
-
-.ui.red.buttons .button:active,
-.ui.red.button:active {
-  background-color: #D24B4C;
-  color: #FFFFFF;
+.ui.inverted.green.basic.buttons .button.active,
+.ui.inverted.green.buttons .basic.button.active,
+.ui.inverted.green.basic.button.active {
+  box-shadow: 0px 0px 0px 2px #2ecc40 inset !important;
+  color: #2ecc40 !important;
+}
+.ui.inverted.green.basic.buttons .button:active,
+.ui.inverted.green.buttons .basic.button:active,
+.ui.inverted.green.basic.button:active {
+  box-shadow: 0px 0px 0px 2px #27af37 inset !important;
+  color: #2ecc40 !important;
 }
 
 /*--- Orange ---*/
 
 .ui.orange.buttons .button,
 .ui.orange.button {
-  background-color: #E96633;
-  color: #FFFFFF;
+  background-color: #e07b53;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+}
+.ui.orange.button {
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
 }
-
 .ui.orange.buttons .button:hover,
-.ui.orange.button:hover,
-.ui.orange.buttons .active.button,
-.ui.orange.button.active {
-  background-color: #FF7038;
-  color: #FFFFFF;
+.ui.orange.button:hover {
+  background-color: #e28560;
+  color: #ffffff;
+  text-shadow: none;
 }
-
 .ui.orange.buttons .button:active,
 .ui.orange.button:active {
-  background-color: #DA683B;
-  color: #FFFFFF;
+  background-color: #db6435;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.orange.buttons .button.active,
+.ui.orange.buttons .button.active:active,
+.ui.orange.button.active,
+.ui.orange.button .button.active:active {
+  background-color: #0f0f10;
+  color: #ffffff;
+  text-shadow: none;
+}
+
+/* Basic */
+.ui.basic.orange.buttons .button,
+.ui.basic.orange.button {
+  box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+.ui.basic.orange.buttons .button:hover,
+.ui.basic.orange.button:hover {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #e28560 inset !important;
+  color: #e28560 !important;
+}
+.ui.basic.orange.buttons .button:active,
+.ui.basic.orange.button:active {
+  box-shadow: 0px 0px 0px 2px #db6435 inset !important;
+  color: #db6435 !important;
+}
+.ui.basic.orange.buttons .button.active,
+.ui.basic.orange.button.active {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #db6435 inset !important;
+  color: #db6435 !important;
+}
+.ui.buttons > .basic.orange.button:not(:first-child) {
+  margin-left: -2px;
 }
 
-/*--- Blue ---*/
-
-.ui.blue.buttons .button,
-.ui.blue.button {
-  background-color: #6ECFF5;
-  color: #FFFFFF;
+/* Inverted */
+.ui.inverted.orange.buttons .button,
+.ui.inverted.orange.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px #ff851b inset !important;
+  color: #ff851b;
+}
+.ui.inverted.orange.buttons .button:hover,
+.ui.inverted.orange.button:hover {
+  box-shadow: 0px 0px 0px 2px #ff851b inset !important;
+  background-color: #ff851b;
+  color: #ffffff;
+}
+.ui.inverted.orange.buttons .button.active,
+.ui.inverted.orange.button.active {
+  box-shadow: 0px 0px 0px 2px #ff851b inset !important;
+  background-color: #ff851b;
+  color: #ffffff;
+}
+.ui.inverted.orange.buttons .button:active,
+.ui.inverted.orange.button:active {
+  box-shadow: 0px 0px 0px 2px #f67300 inset !important;
+  background-color: #f67300;
+  color: #ffffff;
+}
+
+/* Inverted Basic */
+.ui.inverted.orange.basic.buttons .button,
+.ui.inverted.orange.buttons .basic.button,
+.ui.inverted.orange.basic.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
+  color: #ffffff !important;
+}
+.ui.inverted.orange.basic.buttons .button:hover,
+.ui.inverted.orange.buttons .basic.button:hover,
+.ui.inverted.orange.basic.button:hover {
+  box-shadow: 0px 0px 0px 2px #ff851b inset !important;
+  color: #ff851b !important;
+}
+.ui.inverted.orange.basic.buttons .button.active,
+.ui.inverted.orange.buttons .basic.button.active,
+.ui.inverted.orange.basic.button.active {
+  box-shadow: 0px 0px 0px 2px #ff851b inset !important;
+  color: #ff851b !important;
+}
+.ui.inverted.orange.basic.buttons .button:active,
+.ui.inverted.orange.buttons .basic.button:active,
+.ui.inverted.orange.basic.button:active {
+  box-shadow: 0px 0px 0px 2px #f67300 inset !important;
+  color: #ff851b !important;
+}
+
+/*--- Pink ---*/
+
+.ui.pink.buttons .button,
+.ui.pink.button {
+  background-color: #d9499a;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
 }
-
-.ui.blue.buttons .button:hover,
-.ui.blue.button:hover,
-.ui.blue.buttons .active.button,
-.ui.blue.button.active {
-  background-color: #1AB8F3;
-  color: #FFFFFF;
+.ui.pink.button {
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
+}
+.ui.pink.buttons .button:hover,
+.ui.pink.button:hover {
+  background-color: #dc56a1;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.pink.buttons .button:active,
+.ui.pink.button:active {
+  background-color: #d22c8a;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.pink.buttons .button.active,
+.ui.pink.buttons .button.active:active,
+.ui.pink.button.active,
+.ui.pink.button .button.active:active {
+  background-color: #d5348e;
+  color: #ffffff;
+  text-shadow: none;
+}
+
+/* Basic */
+.ui.basic.pink.buttons .button,
+.ui.basic.pink.button {
+  box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+.ui.basic.pink.buttons .button:hover,
+.ui.basic.pink.button:hover {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #dc56a1 inset !important;
+  color: #dc56a1 !important;
+}
+.ui.basic.pink.buttons .button:active,
+.ui.basic.pink.button:active {
+  box-shadow: 0px 0px 0px 2px #d22c8a inset !important;
+  color: #d22c8a !important;
+}
+.ui.basic.pink.buttons .button.active,
+.ui.basic.pink.button.active {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #d22c8a inset !important;
+  color: #d22c8a !important;
+}
+.ui.buttons > .basic.pink.button:not(:first-child) {
+  margin-left: -2px;
 }
 
-.ui.blue.buttons .button:active,
-.ui.blue.button:active {
-  background-color: #0AA5DF;
-  color: #FFFFFF;
+/* Inverted */
+.ui.inverted.pink.buttons .button,
+.ui.inverted.pink.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px #ff8edf inset !important;
+  color: #ff8edf;
+}
+.ui.inverted.pink.buttons .button:hover,
+.ui.inverted.pink.button:hover {
+  box-shadow: 0px 0px 0px 2px #ff8edf inset !important;
+  background-color: #ff8edf;
+  color: #ffffff;
+}
+.ui.inverted.pink.buttons .button.active,
+.ui.inverted.pink.button.active {
+  box-shadow: 0px 0px 0px 2px #ff8edf inset !important;
+  background-color: #ff8edf;
+  color: #ffffff;
+}
+.ui.inverted.pink.buttons .button:active,
+.ui.inverted.pink.button:active {
+  box-shadow: 0px 0px 0px 2px #ff6ad5 inset !important;
+  background-color: #ff6ad5;
+  color: #ffffff;
+}
+
+/* Inverted Basic */
+.ui.inverted.pink.basic.buttons .button,
+.ui.inverted.pink.buttons .basic.button,
+.ui.inverted.pink.basic.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
+  color: #ffffff !important;
+}
+.ui.inverted.pink.basic.buttons .button:hover,
+.ui.inverted.pink.buttons .basic.button:hover,
+.ui.inverted.pink.basic.button:hover {
+  box-shadow: 0px 0px 0px 2px #ff8edf inset !important;
+  color: #ff8edf !important;
+}
+.ui.inverted.pink.basic.buttons .button.active,
+.ui.inverted.pink.buttons .basic.button.active,
+.ui.inverted.pink.basic.button.active {
+  box-shadow: 0px 0px 0px 2px #ff8edf inset !important;
+  color: #ff8edf !important;
+}
+.ui.inverted.pink.basic.buttons .button:active,
+.ui.inverted.pink.buttons .basic.button:active,
+.ui.inverted.pink.basic.button:active {
+  box-shadow: 0px 0px 0px 2px #ff6ad5 inset !important;
+  color: #ff8edf !important;
 }
 
 /*--- Purple ---*/
 
 .ui.purple.buttons .button,
 .ui.purple.button {
-  background-color: #564F8A;
-  color: #FFFFFF;
+  background-color: #564f8a;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+}
+.ui.purple.button {
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
 }
-
 .ui.purple.buttons .button:hover,
-.ui.purple.button:hover,
-.ui.purple.buttons .active.button,
-.ui.purple.button.active {
-  background-color: #3E3773;
-  color: #FFFFFF;
+.ui.purple.button:hover {
+  background-color: #5c5594;
+  color: #ffffff;
+  text-shadow: none;
 }
-
 .ui.purple.buttons .button:active,
 .ui.purple.button:active {
-  background-color: #2E2860;
-  color: #FFFFFF;
+  background-color: #484273;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.purple.buttons .button.active,
+.ui.purple.buttons .button.active:active,
+.ui.purple.button.active,
+.ui.purple.button .button.active:active {
+  background-color: #4c467a;
+  color: #ffffff;
+  text-shadow: none;
+}
+
+/* Basic */
+.ui.basic.purple.buttons .button,
+.ui.basic.purple.button {
+  box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+.ui.basic.purple.buttons .button:hover,
+.ui.basic.purple.button:hover {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #5c5594 inset !important;
+  color: #5c5594 !important;
+}
+.ui.basic.purple.buttons .button:active,
+.ui.basic.purple.button:active {
+  box-shadow: 0px 0px 0px 2px #484273 inset !important;
+  color: #484273 !important;
+}
+.ui.basic.purple.buttons .button.active,
+.ui.basic.purple.button.active {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #484273 inset !important;
+  color: #484273 !important;
+}
+.ui.buttons > .basic.purple.button:not(:first-child) {
+  margin-left: -2px;
+}
+
+/* Inverted */
+.ui.inverted.purple.buttons .button,
+.ui.inverted.purple.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px #cdc6ff inset !important;
+  color: #cdc6ff;
+}
+.ui.inverted.purple.buttons .button:hover,
+.ui.inverted.purple.button:hover {
+  box-shadow: 0px 0px 0px 2px #cdc6ff inset !important;
+  background-color: #cdc6ff;
+  color: #1b1c1d;
+}
+.ui.inverted.purple.buttons .button.active,
+.ui.inverted.purple.button.active {
+  box-shadow: 0px 0px 0px 2px #cdc6ff inset !important;
+  background-color: #cdc6ff;
+  color: #1b1c1d;
+}
+.ui.inverted.purple.buttons .button:active,
+.ui.inverted.purple.button:active {
+  box-shadow: 0px 0px 0px 2px #aea2ff inset !important;
+  background-color: #aea2ff;
+  color: #1b1c1d;
+}
+
+/* Inverted Basic */
+.ui.inverted.purple.basic.buttons .button,
+.ui.inverted.purple.buttons .basic.button,
+.ui.inverted.purple.basic.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
+  color: #ffffff !important;
+}
+.ui.inverted.purple.basic.buttons .button:hover,
+.ui.inverted.purple.buttons .basic.button:hover,
+.ui.inverted.purple.basic.button:hover {
+  box-shadow: 0px 0px 0px 2px #cdc6ff inset !important;
+  color: #cdc6ff !important;
+}
+.ui.inverted.purple.basic.buttons .button.active,
+.ui.inverted.purple.buttons .basic.button.active,
+.ui.inverted.purple.basic.button.active {
+  box-shadow: 0px 0px 0px 2px #cdc6ff inset !important;
+  color: #cdc6ff !important;
+}
+.ui.inverted.purple.basic.buttons .button:active,
+.ui.inverted.purple.buttons .basic.button:active,
+.ui.inverted.purple.basic.button:active {
+  box-shadow: 0px 0px 0px 2px #aea2ff inset !important;
+  color: #cdc6ff !important;
+}
+
+/*--- Red ---*/
+
+.ui.red.buttons .button,
+.ui.red.button {
+  background-color: #d95c5c;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+}
+.ui.red.button {
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
+}
+.ui.red.buttons .button:hover,
+.ui.red.button:hover {
+  background-color: #dc6868;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.red.buttons .button:active,
+.ui.red.button:active {
+  background-color: #d23f3f;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.red.buttons .button.active,
+.ui.red.buttons .button.active:active,
+.ui.red.button.active,
+.ui.red.button .button.active:active {
+  background-color: #d44747;
+  color: #ffffff;
+  text-shadow: none;
+}
+
+/* Basic */
+.ui.basic.red.buttons .button,
+.ui.basic.red.button {
+  box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+.ui.basic.red.buttons .button:hover,
+.ui.basic.red.button:hover {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #dc6868 inset !important;
+  color: #dc6868 !important;
+}
+.ui.basic.red.buttons .button:active,
+.ui.basic.red.button:active {
+  box-shadow: 0px 0px 0px 2px #d23f3f inset !important;
+  color: #d23f3f !important;
+}
+.ui.basic.red.buttons .button.active,
+.ui.basic.red.button.active {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #d23f3f inset !important;
+  color: #d23f3f !important;
+}
+.ui.buttons > .basic.red.button:not(:first-child) {
+  margin-left: -2px;
+}
+
+/* Inverted */
+.ui.inverted.red.buttons .button,
+.ui.inverted.red.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px #ff695e inset !important;
+  color: #ff695e;
+}
+.ui.inverted.red.buttons .button:hover,
+.ui.inverted.red.button:hover {
+  box-shadow: 0px 0px 0px 2px #ff695e inset !important;
+  background-color: #ff695e;
+  color: #ffffff;
+}
+.ui.inverted.red.buttons .button.active,
+.ui.inverted.red.button.active {
+  box-shadow: 0px 0px 0px 2px #ff695e inset !important;
+  background-color: #ff695e;
+  color: #ffffff;
+}
+.ui.inverted.red.buttons .button:active,
+.ui.inverted.red.button:active {
+  box-shadow: 0px 0px 0px 2px #ff483a inset !important;
+  background-color: #ff483a;
+  color: #ffffff;
+}
+
+/* Inverted Basic */
+.ui.inverted.red.basic.buttons .button,
+.ui.inverted.red.buttons .basic.button,
+.ui.inverted.red.basic.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
+  color: #ffffff !important;
+}
+.ui.inverted.red.basic.buttons .button:hover,
+.ui.inverted.red.buttons .basic.button:hover,
+.ui.inverted.red.basic.button:hover {
+  box-shadow: 0px 0px 0px 2px #ff695e inset !important;
+  color: #ff695e !important;
+}
+.ui.inverted.red.basic.buttons .button.active,
+.ui.inverted.red.buttons .basic.button.active,
+.ui.inverted.red.basic.button.active {
+  box-shadow: 0px 0px 0px 2px #ff695e inset !important;
+  color: #ff695e !important;
+}
+.ui.inverted.red.basic.buttons .button:active,
+.ui.inverted.red.buttons .basic.button:active,
+.ui.inverted.red.basic.button:active {
+  box-shadow: 0px 0px 0px 2px #ff483a inset !important;
+  color: #ff695e !important;
 }
 
 /*--- Teal ---*/
 
 .ui.teal.buttons .button,
 .ui.teal.button {
-  background-color: #00B5AD;
-  color: #FFFFFF;
+  background-color: #00b5ad;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+}
+.ui.teal.button {
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
 }
-
 .ui.teal.buttons .button:hover,
-.ui.teal.button:hover,
-.ui.teal.buttons .active.button,
-.ui.teal.button.active {
-  background-color: #009A93;
-  color: #FFFFFF;
+.ui.teal.button:hover {
+  background-color: #00c4bc;
+  color: #ffffff;
+  text-shadow: none;
 }
-
 .ui.teal.buttons .button:active,
 .ui.teal.button:active {
-  background-color: #00847E;
-  color: #FFFFFF;
+  background-color: #00918b;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.teal.buttons .button.active,
+.ui.teal.buttons .button.active:active,
+.ui.teal.button.active,
+.ui.teal.button .button.active:active {
+  background-color: #009c95;
+  color: #ffffff;
+  text-shadow: none;
+}
+
+/* Basic */
+.ui.basic.teal.buttons .button,
+.ui.basic.teal.button {
+  box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+.ui.basic.teal.buttons .button:hover,
+.ui.basic.teal.button:hover {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #00c4bc inset !important;
+  color: #00c4bc !important;
+}
+.ui.basic.teal.buttons .button:active,
+.ui.basic.teal.button:active {
+  box-shadow: 0px 0px 0px 2px #00918b inset !important;
+  color: #00918b !important;
+}
+.ui.basic.teal.buttons .button.active,
+.ui.basic.teal.button.active {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #00918b inset !important;
+  color: #00918b !important;
+}
+.ui.buttons > .basic.teal.button:not(:first-child) {
+  margin-left: -2px;
+}
+
+/* Inverted */
+.ui.inverted.teal.buttons .button,
+.ui.inverted.teal.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px #6dffff inset !important;
+  color: #6dffff;
+}
+.ui.inverted.teal.buttons .button:hover,
+.ui.inverted.teal.button:hover {
+  box-shadow: 0px 0px 0px 2px #6dffff inset !important;
+  background-color: #6dffff;
+  color: #1b1c1d;
+}
+.ui.inverted.teal.buttons .button.active,
+.ui.inverted.teal.button.active {
+  box-shadow: 0px 0px 0px 2px #6dffff inset !important;
+  background-color: #6dffff;
+  color: #1b1c1d;
+}
+.ui.inverted.teal.buttons .button:active,
+.ui.inverted.teal.button:active {
+  box-shadow: 0px 0px 0px 2px #49ffff inset !important;
+  background-color: #49ffff;
+  color: #1b1c1d;
+}
+
+/* Inverted Basic */
+.ui.inverted.teal.basic.buttons .button,
+.ui.inverted.teal.buttons .basic.button,
+.ui.inverted.teal.basic.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
+  color: #ffffff !important;
+}
+.ui.inverted.teal.basic.buttons .button:hover,
+.ui.inverted.teal.buttons .basic.button:hover,
+.ui.inverted.teal.basic.button:hover {
+  box-shadow: 0px 0px 0px 2px #6dffff inset !important;
+  color: #6dffff !important;
+}
+.ui.inverted.teal.basic.buttons .button.active,
+.ui.inverted.teal.buttons .basic.button.active,
+.ui.inverted.teal.basic.button.active {
+  box-shadow: 0px 0px 0px 2px #6dffff inset !important;
+  color: #6dffff !important;
+}
+.ui.inverted.teal.basic.buttons .button:active,
+.ui.inverted.teal.buttons .basic.button:active,
+.ui.inverted.teal.basic.button:active {
+  box-shadow: 0px 0px 0px 2px #49ffff inset !important;
+  color: #6dffff !important;
+}
+
+/*--- Yellow ---*/
+
+.ui.yellow.buttons .button,
+.ui.yellow.button {
+  background-color: #f2c61f;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+}
+.ui.yellow.button {
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
+}
+.ui.yellow.buttons .button:hover,
+.ui.yellow.button:hover {
+  background-color: #f3ca2d;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.yellow.buttons .button:active,
+.ui.yellow.button:active {
+  background-color: #e0b40d;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.yellow.buttons .button.active,
+.ui.yellow.buttons .button.active:active,
+.ui.yellow.button.active,
+.ui.yellow.button .button.active:active {
+  background-color: #eabc0e;
+  color: #ffffff;
+  text-shadow: none;
+}
+
+/* Basic */
+.ui.basic.yellow.buttons .button,
+.ui.basic.yellow.button {
+  box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+.ui.basic.yellow.buttons .button:hover,
+.ui.basic.yellow.button:hover {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #f3ca2d inset !important;
+  color: #f3ca2d !important;
+}
+.ui.basic.yellow.buttons .button:active,
+.ui.basic.yellow.button:active {
+  box-shadow: 0px 0px 0px 2px #e0b40d inset !important;
+  color: #e0b40d !important;
+}
+.ui.basic.yellow.buttons .button.active,
+.ui.basic.yellow.button.active {
+  background: transparent !important;
+  box-shadow: 0px 0px 0px 2px #e0b40d inset !important;
+  color: #e0b40d !important;
+}
+.ui.buttons > .basic.yellow.button:not(:first-child) {
+  margin-left: -2px;
+}
+
+/* Inverted */
+.ui.inverted.yellow.buttons .button,
+.ui.inverted.yellow.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px #ffe21f inset !important;
+  color: #ffe21f;
+}
+.ui.inverted.yellow.buttons .button:hover,
+.ui.inverted.yellow.button:hover {
+  box-shadow: 0px 0px 0px 2px #ffe21f inset !important;
+  background-color: #ffe21f;
+  color: #1b1c1d;
+}
+.ui.inverted.yellow.buttons .button.active,
+.ui.inverted.yellow.button.active {
+  box-shadow: 0px 0px 0px 2px #ffe21f inset !important;
+  background-color: #ffe21f;
+  color: #1b1c1d;
+}
+.ui.inverted.yellow.buttons .button:active,
+.ui.inverted.yellow.button:active {
+  box-shadow: 0px 0px 0px 2px #fada00 inset !important;
+  background-color: #fada00;
+  color: #1b1c1d;
+}
+
+/* Inverted Basic */
+.ui.inverted.yellow.basic.buttons .button,
+.ui.inverted.yellow.buttons .basic.button,
+.ui.inverted.yellow.basic.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
+  color: #ffffff !important;
+}
+.ui.inverted.yellow.basic.buttons .button:hover,
+.ui.inverted.yellow.buttons .basic.button:hover,
+.ui.inverted.yellow.basic.button:hover {
+  box-shadow: 0px 0px 0px 2px #ffe21f inset !important;
+  color: #ffe21f !important;
+}
+.ui.inverted.yellow.basic.buttons .button.active,
+.ui.inverted.yellow.buttons .basic.button.active,
+.ui.inverted.yellow.basic.button.active {
+  box-shadow: 0px 0px 0px 2px #ffe21f inset !important;
+  color: #ffe21f !important;
+}
+.ui.inverted.yellow.basic.buttons .button:active,
+.ui.inverted.yellow.buttons .basic.button:active,
+.ui.inverted.yellow.basic.button:active {
+  box-shadow: 0px 0px 0px 2px #fada00 inset !important;
+  color: #ffe21f !important;
+}
+
+/*-------------------
+       Primary
+--------------------*/
+
+.ui.primary.buttons .button,
+.ui.primary.button {
+  background-color: #3b83c0;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+}
+.ui.primary.button {
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
+}
+.ui.primary.buttons .button:hover,
+.ui.primary.button:hover {
+  background-color: #458ac6;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.primary.buttons .button:active,
+.ui.primary.button:active {
+  background-color: #3370a5;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.primary.buttons .active.button,
+.ui.primary.button.active {
+  background-color: #3576ac;
+  color: #ffffff;
+  text-shadow: none;
+}
+
+/*-------------------
+      Secondary
+--------------------*/
+
+.ui.secondary.buttons .button,
+.ui.secondary.button {
+  background-color: #1b1c1d;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+}
+.ui.secondary.button {
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
+}
+.ui.secondary.buttons .button:hover,
+.ui.secondary.button:hover {
+  background-color: #222425;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.secondary.buttons .button:active,
+.ui.secondary.button:active {
+  background-color: #0a0a0b;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.secondary.buttons .active.button,
+.ui.secondary.button.active {
+  background-color: #0f0f10;
+  color: #ffffff;
+  text-shadow: none;
 }
 
 /*---------------
@@ -1306,22 +2219,35 @@
 
 .ui.positive.buttons .button,
 .ui.positive.button {
-  background-color: #5BBD72 !important;
-  color: #FFFFFF;
+  background-color: #5bbd72 !important;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+}
+.ui.positive.button {
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
 }
-
 .ui.positive.buttons .button:hover,
 .ui.positive.button:hover,
 .ui.positive.buttons .active.button,
 .ui.positive.button.active {
-  background-color: #58CB73 !important;
-  color: #FFFFFF;
+  background-color: #66c17b !important;
+  color: #ffffff;
+  text-shadow: none;
 }
-
 .ui.positive.buttons .button:active,
 .ui.positive.button:active {
-  background-color: #4CB164 !important;
-  color: #FFFFFF;
+  background-color: #46ae5f !important;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.positive.buttons .button.active,
+.ui.positive.buttons .button.active:active,
+.ui.positive.button.active,
+.ui.positive.button .button.active:active {
+  background-color: #49b562;
+  color: #ffffff;
+  text-shadow: none;
 }
 
 /*---------------
@@ -1330,24 +2256,38 @@
 
 .ui.negative.buttons .button,
 .ui.negative.button {
-  background-color: #D95C5C !important;
-  color: #FFFFFF;
+  background-color: #d95c5c !important;
+  color: #ffffff;
+  text-shadow: none;
+  background-image: none;
+}
+.ui.negative.button {
+  box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
 }
-
 .ui.negative.buttons .button:hover,
 .ui.negative.button:hover,
 .ui.negative.buttons .active.button,
 .ui.negative.button.active {
-  background-color: #E75859 !important;
-  color: #FFFFFF;
+  background-color: #dc6868 !important;
+  color: #ffffff;
+  text-shadow: none;
 }
-
 .ui.negative.buttons .button:active,
 .ui.negative.button:active {
-  background-color: #D24B4C !important;
-  color: #FFFFFF;
+  background-color: #d23f3f !important;
+  color: #ffffff;
+  text-shadow: none;
+}
+.ui.negative.buttons .button.active,
+.ui.negative.buttons .button.active:active,
+.ui.negative.button.active,
+.ui.negative.button .button.active:active {
+  background-color: #d44747;
+  color: #ffffff;
+  text-shadow: none;
 }
 
+
 /*******************************
             Groups
 *******************************/
@@ -1355,8 +2295,12 @@
 .ui.buttons {
   display: inline-block;
   vertical-align: middle;
+  margin: 0em 0.25em 0em 0em;
+}
+.ui.buttons > .button:hover,
+.ui.buttons > .button.active {
+  position: relative;
 }
-
 .ui.buttons:after {
   content: ".";
   display: block;
@@ -1364,50 +2308,50 @@
   clear: both;
   visibility: hidden;
 }
-
 .ui.buttons .button:first-child {
   border-left: none;
 }
-
+.ui.buttons:not(.basic):not(.inverted) {
+  box-shadow: none;
+}
+.ui.buttons > .ui.button:not(.basic):not(.inverted),
+.ui.buttons:not(.basic):not(.inverted) > .button {
+  box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
+}
 .ui.buttons .button {
+  margin: 0em;
   float: left;
   border-radius: 0em;
+  margin: 0px 0px 0px 0px;
 }
-
 .ui.buttons .button:first-child {
   margin-left: 0em;
-  border-top-left-radius: 0.25em;
-  border-bottom-left-radius: 0.25em;
+  border-top-left-radius: 0.2857rem;
+  border-bottom-left-radius: 0.2857rem;
 }
-
 .ui.buttons .button:last-child {
-  border-top-right-radius: 0.25em;
-  border-bottom-right-radius: 0.25em;
+  border-top-right-radius: 0.2857rem;
+  border-bottom-right-radius: 0.2857rem;
 }
 
 /* Vertical  Style */
-
 .ui.vertical.buttons {
   display: inline-block;
 }
-
 .ui.vertical.buttons .button {
   display: block;
   float: none;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  margin: 0px 0px 0px 0px;
+  box-shadow: none;
 }
-
 .ui.vertical.buttons .button:first-child,
 .ui.vertical.buttons .mini.button:first-child,
 .ui.vertical.buttons .tiny.button:first-child,
 .ui.vertical.buttons .small.button:first-child,
 .ui.vertical.buttons .massive.button:first-child,
 .ui.vertical.buttons .huge.button:first-child {
-  margin-top: 0px;
-  border-radius: 0.25em 0.25em 0px 0px;
+  border-radius: 0.2857rem 0.2857rem 0px 0px;
 }
-
 .ui.vertical.buttons .button:last-child,
 .ui.vertical.buttons .mini.button:last-child,
 .ui.vertical.buttons .tiny.button:last-child,
@@ -1415,5 +2359,18 @@
 .ui.vertical.buttons .massive.button:last-child,
 .ui.vertical.buttons .huge.button:last-child,
 .ui.vertical.buttons .gigantic.button:last-child {
-  border-radius: 0px 0px 0.25em 0.25em;
-}
+  margin-bottom: 0px;
+  border-radius: 0px 0px 0.2857rem 0.2857rem;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+         Site Overrides
+*******************************/
+