@charset "UTF-8";
/* CSS Document */

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/*body {
  background: #F3E9C1;
  color: #333;
  font: normal 14px Verdana, Arial, sans-serif;
}*/

/*p { margin: 1em auto; }*/

.sidebox {
	background: #FFF;
	color: #595F5F;
	width: 300px;
	padding: 10px;
	text-align: center;
  @include box-shadow(0 2px 5px #888);
	@include border-radius(5px);
  
  .sidebox-inner {
    border: 1px dashed #CBC7BC;
    padding: 10px 30px;
    
    h3 {
      color: #0AB651;
      font: bold 40px 'Komika Title Axis', Helvetica, Arial, sans-serif;
      line-height: 40px;
      margin: 0;
      text-align: center;
    }
    
    p { margin: 1.5em auto; }
    p:nth-last-of-type(1) { margin-bottom: 0; }
; 	margin-bottom: 0;
	margin-left: auto;
	margin-right: 0px;
	margin-top: 0;
  }
}

/* ==========================================================================
	Buttons
	
	Colors:
		.btn-blue
		.btn-green
		.btn-magenta
		.btn-orange
		.btn-red
   ========================================================================== */
/*
a[class*="btn-"] {
  color: #FFF;
  @include text-shadow(1px 1px 3px #212121);
}
*/

/* Main Button */
.btn, a.btn {
  color: #FFF;
  @include text-shadow(1px 1px 3px #212121);
  display: inline-block;
  text-decoration: none;
  font: normal 26px 'Action Man', 'comic sans ms', fantasy;
  padding: 8px 16px;
  @include box-shadow(0 1px 1px #999);
  @include box-shadow(0 1px 1px rgba(0,0,0,0.3));
  @include border-radius(5px);
  
  background: #CFCFCF;
	@include background-image(
	  linear-gradient(
	    color-stops(
	      #CFCFCF, 
	      darken(#CFCFCF, 10%) 50%, 
	      darken(#CFCFCF, 20%)
	    )
	  )
	);
	border: 1px solid darken(#CFCFCF, 28%);
  
  &:hover {
    background: darken(#CFCFCF, 10%);
    @include background-image(
      linear-gradient(
        color-stops(
          darken(#CFCFCF, 10%), 
          darken(#CFCFCF, 24%) 50%,
          darken(#CFCFCF, 36%)
        )
      )
    );
    border: 1px solid darken(#CFCFCF, 40%);
  }
}

.btn-blue, a.btn-blue {
  background: #2E8CF0;
  @include background-image(
    linear-gradient(
      color-stops(
        #67C0F8, 
        #3491F0 50%, 
        #2E8CF0
      )
    )
  );
  border: 1px solid #2C7CD1;
  
  &:hover {
    background: darken(#2E8CF0, 10%);
    @include background-image(
      linear-gradient(
        color-stops(
          darken(#67C0F8, 10%), 
          darken(#3491F0, 10%) 50%,
          darken(#2E8CF0, 10%)
        )
      )
    );
    border: 1px solid darken(#2C7CD1, 15%);
  }
}

.btn-green, a.btn-green {
  background: #67B31D;
  @include background-image(
    linear-gradient(
      color-stops(
        #C8E533, 
        #7ABD20 50%, 
        #67B31D
      )
    )
  );
  border: 1px solid #4B7F11;
  
  &:hover {
    background: darken(#67B31D, 10%);
    @include background-image(
      linear-gradient(
        color-stops(
          darken(#C8E533, 10%), 
          darken(#7ABD20, 10%) 50%,
          darken(#67B31D, 10%)
        )
      )
    );
    border: 1px solid darken(#4B7F11, 15%);
  }
}

.btn-orange, a.btn-orange {
  background: #F26421;
  @include background-image(
    linear-gradient(
      color-stops(
        #F99C1B, 
        #F57F1E 50%, 
        #F26421
      )
    )
  );
  border: 1px solid #D4531B;
  
  &:hover {
    background: darken(#F26421, 10%);
    @include background-image(
      linear-gradient(
        color-stops(
          darken(#F99C1B, 10%), 
          darken(#F57F1E, 10%) 50%,
          darken(#F26421, 10%)
        )
      )
    );
    border: 1px solid darken(#D4531B, 15%);
  }
}

.btn-magenta, a.btn-magenta {
  background: #C5346B;
  @include background-image(
    linear-gradient(
      color-stops(
        #D6598A, 
        #CC4277 50%, 
        #C5346B
      )
    )
  );
  border: 1px solid #CE2461;
  
  &:hover {
    background: darken(#C5346B, 10%);
    @include background-image(
      linear-gradient(
        color-stops(
          darken(#D6598A, 10%), 
          darken(#CC4277, 10%) 50%,
          darken(#C5346B, 10%)
        )
      )
    );
    border: 1px solid darken(#CE2461, 15%);
  }
}

.btn-red, a.btn-red {
  background: #CC372D;
  @include background-image(
    linear-gradient(
      color-stops(
        #F9675E, 
        #E04035 50%, 
        #CC372D
      )
    )
  );
  border: 1px solid #AE2E26;
  
  &:hover {
    background: darken(#CC372D, 10%);
    @include background-image(
      linear-gradient(
        color-stops(
          darken(#F9675E, 10%), 
          darken(#E04035, 10%) 50%,
          darken(#CC372D, 10%)
        )
      )
    );
    border: 1px solid darken(#AE2E26, 15%);
  }
}

.btn, a.btn {
  &:active {
    background: #212121;
    @include background-image(
      linear-gradient(
        color-stops(
          lighten(#212121, 24%), 
          lighten(#212121, 12%) 50%,
          lighten(#212121, 3%)
        )
      )
    );
    border: 1px solid darken(#212121, 15%);
  }
  /* Button Sizes */
  &.btn-mini {
    padding: 4px 8px;
    font-size: 12px;
  }
  &.btn-small {
    padding: 6px 12px;
    font-size: 16px;
  }
  &.btn-large {
    padding: 12px 24px;
    font-size: 32px;
  }
}