/*** Button styles. ***/

.btn {
    text-transform: capitalize;
}

.downgradeButton, .renewButton, .upgradeButton {
  width: 100px;
  display: inline-block;
}

.btn-downgrade {
  padding-left: 0px;
  padding-right: 0px;
}

.spnm-btn-blue, .spnm-btn-white, .spnm-btn-delete, .spnm-btn-red, .spnm-btn-green, .spnm-btn-purple {
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.2);
  padding: 7px 10px;
  font-weight: bold;
  outline: none;
  min-width: 70px;
  text-align: center;
  cursor: pointer;
}

a.spnm-btn-blue, a.spnm-btn-white, a.spnm-btn-delete, a.spnm-btn-red, a.spnm-btn-purple, a.spnm-btn-green {
  text-decoration: none;
  display: inline-block;
}

a.spnm-btn-blue, a.spnm-btn-red, a.spnm-btn-purple, a.spnm-btn-green {
  color: #FFF;
}

a.spnm-btn-white {
  color: #616366;
}

.spnm-btn-blue {
  border-color: #3E79B4; /* Old browsers */
  background: #489cf0; /* Old browsers */
  background: -moz-linear-gradient(top, #489cf0 0%, #408bd6 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#489cf0), color-stop(100%,#408bd6)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #489cf0 0%,#408bd6 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #489cf0 0%,#408bd6 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #489cf0 0%,#408bd6 100%); /* IE10+ */
  background: linear-gradient(to bottom, #489cf0 0%,#408bd6 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#489cf0', endColorstr='#408bd6',GradientType=0 ); /* IE6-9 */
  color: #FFF;
}

.spnm-btn-blue:hover {
  color: #FFF;
  background: #58AAFC; /* Old browsers */
  background: -moz-linear-gradient(top, #58AAFC 0%, #4F99E3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#58AAFC), color-stop(100%,#4F99E3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #58AAFC 0%,#4F99E3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #58AAFC 0%,#4F99E3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #58AAFC 0%,#4F99E3 100%); /* IE10+ */
  background: linear-gradient(to bottom, #58AAFC 0%,#4F99E3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58AAFC', endColorstr='#4F99E3',GradientType=0 ); /* IE6-9 */
}

.spnm-btn-blue:active {
  background: none;
  background-color: #408BD6;
}

.spnm-btn-blue[disabled] {
  background: none;
  background-color: #58AAFC;
  cursor: default;
}

.spnm-btn-white, .spnm-btn-delete {
  color: #616366;
  border-color: #C4C4C4; /* Old browsers */
  background: #FCFEFF; /* Old browsers */
  background: -moz-linear-gradient(top, #FCFEFF 0%, #F5F6F7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFEFF), color-stop(100%,#F5F6F7)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #FCFEFF 0%,#F5F6F7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #FCFEFF 0%,#F5F6F7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #FCFEFF 0%,#F5F6F7 100%); /* IE10+ */
  background: linear-gradient(to bottom, #FCFEFF 0%,#F5F6F7 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFEFF', endColorstr='#F5F6F7',GradientType=0 ); /* IE6-9 */
}

.spnm-btn-white:hover {
  color: #616366;
  background: #fff; /* Old browsers */
  background: -moz-linear-gradient(top, #fff 0%, #FAFBFC 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#FAFBFC)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #fff 0%,#FAFBFC 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #fff 0%,#FAFBFC 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #fff 0%,#FAFBFC 100%); /* IE10+ */
  background: linear-gradient(to bottom, #fff 0%,#FAFBFC 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#FAFBFC',GradientType=0 ); /* IE6-9 */
}

.spnm-btn-delete:hover {
  color: #616366;
  border: 1px solid rgba(210,49,45,0.20);
  background: #f4d1d1; /* Old browsers */
  background: -moz-linear-gradient(top, rgba(209,49,43,0.02) 0%, rgba(209,48,44,0.08) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(209,49,43,0.02)), color-stop(100%,rgba(209,48,44,0.08))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(209,49,43,0.02) 0%,rgba(209,48,44,0.08) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(209,49,43,0.02) 0%,rgba(209,48,44,0.08) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(209,49,43,0.02) 0%,rgba(209,48,44,0.08) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(209,49,43,0.02) 0%,rgba(209,48,44,0.08) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefbfb', endColorstr='#f4d1d1',GradientType=0 ); /* IE6-9 */
}

.spnm-btn-white:active {
  background: none;
  background-color: #F5F6F7;
}

.spnm-btn-white[disabled] {
  background: none;
  color: #ABAFB3;
  cursor: default;
}

.spnm-btn-red {
  border-color: #B82B27; /* Old browsers */
  background: #EB4E49; /* Old browsers */
  background: -moz-linear-gradient(top, #EB4E49 0%, #D2322D 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EB4E49), color-stop(100%,#D2322D)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #EB4E49 0%,#D2322D 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #EB4E49 0%,#D2322D 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #EB4E49 0%,#D2322D 100%); /* IE10+ */
  background: linear-gradient(to bottom, #EB4E49 0%,#D2322D 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EB4E49', endColorstr='#D2322D',GradientType=0 ); /* IE6-9 */
  color: #FFF;
}

.spnm-btn-red:hover {
  color: #FFF;
  background: #F75E59; /* Old browsers */
  background: -moz-linear-gradient(top, #F75E59 0%, #C43833 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F75E59), color-stop(100%,#C43833)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #F75E59 0%,#C43833 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #F75E59 0%,#C43833 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #F75E59 0%,#C43833 100%); /* IE10+ */
  background: linear-gradient(to bottom, #F75E59 0%,#C43833 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F75E59', endColorstr='#C43833',GradientType=0 ); /* IE6-9 */
}

.spnm-btn-red:active {
  background: none;
  background-color: #C43833;
}

.spnm-btn-red[disabled] {
  background: none;
  background-color: #C43833;
  cursor: default;
}

.spnm-btn-green {
  border-color: #57992B; /* Old browsers */
  background: #7ACB4C; /* Old browsers */
  background: -moz-linear-gradient(top, #7ACB4C 0%, #65B232 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7ACB4C), color-stop(100%,#65B232)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #7ACB4C 0%,#65B232 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #7ACB4C 0%,#65B232 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #7ACB4C 0%,#65B232 100%); /* IE10+ */
  background: linear-gradient(to bottom, #7ACB4C 0%,#65B232 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ACB4C', endColorstr='#65B232',GradientType=0 ); /* IE6-9 */
  color: #FFF;
}

.spnm-btn-green:hover {
  color: #FFF;
  background: #89D95B; /* Old browsers */
  background: -moz-linear-gradient(top, #89D95B 0%, #72BF3F 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#89D95B), color-stop(100%,#72BF3F)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #89D95B 0%,#72BF3F 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #89D95B 0%,#72BF3F 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #89D95B 0%,#72BF3F 100%); /* IE10+ */
  background: linear-gradient(to bottom, #89D95B 0%,#72BF3F 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89D95B', endColorstr='#72BF3F',GradientType=0 ); /* IE6-9 */
}

.spnm-btn-green:active {
  background: none;
  background-color: #72BF3F;
}

.spnm-btn-purple {
  color: #FFF;
  background: #7558c8;
  background: -khtml-gradient(linear, left top, left bottom, from(#a384da), to(#7558c8));
  background: -moz-linear-gradient(top, #a384da 0%, #7558c8 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a384da), color-stop(100%, #7558c8));
  background: -webkit-linear-gradient(top, #a384da 0%, #7558c8 100%);
  background: -o-linear-gradient(top, #a384da 0%, #7558c8 100%);
  background: -ms-linear-gradient(top, #a384da 0%, #7558c8 100%);
  background: linear-gradient(top, #a384da 0%, #7558c8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a384da', endColorstr='#7558c8',GradientType=0 ); /* IE6-9 */
}

.spnm-btn-purple:hover {
  color: #FFF;
  background: #8265D5;
  background: -khtml-gradient(linear, left top, left bottom, from(#B091E7), to(#8265D5));
  background: -moz-linear-gradient(top, #B091E7 0%, #8265D5 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #B091E7), color-stop(100%, #8265D5));
  background: -webkit-linear-gradient(top, #B091E7 0%, #8265D5 100%);
  background: -o-linear-gradient(top, #B091E7 0%, #8265D5 100%);
  background: -ms-linear-gradient(top, #B091E7 0%, #8265D5 100%);
  background: linear-gradient(top, #B091E7 0%, #8265D5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B091E7', endColorstr='#8265D5',GradientType=0 ); /* IE6-9 */
}

.spnm-btn-purple:active {
  background: none;
  background-color: #7558c8;
}


/*** Counter button styles. ***/
/*** Used for buttons with a counter display, such as star or fork.  ***/

.spnm-btn-counter {
  position: relative;
}

.spnm-btn-counter .left {
  display: inline-block;
  width: 60%;
  float: left;
  padding-left: 10px;
}

.spnm-btn-counter .right {
  display: inline-block;
  background-color: #FFF;
  width: 40%;
  height: 31px;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 31px;
  border-radius: 0 4px 4px 0;
  border-left: 1px solid #d0d0d0;
}

.spnm-btn-counter .right:before {
  position: absolute;
  content: ' ';
  height: 0;
  width: 0;
  top: 7px;
  left: 0px;
  border-width: 8px;
  border-style: solid outset solid solid;
  border-color: transparent transparent transparent #C4C4C4;
}

.spnm-btn-counter .right:after {
  position: absolute;
  content: ' ';
  height: 0;
  width: 0;
  top: 7px;
  left: -1px;
  border-width: 8px;
  border-style: solid outset solid solid;
  border-color: transparent transparent transparent #FAFAFA;
}

.spnm-btn-counter:hover .right:after {
  border-color: transparent transparent transparent #FCFDFD;
}

.spnm-btn-counter:active .right:after {
  border-color: transparent transparent transparent #F5F6F7;
}

#starButton i, #forkButton i {
  margin-right: 5px;
}


/*** Split button styles. ***/
/*** Used for buttons that toggle between two options, such as monthly/annual.  ***/

.spnm-btn-split {
  line-height: 31px;
  border-radius: 4px;
}

.spnm-btn-split .left,
.spnm-btn-split .right {
  display: block;
  padding: 0 7px;
  text-decoration: none;
  float: left;
  font-weight: normal;
  border-color: #D03433;
  color: #3B3B3B;
}

.spnm-btn-split .right {
  border-left: 1px solid #D03433;
  border-radius: 0 4px 4px 0;
  position: relative;
  left: -1px;
}

.spnm-btn-split .left {
  border-radius: 4px 0 0 4px;
}

.spnm-btn-split .left.selected,
.spnm-btn-split .right.selected {
  color: #FFF;
  background: #C43833; /* Old browsers */
  background: -moz-linear-gradient(top, #C43833 0%, #F75E59 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C43833), color-stop(100%,#F75E59)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #C43833 0%,#F75E59 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #C43833 0%,#F75E59 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #C43833 0%,#F75E59 100%); /* IE10+ */
  background: linear-gradient(to bottom, #C43833 0%,#F75E59 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C43833', endColorstr='#F75E59',GradientType=0 ); /* IE6-9 */
  box-shadow: inset 0 1px 2px #D03433;
}