SemanSemantic-UItic-UI/docs/ui/classic/elements/button.css

/*******************************
           UI Button
*******************************/

/*--------------
 Standard Button
---------------*/

.ui {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* Normal */
.ui.button {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;

  min-height: 1em;

  border: 1px solid #007ADF;

  background-color: #1DAAFB;
  background: -webkit-linear-gradient(top, #22C1FC 0%, #1995FB 100%);
  background: -moz-linear-gradient(top, #22C1FC 0%, #1995FB 100%);
  background: -o-linear-gradient(top, #22C1FC 0%, #1995FB 100%);
  background: -ms-linear-gradient(top, #22C1FC 0%, #1995FB 100%);
  background: linear-gradient(top, #22C1FC 0%, #1995FB 100%);

  padding: 7px 15px;

  font-size: 13px;
  line-height: 1;
  font-weight: bold;
  font-style: normal;
  color: #FFFFFF;

  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
  text-align: center;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  -webkit-box-shadow:
    0px 0px 1px rgba(255, 255, 255, 0.75) inset
  ;
  -moz-box-shadow:
    0px 0px 1px rgba(255, 255, 255, 0.75) inset
  ;
  box-shadow:
    0px 0px 1px rgba(255, 255, 255, 0.75) inset
  ;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  -webkit-transition:
    opacity 0.1s linear,
    background 0.1s linear,
    box-shadow 0.1s linear
  ;
  -moz-transition:
    opacity 0.1s linear,
    background 0.1s linear,
    box-shadow 0.1s linear
  ;
  -o-transition:
    opacity 0.1s linear,
    background 0.1s linear,
    box-shadow 0.1s linear
  ;
  -ms-transition:
    opacity 0.1s linear,
    background 0.1s linear,
    box-shadow 0.1s linear
  ;
  transition:
    opacity 0.1s linear,
    background 0.1s linear,
    box-shadow 0.1s linear
  ;
}
.ui.button a {
  color: #FFFFFF;
}

/*--------------
      Icons
---------------*/
.ui.button i {
  line-height: 1;
  margin-right: 0.2em;
}

/* left arrow icons */
.ui.button i.icon.left,
.ui.button i.icon.left-open,
.ui.button i.icon.left-dir {
  margin: 0em 0.2em 0em;
}
/* right positioned icons */
.ui.button i.icon.up,
.ui.button i.icon.up-open,
.ui.button i.icon.up-dir,
.ui.button i.icon.down,
.ui.button i.icon.down-open,
.ui.button i.icon.down-dir,
.ui.button i.icon.right,
.ui.button i.icon.right-open,
.ui.button i.icon.right-dir {
  margin: 0em;
}

/*--------------
      Labels
---------------*/

.ui.button .label {
  vertical-align: baseline;
  color: #AAAAAA;
  font-size: 10px;
  font-weight: bold;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
}

/*******************************
            Modifiers
*******************************/

/* Image Buttons */
.ui.icon.buttons .button,
.ui.icon.button {
  padding: 7px;
  text-align: center;
}
.ui.icon.buttons .button i,
.ui.icon.button i {
  margin: 0px;
  vertical-align: text-top;
}
/* Image Button Resizes */
.ui.icon.buttons.mini .button,
.ui.mini.icon.button {
  padding: 4px;
}
.ui.tiny.icon.buttons .button,
.ui.tiny.icon.button {
  padding: 6px;
}
.ui.small.icon.buttons .button,
.ui.small.icon.button {
  padding: 6px;
}
.ui.medium.icon.buttons .button,
.ui.medium.icon.button {
  padding: 7px;
}
.ui.big.icon.buttons .button,
.ui.big.icon.button {
  padding: 10px;
}
.ui.huge.icon.buttons .button,
.ui.huge.icon.button {
  padding: 11px;
}
.ui.massive.icon.buttons .button,
.ui.massive.icon.button {
  padding: 15px;
}
.ui.gigantic.icon.buttons .button,
.ui.gigantic.icon.button {
  padding: 18px;
}


/* Toggle */
.ui.toggle.buttons .button.active,
.ui.buttons .button.toggle.active,
.ui.button.toggle.active {
  border: 1px solid #77CF66;

  color: #1DA523;
  text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8);

  background: -webkit-linear-gradient(top, #D2FDC4 0%, #C9FFB7 100%);
  background: -moz-linear-gradient(top, #D2FDC4 0%, #C9FFB7 100%);
  background: -o-linear-gradient(top, #D2FDC4 0%, #C9FFB7 100%);
  background: -ms-linear-gradient(top, #D2FDC4 0%, #C9FFB7 100%);
  background: linear-gradient(top, #D2FDC4 0%, #C9FFB7 100%);

  -webkit-box-shadow:
    0px 0px 4px -2px #116922 inset
  ;
  -moz-box-shadow:
    0px 0px 4px -2px #116922 inset
  ;
  box-shadow:
    0px 0px 4px -2px #116922 inset
  ;
}
.ui.grey.button.toggle.active a,
.ui.button.toggle.active a {
  color: #21A627;
}
.ui.buttons.toggle .ui.button.active.hover,
.ui.buttons .ui.button.toggle.active.hover,
.ui.button.toggle.active.hover {
  border: 1px solid #77CF66;
  color: #21A627;

  text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.5);

  background: -webkit-linear-gradient(top, #BBF0A9 0%, #B6F3A2 100%);
  background: -moz-linear-gradient(top, #BBF0A9 0%, #B6F3A2 100%);
  background: -o-linear-gradient(top, #BBF0A9 0%, #B6F3A2 100%);
  background: -ms-linear-gradient(top, #BBF0A9 0%, #B6F3A2 100%);
  background: linear-gradient(top, #BBF0A9 0%, #B6F3A2 100%);

  -webkit-box-shadow:
    0px 0px 4px -2px #116922 inset
  ;
  -moz-box-shadow:
    0px 0px 4px -2px #116922 inset
  ;
  box-shadow:
    0px 0px 4px -2px #116922 inset
  ;
}
.ui.button.toggle.active.hover.loading,
.ui.button.toggle.active.loading {
  border-color: #CCCCCC;
}
.ui.button.toggle.active.hover.down {
  border: 1px solid #77CF66;

  color: #21A627;
  text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.5);

  background: -webkit-linear-gradient(top, #B6F3A2 0%, #BBF0A9 100%);
  background: -moz-linear-gradient(top, #B6F3A2 0%, #BBF0A9 100%);
  background: -o-linear-gradient(top, #B6F3A2 0%, #BBF0A9 100%);
  background: -ms-linear-gradient(top, #B6F3A2 0%, #BBF0A9 100%);
  background: linear-gradient(top, #B6F3A2 0%, #BBF0A9 100%);

  -webkit-box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset;
  -moz-box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset;
  box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset;
}


/* Fluid Width */
.ui.button.fluid {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/* Bubbly Variation */
.ui.button.bubbly {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}

/* Button attached to a form element */

input + .ui.attached.button {
  display: inline-block;
  min-width: 40px;
  margin: 0px 0px 0px -15px;
  height: 14px;
  padding: 8px 15px;
  border: 1px solid #D0D0D0;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;

  -webkit-border-radius: 0px 5px 5px 0px;
  -moz-border-radius: 0px 5px 5px 0px;
  border-radius: 0px 5px 5px 0px;

  vertical-align: top;
}
input + .ui.attached.button.down {
  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
}
.ui.attached.button.loading,
.ui.attached.button.loading.hover {
  opacity: 1;
}

/*-------------------
    Wrapping Style
--------------------*/

.ui.button.attached {
  display: block;
}
.ui.button.attached.top {
  margin-left: -1px;
  margin-right: -1px;
  -webkit-border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
}
.ui.button.attached.bottom {
  margin-left: -1px;
  margin-right: -1px;
  -webkit-border-radius: 0px 0px 5px 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  border-radius: 0px 0px 5px 5px;
}

.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;
}


/*******************************
            Colors
*******************************/


/*--------------
   Solid Button
---------------*/

/* blue solid */
.ui.solid.button,
.ui.solid.button.active,
.ui.solid.buttons .button,
.ui.solid.buttons .button.active {
  background-color: #009FDA;
  color: #FFFFFF;
  background-image: none !important;
  text-shadow: none !important;

  border: none !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.ui.solid.button.hover,
.ui.solid.buttons .button.hover,
.ui.solid.button.down,
.ui.solid.buttons .button.down {
  background-color: #0092C8;
}
.ui.solid.button.disabled,
.ui.solid.buttons .button.disabled {
  background-color: #009FDA !important;
}

/* grey solid */
.ui.solid.grey.button,
.ui.solid.grey.buttons .button {
  background-color: #F6F6F6;
  color: #7A7A7A;
}
.ui.solid.grey.button.hover,
.ui.solid.grey.buttons .button.hover,
.ui.solid.grey.button.down,
.ui.solid.grey.buttons .button.down {
  background-color: #F0F0F0;
}
.ui.solid.grey.button.active,
.ui.solid.grey.buttons .button.active {
  background-color: #F0F0F0;
  color: #555555
}
.ui.solid.grey.button.disabled,
.ui.solid.grey.buttons .button.disabled {
  background-color: #F6F6F6 !important;
}


/* purple solid */
.ui.solid.purple.button,
.ui.buttons .solid.purple.button {
  background-color: #512598;
}
.ui.solid.purple.button.hover,
.ui.solid.purple.buttons .button.hover,
.ui.solid.purple.button.down,
.ui.solid.purple.buttons .button.down {
  background-color: #3F1B7B;
}
.ui.solid.purple.button.disabled,
.ui.solid.purple.buttons .button.disabled {
  background-color: #512598 !important;
}



/*--------------
   Grey Button
---------------*/

.ui.grey.buttons .button,
.ui.grey.button {
  border: 1px solid #CCCCCC;

  background-color: #F3F3F3;
  background: -webkit-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background: -moz-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background: -o-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background: -ms-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background: linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);

  color: #737373;
  font-weight: bold;
  text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8);
}
.ui.grey.buttons .button,
.ui.grey.buttons .button a,
.ui.grey.button a {
  color: #737373;
}

/* Hover */
.ui.grey.buttons .button.hover,
.ui.grey.button.hover {
  background-color: #EAEAEA;
  border-color: #BABABA;
  background: -webkit-linear-gradient(top, #FFFFFF 0%, #EAEAEA 100%);
  background: -moz-linear-gradient(top, #FFFFFF 0%, #EAEAEA 100%);
  background: -o-linear-gradient(top, #FFFFFF 0%, #EAEAEA 100%);
  background: -ms-linear-gradient(top, #FFFFFF 0%, #EAEAEA 100%);
  background: linear-gradient(top, #FFFFFF 0%, #EAEAEA 100%);
}
/* Down */
.ui.grey.buttons .button.down,
.ui.grey.button.down {
  border-color: #BABABA;
  background: -webkit-linear-gradient(top, #EAEAEA 0%, #FFFFFF 100%);
  background: -moz-linear-gradient(top, #EAEAEA 0%, #FFFFFF 100%);
  background: -o-linear-gradient(top, #EAEAEA 0%, #FFFFFF 100%);
  background: -ms-linear-gradient(top, #EAEAEA 0%, #FFFFFF 100%);
  background: linear-gradient(top, #EAEAEA 0%, #FFFFFF 100%);

  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15) inset;
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15) inset;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15) inset;
}

/* grey text is already  */
.ui.grey.buttons .button i:before,
.ui.grey.button i:before {
  opacity: 1;
}

/*---------------
  Purple Button
----------------*/

.ui.purple.button {
  border: 1px solid #7B5991;

  background-color: #6E4889;
  background-image: -webkit-linear-gradient(top, #7E5899 0%, #5A3475 100%);
  background-image: -moz-linear-gradient(top, #7E5899 0%, #5A3475 100%);
  background-image: -o-linear-gradient(top, #7E5899 0%, #5A3475 100%);
  background-image: -ms-linear-gradient(top, #7E5899 0%, #5A3475 100%);
  background-image: linear-gradient(top, #7E5899 0%, #5A3475 100%);
}
.ui.purple.button.hover {
  border: 1px solid #7B5991;

  background-color: #6E4889;
  background-image: -webkit-linear-gradient(top, #8c62aa 0%, #62397f 100%);
  background-image: -moz-linear-gradient(top, #8c62aa 0%, #62397f 100%);
  background-image: -o-linear-gradient(top, #8c62aa 0%, #62397f 100%);
  background-image: -ms-linear-gradient(top, #8c62aa 0%, #62397f 100%);
  background-image: linear-gradient(top, #8c62aa 0%, #62397f 100%);
}
.ui.purple.button.down {
  border: 1px solid #7B5991;

  background-color: #6E4889;
  background-image: -webkit-linear-gradient(top, #7639A2 0%, #9254BD 100%);
  background-image: -moz-linear-gradient(top, #7639A2 0%, #9254BD 100%);
  background-image: -o-linear-gradient(top, #7639A2 0%, #9254BD 100%);
  background-image: -ms-linear-gradient(top, #7639A2 0%, #9254BD 100%);
  background-image: linear-gradient(top, #7639A2 0%, #9254BD 100%);
}

/*--------------------
  Transparent Button
----------------------*/

.ui.transparent.buttons .button,
.ui.transparent.button {
  background-color: transparent;
  background-image: none;
  border: none;

  color: #777777;
  text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8);
  box-shadow: none;
}
.ui.transparent.buttons .button a,
.ui.transparent.button a {
  color: #777777;
}

/* States */
.ui.transparent.buttons .button.hover,
.ui.transparent.buttons .button.down,
.ui.transparent.button.hover,
.ui.transparent.button.down {
  background-image: none;
  color: #555555;
}

.ui.transparent.buttons .button.down {
  background-color: rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
}

.ui.transparent.buttons .button.hover a,
.ui.transparent.buttons .button.down a,
.ui.transparent.button.hover a,
.ui.transparent.button.down a {
  color: #555555;
}
.ui.transparent.buttons .button.active,
.ui.transparent.button.active {
  border: none !important;
}

/*******************************
             States
*******************************/

/* Hover */
.ui.button.hover {
  background-color: #19C1FF;
  background: -webkit-linear-gradient(top, #19C1FF 0%, #0085F3 100%);
  background: -moz-linear-gradient(top, #19C1FF 0%, #0085F3 100%);
  background: -o-linear-gradient(top, #19C1FF 0%, #0085F3 100%);
  background: -ms-linear-gradient(top, #19C1FF 0%, #0085F3 100%);
  background: linear-gradient(top, #19C1FF 0%, #0085F3 100%);
}
/* Down */
.ui.button.down {
  background: -webkit-linear-gradient(top, #008CFF 0%, #00AAE9 100%);
  background: -moz-linear-gradient(top, #008CFF 0%, #00AAE9 100%);
  background: -o-linear-gradient(top, #008CFF 0%, #00AAE9 100%);
  background: -ms-linear-gradient(top, #008CFF 0%, #00AAE9 100%);
  background: linear-gradient(top, #008CFF 0%, #00AAE9 100%);

  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
}

/* Active */
.ui.buttons .button.active,
.ui.button.active {
  border: 1px solid #BBBBBB;

  background-color: #E6E6E6;
  background: -webkit-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%);
  background: -moz-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%);
  background: -o-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%);
  background: -ms-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%);
  background: linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%);

  text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.3);

  -webkit-box-shadow:
    0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset
  ;
  -moz-box-shadow:
    0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset
  ;
  box-shadow:
    0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset
  ;
}
.ui.buttons .button.active,
.ui.buttons .button.active a,
.ui.button.active,
.ui.button.active a {
  color: #7A7A7A;
}
.ui.buttons .button.active.hover,
.ui.button.active.hover {
  background: #E0E0E0 -webkit-linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%);
  background: #E0E0E0 -moz-linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%);
  background: #E0E0E0 -o-linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%);
  background: #E0E0E0 -ms-linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%);
  background: #E0E0E0 linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%);

  border: 1px solid #B0B0B0;

  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;

  text-shadow: none;
}
.ui.buttons .button.active.hover,
.ui.buttons .button.active.hover a,
.ui.button.active.hover,
.ui.button.active.hover a {
  color: #555555;
}
.ui.buttons .button.active.hover.down,
.ui.button.active.hover.down {
  background: #E0E0E0 -webkit-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%);
  background: #E0E0E0 -moz-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%);
  background: #E0E0E0 -o-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%);
  background: #E0E0E0 -ms-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%);
  background: #E0E0E0 linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%);
}


/*-------------------
       Resizes
--------------------*/

.ui.buttons.mini .button,
.ui.mini.button {
  font-size: 9px;
  padding: 4px 5px;
  border-radius: 3px;
}
.ui.buttons.mini .button i,
.ui.mini.button i {
  vertical-align: top;
}
.ui.tiny.buttons .button,
.ui.tiny.button {
  font-size: 11px;
  font-weight: bold;
  padding: 6px 13px;
}
.ui.small.buttons .button,
.ui.small.button {
  font-size: 12px;
  padding: 6px 15px;
}
.ui.medium.buttons .button,
.ui.medium.button {
  font-size: 13px;
  padding: 7px 15px;
}
.ui.big.buttons .button,
.ui.big.button {
  font-size: 15px;
  padding: 10px 20px;
}
.ui.huge.buttons .button,
.ui.huge.button {
  font-size: 17px;
  padding: 11px 30px;
}
.ui.massive.buttons .button,
.ui.massive.button {
  padding: 15px 45px;

  font-size: 24px;
  font-weight: bold;

  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;

  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
}
.ui.gigantic.buttons .button,
.ui.gigantic.button {
  padding: 18px 45px;

  font-size: 30px;
  font-weight: bold;

  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;

  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
}

/* higher contrast on big buttons */

/* standard */
.ui.massive.buttons .button,
.ui.gigantic.buttons .button,
.ui.massive.button,
.ui.gigantic.button {
  background-image: -webkit-linear-gradient(top , #22C1FC 0%, #1286E0 100%);
  background-image: -moz-linear-gradient(top , #22C1FC 0%, #1286E0 100%);
  background-image: -o-linear-gradient(top , #22C1FC 0%, #1286E0 100%);
  background-image: -ms-linear-gradient(top , #22C1FC 0%, #1286E0 100%);
  background-image: linear-gradient(top , #22C1FC 0%, #1286E0 100%);
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
}
.ui.massive.buttons .button.hover,
.ui.gigantic.buttons .button.hover,
.ui.massive.button.hover,
.ui.gigantic.button.hover {
  background-image: -webkit-linear-gradient(top , #22C1FC 0%, #138FEF 100%);
  background-image: -moz-linear-gradient(top , #22C1FC 0%, #138FEF 100%);
  background-image: -o-linear-gradient(top , #22C1FC 0%, #138FEF 100%);
  background-image: -ms-linear-gradient(top , #22C1FC 0%, #138FEF 100%);
  background-image: linear-gradient(top , #22C1FC 0%, #138FEF 100%);
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
}
.ui.massive.buttons .button.down,
.ui.gigantic.buttons .button.down,
.ui.massive.button.down,
.ui.gigantic.button.down {
  background-image: -webkit-linear-gradient(top , #1286E0 0%, #22C1FC 100%);
  background-image: -moz-linear-gradient(top , #1286E0 0%, #22C1FC 100%);
  background-image: -o-linear-gradient(top , #1286E0 0%, #22C1FC 100%);
  background-image: -ms-linear-gradient(top , #1286E0 0%, #22C1FC 100%);
  background-image: linear-gradient(top , #1286E0 0%, #22C1FC 100%);
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3) inset;
}
.ui.massive.buttons .button.active,
.ui.gigantic.buttons .button.active,
.ui.massive.button.active,
.ui.gigantic.button.active {
  border: 1px solid #AAAAAA;
  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset;
  -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset;
}

/* grey */
.ui.massive.buttons .grey.button,
.ui.gigantic.buttons .grey.button,
.ui.button.massive.grey,
.ui.button.gigantic.grey {
  background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #CACACA 100%);
  background-image: -moz-linear-gradient(top, #FFFFFF 0%, #CACACA 100%);
  background-image: -o-linear-gradient(top, #FFFFFF 0%, #CACACA 100%);
  background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CACACA 100%);
  background-image: linear-gradient(top, #FFFFFF 0%, #CACACA 100%);
  color: #444444;
  text-shadow: 0px 2px 0px rgba(255, 255, 255, 0.3);
}
.ui.massive.buttons .grey.button.hover,
.ui.gigantic.buttons .grey.button.hover,
.ui.button.massive.grey.hover,
.ui.button.gigantic.grey.hover {
  background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #BBBBBB 100%);
  background-image: -moz-linear-gradient(top, #FFFFFF 0%, #BBBBBB 100%);
  background-image: -o-linear-gradient(top, #FFFFFF 0%, #BBBBBB 100%);
  background-image: -ms-linear-gradient(top, #FFFFFF 0%, #BBBBBB 100%);
  background-image: linear-gradient(top, #FFFFFF 0%, #BBBBBB 100%);
  color: #333333;
}

.ui.massive.buttons .grey.button.down,
.ui.gigantic.buttons .grey.button.down,
.ui.button.massive.grey.down,
.ui.button.gigantic.grey.down {
  background-image: -webkit-linear-gradient(top, #BBBBBB 0%, #FFFFFF 100%);
  background-image: -moz-linear-gradient(top, #BBBBBB 0%, #FFFFFF 100%);
  background-image: -o-linear-gradient(top, #BBBBBB 0%, #FFFFFF 100%);
  background-image: -ms-linear-gradient(top, #BBBBBB 0%, #FFFFFF 100%);
  background-image: linear-gradient(top, #BBBBBB 0%, #FFFFFF 100%);
  color: #333333;
}
/* purple */
.ui.massive.buttons .purple.button,
.ui.gigantic.buttons .purple.button,
.ui.button.purple.massive,
.ui.button.purple.gigantic {
  background-image: -webkit-linear-gradient(top, #845BA2 0%, #492563 100%);
  background-image: -moz-linear-gradient(top, #845BA2 0%, #492563 100%);
  background-image: -o-linear-gradient(top, #845BA2 0%, #492563 100%);
  background-image: -ms-linear-gradient(top, #845BA2 0%, #492563 100%);
  background-image: linear-gradient(top, #845BA2 0%, #492563 100%);
}
.ui.massive.buttons .purple.button.hover,
.ui.gigantic.buttons .purple.button.hover,
.ui.button.purple.massive.hover,
.ui.button.purple.gigantic.hover {
  background-image: -webkit-linear-gradient(top, #9355C2 0%, #4B2369 100%);
  background-image: -moz-linear-gradient(top, #9355C2 0%, #4B2369 100%);
  background-image: -o-linear-gradient(top, #9355C2 0%, #4B2369 100%);
  background-image: -ms-linear-gradient(top, #9355C2 0%, #4B2369 100%);
  background-image: linear-gradient(top, #9355C2 0%, #4B2369 100%);
}

.ui.massive.buttons .purple.button.down,
.ui.gigantic.buttons .purple.button.down,
.ui.button.purple.massive.down,
.ui.button.purple.gigantic.down {
  background-image: -webkit-linear-gradient(top, #4B2369 0%, #9355C2 100%);
  background-image: -moz-linear-gradient(top, #4B2369 0%, #9355C2 100%);
  background-image: -o-linear-gradient(top, #4B2369 0%, #9355C2 100%);
  background-image: -ms-linear-gradient(top, #4B2369 0%, #9355C2 100%);
  background-image: linear-gradient(top, #4B2369 0%, #9355C2 100%);
}

/* green button */
.ui.button.green,
.ui.button.success {
  background-color: #7DDC5C;
  background-image: -webkit-linear-gradient(top, #7DDC5C 0px, #58AB3B 100%);
  background-image: -moz-linear-gradient(top, #7DDC5C 0px, #58AB3B 100%);
  background-image: -o-linear-gradient(top, #7DDC5C 0px, #58AB3B 100%);
  background-image: -ms-linear-gradient(top, #7DDC5C 0px, #58AB3B 100%);
  background-image: linear-gradient(top, #7DDC5C 0px, #58AB3B 100%);
  color: #FFFFFF;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
  border-color: #4B9431;
}

.ui.button.green.hover,
.ui.button.success.hover {
  background-color: #7fe95a;
  background-image: -webkit-linear-gradient(top, #7fe95a 0px, #54b134 100%);
  background-image: -moz-linear-gradient(top, #7fe95a 0px, #54b134 100%);
  background-image: -o-linear-gradient(top, #7fe95a 0px, #54b134 100%);
  background-image: -ms-linear-gradient(top, #7fe95a 0px, #54b134 100%);
  background-image: linear-gradient(top, #7fe95a 0px, #54b134 100%);
  color: #FFFFFF;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
  border-color: #3a7f22;
}

.ui.button.green.down,
.ui.button.success.down {
  background-color: #59B94B;
  background-image: -webkit-linear-gradient(top, #71CA65 0px, #59B94B 100%);
  background-image: -moz-linear-gradient(top, #71CA65 0px, #59B94B 100%);
  background-image: -o-linear-gradient(top, #71CA65 0px, #59B94B 100%);
  background-image: -ms-linear-gradient(top, #71CA65 0px, #59B94B 100%);
  background-image: linear-gradient(top, #71CA65 0px, #59B94B 100%);
  color: #FFFFFF;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
  border-color: #588D0F;
}



/*******************************
            Loading
*******************************/

/* Loading */
.ui.button.loading,
.ui.button.loading.hover {
  position: relative;
  cursor: default;
  opacity: 0.75;
  color: #888888 !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: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  content: '';
  /* standard */
  background: url(../images/throbber-blue-tiny.gif) no-repeat 50% 50%;
  /* css 3 multi image */
  background-image: url(../images/throbber-blue-tiny.gif), -webkit-linear-gradient(top, #22C1FC 0%, #1995FB 100%);
  background-image: url(../images/throbber-blue-tiny.gif), -moz-linear-gradient(top, #22C1FC 0%, #1995FB 100%);
  background-image: url(../images/throbber-blue-tiny.gif), -o-linear-gradient(top, #22C1FC 0%, #1995FB 100%);
  background-image: url(../images/throbber-blue-tiny.gif), -ms-linear-gradient(top, #22C1FC 0%, #1995FB 100%);
  background-image: url(../images/throbber-blue-tiny.gif), linear-gradient(top, #22C1FC 0%, #1995FB 100%);
  background-position: 50% 50%, 0px 0px;
  background-repeat: no-repeat, repeat;

  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
/* Opposite color loader */
.ui.grey.button.loading,
.ui.button.active.loading {
  border-color: #BBBBBB
}
.ui.grey.button.loading:after,
.ui.button.active.loading:after {
  background-color: #FAFAFA;
  /* standard */
  background: url(../images/throbber-tiny.gif) no-repeat 50% 50%;
  /* css 3 multi image */
  background-image: url(../images/throbber-tiny.gif), -webkit-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background-image: url(../images/throbber-tiny.gif), -moz-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background-image: url(../images/throbber-tiny.gif), -o-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background-image: url(../images/throbber-tiny.gif), -ms-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background-image: url(../images/throbber-tiny.gif), linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background-position: 50% 50%, 0px 0px;
  background-repeat: no-repeat, repeat;
}

/* resizes */

/* blue */
.ui.huge.button.loading:after {
  background-image: url(../images/throbber-blue-small.gif), -webkit-linear-gradient(top, #22C1FC 0%, #1995FB 100%);
  background-image: url(../images/throbber-blue-small.gif), -moz-linear-gradient(top, #22C1FC 0%, #1995FB 100%);
  background-image: url(../images/throbber-blue-small.gif), -o-linear-gradient(top, #22C1FC 0%, #1995FB 100%);
  background-image: url(../images/throbber-blue-small.gif), -ms-linear-gradient(top, #22C1FC 0%, #1995FB 100%);
  background-image: url(../images/throbber-blue-small.gif), linear-gradient(top, #22C1FC 0%, #1995FB 100%);
}
.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/throbber-blue-medium.gif), -webkit-linear-gradient(top, #22C1FC 0%, #1995FB 100%);
  background-image: url(../images/throbber-blue-medium.gif), -moz-linear-gradient(top, #22C1FC 0%, #1995FB 100%);
  background-image: url(../images/throbber-blue-medium.gif), -o-linear-gradient(top, #22C1FC 0%, #1995FB 100%);
  background-image: url(../images/throbber-blue-medium.gif), -ms-linear-gradient(top, #22C1FC 0%, #1995FB 100%);
  background-image: url(../images/throbber-blue-medium.gif), linear-gradient(top, #22C1FC 0%, #1995FB 100%);
}

/* grey */
.ui.huge.grey.button.loading:after,
.ui.huge.button.loading.active:after {
  background-image: url(../images/throbber-small.gif), -webkit-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background-image: url(../images/throbber-small.gif), -moz-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background-image: url(../images/throbber-small.gif), -o-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background-image: url(../images/throbber-small.gif), -ms-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background-image: url(../images/throbber-small.gif), linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
}
.ui.massive.grey.buttons .button.loading:after,
.ui.gigantic.grey.buttons .button.loading:after,
.ui.massive.grey.button.loading:after,
.ui.gigantic.grey.button.loading:after,
.ui.massive.grey.buttons .button.loading.active:after,
.ui.gigantic.grey.buttons .button.loading.active:after,
.ui.massive.button.loading.active:after,
.ui.gigantic.button.loading.active:after {
  background-image: url(../images/throbber-medium.gif), -webkit-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background-image: url(../images/throbber-medium.gif), -moz-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background-image: url(../images/throbber-medium.gif), -o-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background-image: url(../images/throbber-medium.gif), -ms-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background-image: url(../images/throbber-medium.gif), linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
}


/*******************************
         Error States
*******************************/

.ui.buttons .button.error,
.ui.buttons .button.error.hover,
.ui.buttons .button.error.down,
.ui.button.error,
.ui.button.error.hover,
.ui.button.error.down {
  cursor: default;
  position: relative;

  border: 1px solid #AC161D;

  color: #FFFFFF;
  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.buttons .button.error:after,
.ui.buttons .button.error.hover:after,
.ui.buttons .button.error.down:after,
.ui.button.error:after,
.ui.button.error.hover:after,
.ui.button.error.down:after {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  content: '';
  /* standard */
  background: #EE141D url(../images/button-error.gif) no-repeat 50% 50%;
  /* css 3 multi image */
  background-image: url(../images/button-error.gif), -webkit-linear-gradient(top, #F36666 0px, #C53131 100%);
  background-image: url(../images/button-error.gif), -moz-linear-gradient(top, #F36666 0px, #C53131 100%);
  background-image: url(../images/button-error.gif), -o-linear-gradient(top, #F36666 0px, #C53131 100%);
  background-image: url(../images/button-error.gif), -ms-linear-gradient(top, #F36666 0px, #C53131 100%);
  background-image: url(../images/button-error.gif), linear-gradient(top, #F36666 0px, #C53131 100%);
}

.ui.button.success,
.ui.button.success.hover,
.ui.button.success.down {
  background-color: #59B94B;
  background-image: -webkit-linear-gradient(top , #71CA65 0px, #43A036 100%);
  background-image: -moz-linear-gradient(top , #71CA65 0px, #43A036 100%);
  background-image: -o-linear-gradient(top , #71CA65 0px, #43A036 100%);
  background-image: -ms-linear-gradient(top , #71CA65 0px, #43A036 100%);
  background-image: linear-gradient(top , #71CA65 0px, #43A036 100%);
  color: #FFFFFF;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
  border-color: #588D0F;
}

/* Disabled State */
.ui.button.disabled,
.ui.button.disabled.hover,
.ui.button.disabled.down {
  cursor: default;
  opacity: 0.6;
  color: #AAAAAA;
  border-color: #DDDDDD !important;
  background-color: #F0F0F0 !important;
  background-image: none !important;
  
  text-shadow: none !important;

  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}


/*******************************
      Buttons (Button Group)
*******************************/

.ui.buttons {
  overflow: hidden;
  padding-bottom: 2px;
}
.ui.buttons .button,
.ui.buttons .mini.button,
.ui.buttons .tiny.button,
.ui.buttons .small.button,
.ui.buttons .massive.button,
.ui.buttons .huge.button,
.ui.buttons .gigantic.button {
  float: left;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
.ui.buttons .button:first-child,
.ui.buttons .mini.button:first-child,
.ui.buttons .tiny.button:first-child,
.ui.buttons .small.button:first-child,
.ui.buttons .massive.button:first-child,
.ui.buttons .huge.button:first-child,
.ui.buttons .gigantic.button:first-child {
  margin-left: 0px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.ui.buttons .button:last-child,
.ui.buttons .mini.button:last-child,
.ui.buttons .tiny.button:last-child,
.ui.buttons .small.button:last-child,
.ui.buttons .massive.button:last-child,
.ui.buttons .huge.button:last-child,
.ui.buttons .gigantic.button:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Vertical  Style */
.ui.buttons.vertical {
  display: inline-block;
}
.ui.buttons.vertical .button {
  display: block;
  float: none;
}
.ui.buttons.vertical .button,
.ui.buttons.vertical .mini.button,
.ui.buttons.vertical .tiny.button,
.ui.buttons.vertical .small.button,
.ui.buttons.vertical .massive.button,
.ui.buttons.vertical .huge.button,
.ui.buttons.vertical .gigantic.button {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}
.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,
.ui.buttons.vertical .gigantic.button:first-child {
  margin-top: 0px;
  -moz-border-radius: 4px 4px 0px 0px;
  -webkit-border-radius: 4px 4px 0px 0px;
  border-radius: 4px 4px 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 4px 4px;
  -webkit-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px;
}

/* Only show multiple borders when changing colors in group */
.ui.buttons .grey.button + .grey.button,
.ui.buttons .blue.button + .blue.button,
.ui.buttons .purple.button + .purple.button,
.ui.buttons .green.button + .green.button {
  margin-left: -1px;
}
.ui.vertical.buttons .grey.button + .grey.button,
.ui.vertical.buttons .blue.button + .blue.button,
.ui.vertical.buttons .purple.button + .purple.button,
.ui.vertical.buttons .green.button + .green.button {
  margin-top: -1px;
}

/*******************************
       OR Button Divisions
*******************************/
.ui.buttons .or {
  position: relative;
  float: left;
}
.ui.buttons .or:before {
  position: absolute;
  top: 50%;
  left: 50%;
  content: 'or';
  background-color: #FFFFFF;

  line-height: 1;
  color: #AAAAAA;
  font-style: italic;
  text-align: center;

  -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6) inset;
  -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6) inset;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6) 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: 0px;
  left: 0px;
  content: ' ';

  background-color: transparent;
  border-top: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
}


/* Or Sizes */
.ui.buttons .or {
  width: 5px;
  height: 28px;
}
.ui.buttons .or:before {
  margin-top: -10px;
  margin-left: -12px;

  padding-top: 5px;
  width: 22px;
  height: 22px;

  font-size: 12px;
}
.ui.buttons .or:after {
  top: 4px;
  width: 5px;
  height: 18px;
}
.ui.fluid.buttons .or {
  width: 0px !important;
}
.ui.fluid.buttons .or:after{
  display: none;
}

/* mini */
.ui.mini.buttons .or,
.ui.buttons .mini.or {
  height: 19px;
}
.ui.mini.buttons .or:before,
.ui.buttons .mini.or:before {
  margin-left: -8px;
  margin-top: -6px;

  padding-top: 2px;
  width: 14px;
  height: 14px;

  font-size: 9px;
}
.ui.mini.buttons .or:after,
.ui.buttons .mini.or:after {
  top: 3px;
  width: 4px;
  height: 10px;
}

/* tiny */
.ui.tiny.buttons .or,
.ui.buttons .tiny.or {
  height: 26px;
}
.ui.tiny.buttons .or:before,
.ui.buttons .tiny.or:before {
  margin-left: -11px;
  margin-top: -10px;

  padding-top: 4px;
  width: 20px;
  height: 19px;

  font-size: 11px;
}
.ui.tiny.buttons .or:after,
.ui.buttons .tiny.or:after {
  top: 2px;
  width: 5px;
  height: 16px;
}

/* small */
.ui.small.buttons .or,
.ui.buttons .small.or {
  height: 26px;
}
.ui.small.buttons .or:before,
.ui.buttons .small.or:before {
  margin-left: -11px;
  margin-top: -10px;

  padding-top: 4px;
  width: 20px;
  height: 19px;

  font-size: 11px;
}
.ui.small.buttons .or:after,
.ui.buttons .small.or:after {
  top: 2px;
  width: 5px;
  height: 16px;
}

/* big */
.ui.big.buttons .or,
.ui.buttons .big.or {

}
.ui.big.buttons .or:before,
.ui.buttons .big.or:before {
  margin-left: -14px;
  margin-top: -8px;

  padding-top: 5px;
  width: 26px;
  height: 25px;

  font-size: 14px;
}
.ui.big.buttons .or:after,
.ui.buttons .big.or:after {
  top: 5px;
  width: 5px;
  height: 22px;
}

/* huge */
.ui.huge.buttons .or,
.ui.buttons .huge.or {
  width: 6px;
  height: 41px;
}
.ui.huge.buttons .or:before,
.ui.buttons .huge.or:before {
  margin-left: -15px;
  margin-top: -14px;

  padding-top: 6px;
  width: 30px;
  height: 29px;

  font-size: 15px;
}
.ui.huge.buttons .or:after, 
.ui.buttons .huge.or:after {
  top: 6px;
  width: 6px;
  height: 26px;
}




/* Wide Style */
.ui.buttons.wide {
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
  background: linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);

  -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) inset;
  -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) inset;
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) inset;

  border-radius: 3px;
  padding-bottom: 0px;
}
.ui.buttons.wide .button:last-child {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}


/*-------------------
       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;
}


/* Fluid */
.ui.fluid.buttons,
.ui.fluid.buttons > .button {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.ui.two.fluid.buttons > .button {
  width: 50%;
}
.ui.three.fluid.buttons > .button {
  width: 33.333%;
}
.ui.four.fluid.buttons > .button {
  width: 25%;
}
.ui.five.fluid.buttons > .button {
  width: 20%;
}
.ui.six.fluid.buttons > .button {
  width: 16.666%;
}
.ui.seven.fluid.buttons > .button {
  width: 14.285%;
}
.ui.eight.fluid.buttons > .button {
  width: 12.500%;
}
.ui.nine.fluid.buttons > .button {
  width: 11.11%;
}
.ui.ten.fluid.buttons > .button {
  width: 10%;
}
.ui.eleven.fluid.buttons > .button {
  width: 9.09%;
}
.ui.twelve.fluid.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.fluid.buttons > .button {
  height: 50%;
}
.ui.three.fluid.buttons > .button {
  height: 33.333%;
}
.ui.four.fluid.buttons > .button {
  height: 25%;
}
.ui.five.fluid.buttons > .button {
  height: 20%;
}
.ui.six.fluid.buttons > .button {
  height: 16.666%;
}
.ui.seven.fluid.buttons > .button {
  height: 14.285%;
}
.ui.eight.fluid.buttons > .button {
  height: 12.500%;
}
.ui.nine.fluid.buttons > .button {
  height: 11.11%;
}
.ui.ten.fluid.buttons > .button {
  height: 10%;
}
.ui.eleven.fluid.buttons > .button {
  height: 9.09%;
}
.ui.twelve.fluid.buttons > .button {
  height: 8.3333%;
}