SemanSemantic-UItic-UI/build/uncompressed/elements/button.css

/*
 * # Semantic Button
 * http://github.com/quirkyinc/semantic
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 * Released: April 17 2013
 */
/*******************************
            Button
*******************************/
/* Prototype */
.ui.button {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  min-height: 1em;
  outline: none;
  border: none;
  background-color: #EDEDED;
  color: #999999;
  padding: 0.8em 1.5em;
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1;
  font-weight: bold;
  font-style: normal;
  text-align: center;
  text-shadow: none;
  -webkit-border-radius: 0.3125em;
  -moz-border-radius: 0.3125em;
  border-radius: 0.3125em;
  -webkit-box-shadow: 0em -0.185rem 0em rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0em -0.185rem 0em rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0em -0.185rem 0em rgba(0, 0, 0, 0.1) 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.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
  -moz-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
  -o-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
  -ms-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
}
/*--------------
     Icon
---------------*/
.ui.button > .icon {
  margin-right: 0.5em;
  line-height: 1;
  -webkit-transition: opacity 0.1s ease
  ;
  -moz-transition: opacity 0.1s ease
  ;
  -o-transition: opacity 0.1s ease
  ;
  -ms-transition: opacity 0.1s ease
  ;
  transition: opacity 0.1s ease
  ;
}
/*******************************
             States
*******************************/
/*--------------
     Active
---------------*/
.ui.buttons .button.active,
.ui.button.active {
  opacity: 1 !important;
  background-color: #E6E6E6;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05)));
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
  background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
  background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
  -webkit-box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.1) inset;
}
.ui.buttons .button.active,
.ui.buttons .button.active a,
.ui.button.active,
.ui.button.active a {
  color: #666666;
}
/*--------------
      Hover
---------------*/
.ui.button:hover,
.ui.button.hover {
  opacity: 1 !important;
  background-color: #DEDEDE;
  color: #777777;
}
.ui.button:hover .icon,
.ui.button.hover .icon {
  opacity: 0.85;
}
/*--------------
  Down (:active)
---------------*/
/* Down */
.ui.button:active,
.ui.button.down {
  opacity: 1 !important;
  background-color: #D8D8D8;
  color: #777777;
  -webkit-box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
}
/*--------------
     Error
---------------*/
.ui.button.error,
.ui.button.error.hover,
.ui.button.error.down {
  cursor: default;
  position: relative !important;
  background-color: #D95C5C !important;
  color: transparent !important;
  text-shadow: none;
  -webkit-transition: all 0s linear;
  -moz-transition: all 0s linear;
  -o-transition: all 0s linear;
  -ms-transition: all 0s linear;
  transition: all 0s linear;
}
.ui.button.error .icon {
  opacity: 1;
  color: #FFFFFF;
}
.ui.button.error:after {
  position: absolute;
  left: 50%;
  content: "Error";
  margin-left: -1.8em;
  color: #FFFFFF;
  -webkit-animation: button-text 0.5s;
  -moz-animation: button-text 0.5s;
  -ms-animation: button-text 0.5s;
  -o-animation: button-text 0.5s;
  animation: button-text 0.5s;
}
.ui.button.error .icon:before {
  font-family: 'Icons';
  content: '\26a0';
}
/*--------------
     Success
---------------*/
.ui.button.success,
.ui.button.success.hover,
.ui.button.success.down {
  position: relative !important;
  background-color: #5BBD72 !important;
  color: transparent !important;
}
.ui.button.success .icon {
  opacity: 1;
  color: #FFFFFF;
}
.ui.button.success .icon:before {
  font-family: 'Icons';
  content: '\2611';
}
.ui.button.success:after {
  position: absolute;
  left: 50%;
  content: "Success";
  margin-left: -2em;
  color: #FFFFFF;
  -webkit-animation: button-text 0.5s;
  -moz-animation: button-text 0.5s;
  -ms-animation: button-text 0.5s;
  -o-animation: button-text 0.5s;
  animation: button-text 0.5s;
}
@-webkit-keyframes button-text {
  0% {
    -webkit-transform: translateY(100%);
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes button-text {
  0% {
    -moz-transform: translateY(100%);
    opacity: 0;
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@keyframes button-text {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*--------------
    Loading
---------------*/
.ui.button.loading,
.ui.button.loading.hover {
  position: relative;
  cursor: default;
  background-color: #F3F3F3 !important;
  color: transparent !important;
  text-shadow: none !important;
  background-image: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  -webkit-transition: all 0s linear;
  -moz-transition: all 0s linear;
  -o-transition: all 0s linear;
  -ms-transition: all 0s linear;
  transition: all 0s linear;
}
.ui.button.loading:after {
  position: absolute;
  top: 0em;
  left: 0em;
  width: 100%;
  height: 100%;
  content: '';
  background: transparent url(../images/loader-mini.gif) no-repeat 50% 50%;
}
.ui.labeled.icon.button.loading .icon {
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
/*-------------------
      Disabled
--------------------*/
.ui.button.disabled,
.ui.button.disabled.hover,
.ui.button.disabled.down {
  cursor: default;
  color: #DDDDDD;
  background-color: rgba(50, 50, 50, 0.05) !important;
  background-image: none !important;
  text-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
/*******************************
           Variations
*******************************/
/*--- Black ---*/
.ui.buttons.black .button,
.ui.button.black {
  background-color: #5C6166;
  color: #FFFFFF;
}
.ui.buttons.black .button.hover,
.ui.buttons.black .button:hover,
.ui.button.black.hover,
.ui.button.black:hover {
  background-color: #4C4C4C;
  color: #FFFFFF;
}
.ui.buttons.black .button.down,
.ui.buttons.black .button:active,
.ui.button.black.down,
.ui.button.black:active {
  background-color: #333333;
  color: #FFFFFF;
}
/*--- Green ---*/
.ui.buttons.green .button,
.ui.button.green {
  background-color: #5BBD72;
  color: #FFFFFF;
}
.ui.buttons.green .button.hover,
.ui.buttons.green .button:hover,
.ui.button.green.hover,
.ui.button.green:hover,
.ui.buttons.green .button.active,
.ui.button.green.active {
  background-color: #58cb73;
  color: #FFFFFF;
}
.ui.buttons.green .button.down,
.ui.buttons.green .button:active,
.ui.button.green.down,
.ui.button.green:active {
  background-color: #4CB164;
  color: #FFFFFF;
}
/*--- Red ---*/
.ui.buttons.red .button,
.ui.button.red {
  background-color: #D95C5C;
  color: #FFFFFF;
}
.ui.buttons.red .button.hover,
.ui.buttons.red .button:hover,
.ui.button.red.hover,
.ui.button.red:hover,
.ui.buttons.red .button.active,
.ui.button.red.active {
  background-color: #E75859;
  color: #FFFFFF;
}
.ui.buttons.red .button.down,
.ui.buttons.red .button:active,
.ui.button.red.down,
.ui.button.red:active {
  background-color: #D24B4C;
  color: #FFFFFF;
}
/*--- Blue ---*/
.ui.buttons.blue .button,
.ui.button.blue {
  background-color: #6ECFF5;
  color: #FFFFFF;
}
.ui.buttons.blue .button.hover,
.ui.buttons.blue .button:hover,
.ui.button.blue.hover,
.ui.button.blue:hover,
.ui.buttons.blue .button.active,
.ui.button.blue.active {
  background-color: #1AB8F3;
  color: #FFFFFF;
}
.ui.buttons.blue .button.down,
.ui.buttons.blue .button:active,
.ui.button.blue.down,
.ui.button.blue:active {
  background-color: #0AA5DF;
  color: #FFFFFF;
}
/*--- Purple ---*/
.ui.buttons.purple .button,
.ui.button.purple {
  background-color: #564F8A;
  color: #FFFFFF;
}
.ui.buttons.purple .button.hover,
.ui.buttons.purple .button:hover,
.ui.button.purple.hover,
.ui.button.purple:hover,
.ui.buttons.purple .button.active,
.ui.button.purple.active {
  background-color: #3E3773;
  color: #FFFFFF;
}
.ui.buttons.purple .button.down,
.ui.buttons.purple .button:active,
.ui.button.purple.down,
.ui.button.purple:active {
  background-color: #2E2860;
  color: #FFFFFF;
}
/*--- Teal ---*/
.ui.buttons.teal .button,
.ui.button.teal {
  background-color: #00B5AD;
  color: #FFFFFF;
}
.ui.buttons.teal .button.hover,
.ui.buttons.teal .button:hover,
.ui.button.teal.hover,
.ui.button.teal:hover,
.ui.buttons.teal .button.active,
.ui.button.teal.active {
  background-color: #009A93;
  color: #FFFFFF;
}
.ui.buttons.teal .button.down,
.ui.buttons.teal .button:active,
.ui.button.teal.down,
.ui.button.teal:active {
  background-color: #00847E;
  color: #FFFFFF;
}
/*---------------
    Positive
----------------*/
.ui.buttons.positive .button,
.ui.button.positive {
  background-color: #5BBD72 !important;
  color: #FFFFFF;
}
.ui.buttons.positive .button.hover,
.ui.buttons.positive .button:hover,
.ui.button.positive.hover,
.ui.button.positive:hover,
.ui.buttons.positive .button.active,
.ui.button.positive.active {
  background-color: #58CB73 !important;
  color: #FFFFFF;
}
.ui.buttons.positive .button.down,
.ui.buttons.positive .button:active,
.ui.button.positive.down,
.ui.button.positive:active {
  background-color: #4CB164 !important;
  color: #FFFFFF;
}
/*---------------
     Negative
----------------*/
.ui.buttons.negative .button,
.ui.button.negative {
  background-color: #D95C5C !important;
  color: #FFFFFF;
}
.ui.buttons.negative .button.hover,
.ui.buttons.negative .button:hover,
.ui.button.negative.hover,
.ui.button.negative:hover,
.ui.buttons.negative .button.active,
.ui.button.negative.active {
  background-color: #E75859 !important;
  color: #FFFFFF;
}
.ui.buttons.negative .button.down,
.ui.buttons.negative .button:active,
.ui.button.negative.down,
.ui.button.negative:active {
  background-color: #D24B4C !important;
  color: #FFFFFF;
}
/*-------------------
        Sizes
--------------------*/
.ui.buttons .button,
.ui.button {
  font-size: 1rem;
}
.ui.buttons.mini .button,
.ui.mini.button {
  font-size: 0.8rem;
  padding: 0.6em 0.8em;
}
.ui.tiny.buttons .button,
.ui.tiny.button {
  font-size: 0.9rem;
  padding: 0.6em 0.8em;
}
.ui.small.buttons .button,
.ui.small.button {
  font-size: 0.9rem;
}
.ui.large.buttons .button,
.ui.large.button {
  font-size: 1.125rem;
}
.ui.big.buttons .button,
.ui.big.button {
  font-size: 1.25rem;
}
.ui.huge.buttons .button,
.ui.huge.button {
  font-size: 1.375rem;
  padding-left: 2em;
  padding-right: 2em;
}
.ui.massive.buttons .button,
.ui.massive.button {
  font-size: 1.5rem;
  font-weight: bold;
  padding-left: 2.5em;
  padding-right: 2.5em;
}
/* loading */
.ui.huge.button.loading:after {
  background-image: url(../images/loader-small.gif);
}
.ui.massive.buttons .button.loading:after,
.ui.gigantic.buttons .button.loading:after,
.ui.massive.button.loading:after,
.ui.gigantic.button.loading:after {
  background-image: url(../images/loader-medium.gif);
}
.ui.huge.button.loading:after,
.ui.huge.button.loading.active:after {
  background-image: url(../images/loader-small.gif);
}
.ui.massive.buttons .button.loading:after,
.ui.gigantic.buttons .button.loading:after,
.ui.massive.button.loading:after,
.ui.gigantic.button.loading:after,
.ui.massive.buttons .button.loading.active:after,
.ui.gigantic.buttons .button.loading.active:after,
.ui.massive.button.loading.active:after,
.ui.gigantic.button.loading.active:after {
  background-image: url(../images/loader-medium.gif);
}
/*--------------
    Icon Only
---------------*/
.ui.icon.buttons .button,
.ui.icon.button {
  padding: 0.8em;
}
.ui.icon.buttons .button > .icon,
.ui.icon.button > .icon {
  opacity: 1;
  margin: 0em;
  vertical-align: top;
}
/*-------------------
      Ordinality
--------------------*/
.ui.buttons.secondary .button,
.ui.secondary.button {
  font-weight: normal;
  text-transform: none;
  opacity: 1;
}
/*--- Tertiary ---*/
.ui.buttons.tertiary .button,
.ui.tertiary.button {
  background-color: transparent;
  background-image: none;
  color: #999999;
  font-weight: normal;
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
}
.ui.buttons.tertiary .button {
  border-left: none;
}
.ui.button.tertiary.active {
  opacity: 0.9 !important;
}
.ui.button.tertiary.hover,
.ui.button.tertiary:hover {
  opacity: 0.8 !important;
}
.ui.button.tertiary.down,
.ui.button.tertiary:active {
  opacity: 1 !important;
}
/*--------------
   Labeled Icon
---------------*/
.ui.labeled.icon.buttons .button,
.ui.labeled.icon.button {
  position: relative;
  padding-left: 4em !important;
  padding-right: 1.4em !important;
}
.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;
  height: 100%;
  padding-top: 0.8em;
  background-color: rgba(0, 0, 0, 0.05);
  text-align: center;
  -webkit-border-radius: 0.3125em 0px 0px 0.3125em;
  -moz-border-radius: 0.3125em 0px 0px 0.3125em;
  border-radius: 0.3125em 0px 0px 0.3125em;
  line-height: 1;
  -webkit-box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
  -moz-box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
  box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
}
.ui.labeled.icon.buttons .button > .icon {
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  border-radius: 0em;
}
.ui.labeled.icon.buttons .button:first-child > .icon {
  border-top-left-radius: 0.3125em;
  border-bottom-left-radius: 0.3125em;
}
.ui.labeled.icon.buttons .button:last-child > .icon {
  border-top-right-radius: 0.3125em;
  border-bottom-right-radius: 0.3125em;
}
.ui.vertical.labeled.icon.buttons .button:first-child > .icon {
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  border-radius: 0em;
  border-top-left-radius: 0.3125em;
}
.ui.vertical.labeled.icon.buttons .button:last-child > .icon {
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  border-radius: 0em;
  border-bottom-left-radius: 0.3125em;
}
.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;
}
.ui.right.labeled.icon.button .icon {
  left: auto;
  right: 0em;
}
/*--------------
     Toggle
---------------*/
/* Toggle (Modifies active state to give affordances) */
.ui.toggle.buttons .button.active,
.ui.buttons .button.toggle.active,
.ui.button.toggle.active {
  background-color: #BBF0A9;
  color: #1C8C21;
}
.ui.buttons.toggle .ui.button.active.hover,
.ui.buttons .ui.button.toggle.active.hover,
.ui.button.toggle.active.hover {
  color: #FFFFFF;
  background-color: #BBF0A9;
}
/*--------------
     Bubbly
---------------*/
.ui.circular.button {
  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  border-radius: 10em;
}
/*--------------
     Attached
---------------*/
.ui.button.attached {
  display: block;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
  -moz-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;
}
.ui.button.attached.top {
  -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
  -moz-border-radius: 0.3125em 0.3125em 0em 0em;
  border-radius: 0.3125em 0.3125em 0em 0em;
}
.ui.button.attached.bottom {
  -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
  -moz-border-radius: 0em 0em 0.3125em 0.3125em;
  border-radius: 0em 0em 0.3125em 0.3125em;
}
.ui.button.attached.left {
  display: inline-block;
  border-left: none;
  padding-right: 0.75em;
  text-align: right;
  -webkit-border-radius: 0.3125em 0em 0em 0.3125em;
  -moz-border-radius: 0.3125em 0em 0em 0.3125em;
  border-radius: 0.3125em 0em 0em 0.3125em;
}
.ui.button.attached.right {
  display: inline-block;
  padding-left: 0.75em;
  text-align: left;
  -webkit-border-radius: 0em 0.3125em 0.3125em 0em;
  -moz-border-radius: 0em 0.3125em 0.3125em 0em;
  border-radius: 0em 0.3125em 0.3125em 0em;
}
/*-------------------
      Or Buttons
--------------------*/
.ui.buttons .or {
  position: relative;
  float: left;
  width: 0.3em;
  height: 1em;
  z-index: 3;
}
.ui.buttons .or:before {
  position: absolute;
  top: 50%;
  left: 50%;
  content: 'or';
  background-color: #FFFFFF;
  margin-top: -0.15em;
  margin-left: -0.9em;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.66;
  color: #AAAAAA;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset;
  -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset;
  -moz-border-radius: 500px;
  -webkit-border-radius: 500px;
  border-radius: 500px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.ui.buttons .or:after {
  position: absolute;
  top: 0em;
  left: 0em;
  content: ' ';
  width: 0.3em;
  height: 1.8em;
  background-color: transparent;
  border-top: 0.6em solid #FFFFFF;
  border-bottom: 0.6em solid #FFFFFF;
}
/* Fluid Or */
.ui.fluid.buttons .or {
  width: 0em !important;
}
.ui.fluid.buttons .or:after {
  display: none;
}
/*-------------------
       Attached
--------------------*/
/* Plural Attached */
.attached.ui.buttons {
  margin: 0px;
  -webkit-border-radius: 4px 4px 0px 0px;
  -moz-border-radius: 4px 4px 0px 0px;
  border-radius: 4px 4px 0px 0px;
}
.attached.ui.buttons .button:first-child {
  -webkit-border-radius: 4px 0px 0px 0px;
  -moz-border-radius: 4px 0px 0px 0px;
  border-radius: 4px 0px 0px 0px;
}
.attached.ui.buttons .button:last-child {
  -webkit-border-radius: 0px 4px 0px 0px;
  -moz-border-radius: 0px 4px 0px 0px;
  border-radius: 0px 4px 0px 0px;
}
/* Bottom Side */
.bottom.attached.ui.buttons {
  margin-top: -1px;
  -webkit-border-radius: 0px 0px 4px 4px;
  -moz-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px;
}
.bottom.attached.ui.buttons .button:first-child {
  -webkit-border-radius: 0px 0px 0px 4px;
  -moz-border-radius: 0px 0px 0px 4px;
  border-radius: 0px 0px 0px 4px;
}
.bottom.attached.ui.buttons .button:last-child {
  -webkit-border-radius: 0px 0px 4px 0px;
  -moz-border-radius: 0px 0px 4px 0px;
  border-radius: 0px 0px 4px 0px;
}
/* Left Side */
.left.attached.ui.buttons {
  margin-left: -1px;
  -webkit-border-radius: 0px 4px 4px 0px;
  -moz-border-radius: 0px 4px 4px 0px;
  border-radius: 0px 4px 4px 0px;
}
.left.attached.ui.buttons .button:first-child {
  margin-left: -1px;
  -webkit-border-radius: 0px 4px 0px 0px;
  -moz-border-radius: 0px 4px 0px 0px;
  border-radius: 0px 4px 0px 0px;
}
.left.attached.ui.buttons .button:last-child {
  margin-left: -1px;
  -webkit-border-radius: 0px 0px 4px 0px;
  -moz-border-radius: 0px 0px 4px 0px;
  border-radius: 0px 0px 4px 0px;
}
/* Right Side */
.right.attached.ui.buttons,
.right.attached.ui.buttons .button {
  margin-right: -1px;
  -webkit-border-radius: 4px 0px 0px 4px;
  -moz-border-radius: 4px 0px 0px 4px;
  border-radius: 4px 0px 0px 4px;
}
.right.attached.ui.buttons .button:first-child {
  margin-left: -1px;
  -webkit-border-radius: 4px 0px 0px 0px;
  -moz-border-radius: 4px 0px 0px 0px;
  border-radius: 4px 0px 0px 0px;
}
.right.attached.ui.buttons .button:last-child {
  margin-left: -1px;
  -webkit-border-radius: 0px 0px 0px 4px;
  -moz-border-radius: 0px 0px 0px 4px;
  border-radius: 0px 0px 0px 4px;
}
/* Fluid */
.ui.fluid.buttons,
.ui.button.fluid,
.ui.fluid.buttons > .button {
  display: block;
  width: 100%;
}
.ui.two.buttons > .button {
  width: 50%;
}
.ui.three.buttons > .button {
  width: 33.333%;
}
.ui.four.buttons > .button {
  width: 25%;
}
.ui.five.buttons > .button {
  width: 20%;
}
.ui.six.buttons > .button {
  width: 16.666%;
}
.ui.seven.buttons > .button {
  width: 14.285%;
}
.ui.eight.buttons > .button {
  width: 12.500%;
}
.ui.nine.buttons > .button {
  width: 11.11%;
}
.ui.ten.buttons > .button {
  width: 10%;
}
.ui.eleven.buttons > .button {
  width: 9.09%;
}
.ui.twelve.buttons > .button {
  width: 8.3333%;
}
/* Fluid Vertical Buttons */
.ui.fluid.vertical.buttons,
.ui.fluid.vertical.buttons > .button {
  width: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.ui.two.vertical.buttons > .button {
  height: 50%;
}
.ui.three.vertical.buttons > .button {
  height: 33.333%;
}
.ui.four.vertical.buttons > .button {
  height: 25%;
}
.ui.five.vertical.buttons > .button {
  height: 20%;
}
.ui.six.vertical.buttons > .button {
  height: 16.666%;
}
.ui.seven.vertical.buttons > .button {
  height: 14.285%;
}
.ui.eight.vertical.buttons > .button {
  height: 12.500%;
}
.ui.nine.vertical.buttons > .button {
  height: 11.11%;
}
.ui.ten.vertical.buttons > .button {
  height: 10%;
}
.ui.eleven.vertical.buttons > .button {
  height: 9.09%;
}
.ui.twelve.vertical.buttons > .button {
  height: 8.3333%;
}
/*******************************
            Groups
*******************************/
.ui.buttons:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.ui.buttons .button {
  float: left;
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  border-radius: 0em;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
}
.ui.buttons .button:first-child {
  margin-left: 0em;
  border-top-left-radius: 0.3125em;
  border-bottom-left-radius: 0.3125em;
}
.ui.buttons .button:last-child {
  border-top-right-radius: 0.3125em;
  border-bottom-right-radius: 0.3125em;
}
/* Vertical  Style */
.ui.buttons.vertical {
  display: inline-block;
}
.ui.buttons.vertical .button {
  display: block;
  float: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-left: none;
  box-shadow: none;
}
.ui.buttons.vertical .button:first-child,
.ui.buttons.vertical .mini.button:first-child,
.ui.buttons.vertical .tiny.button:first-child,
.ui.buttons.vertical .small.button:first-child,
.ui.buttons.vertical .massive.button:first-child,
.ui.buttons.vertical .huge.button:first-child {
  margin-top: 0px;
  -moz-border-radius: 0.3125em 0.3125em 0px 0px;
  -webkit-border-radius: 0.3125em 0.3125em 0px 0px;
  border-radius: 0.3125em 0.3125em 0px 0px;
}
.ui.buttons.vertical .button:last-child,
.ui.buttons.vertical .mini.button:last-child,
.ui.buttons.vertical .tiny.button:last-child,
.ui.buttons.vertical .small.button:last-child,
.ui.buttons.vertical .massive.button:last-child,
.ui.buttons.vertical .huge.button:last-child,
.ui.buttons.vertical .gigantic.button:last-child {
  -moz-border-radius: 0px 0px 0.3125em 0.3125em;
  -webkit-border-radius: 0px 0px 0.3125em 0.3125em;
  border-radius: 0px 0px 0.3125em 0.3125em;
}