/* ------------------------------------------------- */
/* 원본 : http://www.red-team-design.com/wp-content/uploads/2011/01/cross-browser-css-gradient-buttons-demo.html */
/* 수정 : http://demun.tistory.com/2329 */
/* ------------------------------------------------- */

// -------------------------------------------------
// mixins
// -------------------------------------------------

.border-radius (@radius: .3em) {
	-webkit-border-radius: 	@radius;
	-moz-border-radius:    	@radius;
	border-radius:         	@radius;

	-moz-background-clip:    padding;
	-webkit-background-clip: padding-box;
	background-clip:         padding-box;
}

.box-shadow (@string: 0px 0px 0.05em rgba(0, 0, 0, 0.4)) {
	-webkit-box-shadow: @string;
	-moz-box-shadow:    @string;
	box-shadow:         @string;
}

.gradient (@start, @stop) {
    background-image: -moz-linear-gradient(top, @start, @stop);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start), to(@stop));
    background-image: -webkit-linear-gradient(top, @start, @stop);
    background-image: -o-linear-gradient(top, @start, @stop);
    background-image: linear-gradient(to bottom, @start, @stop);
    background-repeat: repeat-x;
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{stop}')";
}


// -------------------------------------------------
// style
// -------------------------------------------------

.button {
    /* Fallback style */
    border: 1px solid rgba(0, 0, 0, 0.3);
    color: #fff;
    display: inline-block;
    font: bold 1.5em 'Trebuchet MS', Arial, Helvetica, NanumGothic, '나눔고딕', 'Nanum Gothic', Dotum, '돋음';
    margin: 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px 1px rgba(0, 0, 0, 0.4);
    .border-radius;
	.box-shadow;
    
    &:hover {
	    .box-shadow;
	}

	&:active {
	    /* When pressed, move it down 1px */
	    position: relative;
	    top: 1px;
	}

    span {
    	padding: 0.5em 2.5em;
    	display: block;
    	border-top: 1px solid rgba(255, 255, 255, 0.5);
    	.border-radius;

    	/* Pattern settings */
	    -moz-background-size: 3px 3px;
	    -webkit-background-size: 3px 3px;
		background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
	                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
	                      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
	                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
	    background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
	                      -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
	                      -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
	                      -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
	    background-size: 3px 3px;
	}


	// khaki
	&.button-khaki {
	    background: #a2b598;
	    .gradient (#bdd1b4, #a2b598);

	    &:hover {
		    background: #bdd1b4;
		    .gradient (#a2b598, #bdd1b4);
		}

		&:active {
		    background: #a2b598;
		}
	}


	// blue 
	&.button-blue {
	    background: #4477a1;
	    .gradient (#81a8cb, #4477a1);

	    &:hover {
		    background: #81a8cb;
		    .gradient (#4477a1, #81a8cb);
		}

		&:active {
		    background: #4477a1;
		}
	}


	// brown 
	&.button-brown {
	    background: #8f3714;
	    .gradient (#bf6f50, #8f3714);

	    &:hover {
		    background: #bf6f50;
		    .gradient (#8f3714, #bf6f50);
		}

		&:active {
		    background: #8f3714;
		}
	}


	// green 
	&.button-green {
	    background: #428739;
	    .gradient (#c8dd95, #428739);

	    &:hover {
		    background: #c8dd95;
		    .gradient (#428739, #c8dd95);
		}

		&:active {
		    background: #428739;
		}
	}


	// red 
	&.button-red {
	    background: #d82741;
	    .gradient (#e84b6e, #d82741);

	    &:hover {
		    background: #e84b6e;
		    .gradient (#d82741, #e84b6e);
		}

		&:active {
		    background: #d82741;
		}
	}


	// purple 
	&.button-purple {
	    background: #6f50e7;
	    .gradient (#b8a9f3, #6f50e7);

	    &:hover {
		    background: #b8a9f3;
		    .gradient (#6f50e7, #b8a9f3);
		}

		&:active {
		    background: #6f50e7;
		}
	}


	// black 
	&.button-black {
	    background: #141414;
	    .gradient (#656565, #141414);

	    &:hover {
		    background: #656565;
		    .gradient (#141414, #656565);
		}

		&:active {
		    background: #141414;
		}
	}
	

	// orange
	&.button-orange {
	    background: #f09c15;
	    .gradient (#f8c939, #f09c15);

	    &:hover {
		    background: #f8c939;
		    .gradient (#f09c15, #f8c939);
		}

		&:active {
		    background: #f09c15;
		}
	}


	// silver
	&.button-silver {
	    background: #c5c5c5;
	    .gradient (#eaeaea, #c5c5c5);

	    &:hover {
		    background: #eaeaea;
		    .gradient (#c5c5c5, #eaeaea);
		}

		&:active {
		    background: #c5c5c5;
		}
	}

}