/* global styles */
a.button {
	display: block;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	height: 21px;
	margin: 0;
	max-width: 198px; /* 200px with border */
	min-width: 98px;  /* 100px with border */
	padding: 0;
	text-decoration: none;
	text-transform: uppercase;
}

a.button > span {
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 14px;
	padding: 4px 15px 3px 15px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

a.button:active,
a.button:active > span {
	outline: none;
	text-decoration: none !important;
}

a.button:hover,
a.button:hover > span {
	text-decoration: none !important;
}

/* pre-defined widths */
a.button.sm { 	width: 98px  !important; /* 100px with border */ }
a.button.md { 	width: 123px !important; /* 125px with border */ }
a.button.lg { 	width: 148px !important; /* 150px with border */ }
a.button.avg { 	width: 158px !important; /* 160px with border */ }
a.button.xl { 	width: 173px !important; /* 175px with border */ }
a.button.xxl { 	width: 198px !important; /* 200px with border */ }
a.button.fluid { max-width: none !important; /* fluid width */ }

/* primary shop */
a.button.shop {
	background: #6bae01;
	background-image: -moz-linear-gradient(top, #7bc721, #5a9a18);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#7bc721), to(#5a9a18));
	background-image: -o-linear-gradient(top, #7bc721, #5a9a18);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7bc721', endColorstr='#5a9a18');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#7bc721', endColorstr='#5a9a18')";
	background-image: linear-gradient(top, #7bc721, #5a9a18);
	border: 1px solid #317900;
	color: #fff;
}

a.button.shop:hover,
a.button.shop:active {
	background: #89be4d;
	background-image: -moz-linear-gradient(top, #95d24d, #7bae46);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#95d24d), to(#7bae46));
	background-image: -o-linear-gradient(top, #95d24d, #7bae46);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#95d24d', endColorstr='#7bae46');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#95d24d', endColorstr='#7bae46')";
	background-image: linear-gradient(top, #95d24d, #7bae46);
	color: #fff;
}

a.button.shop > span,
a.button.shop:hover > span,
a.button.shop:active > span {
	color: #fff;
}

/* primary learn */
a.button.learn {
	background: #555555;
	background-image: -moz-linear-gradient(top, #636163, #424542);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#636163), to(#424542));
	background-image: -o-linear-gradient(top, #636163, #424542);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#636163', endColorstr='#424542');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#636163', endColorstr='#424542')";
	background-image: linear-gradient(top, #636163, #424542);
	border: 1px solid #292829;
	color: #fff;
}

a.button.learn:hover,
a.button.learn:active {
	background: #7f7f7f;
	background-image: -moz-linear-gradient(top, #828182, #686a68);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#828182), to(#686a68));
	background-image: -o-linear-gradient(top, #828182, #686a68);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#828182', endColorstr='#686a68');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#828182', endColorstr='#686a68')";
	background-image: linear-gradient(top, #828182, #686a68);
	color: #fff;
}

a.button.learn > span,
a.button.learn:hover > span,
a.button.learn:active > span {
	color: #fff;
}

/* secondary */
a.button.secondary {
	background: #dfdfdf;
	background-image: -moz-linear-gradient(top, #efefef, #cecfce);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#efefef), to(#cecfce));
	background-image: -o-linear-gradient(top, #efefef, #cecfce);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#cecfce');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#cecfce')";
	background-image: linear-gradient(top, #efefef, #cecfce);
	border: 1px solid #a7a7a7;
	color: #555;
}

a.button.secondary:hover,
a.button.secondary:active {
	background: #e5e5e5;
	background-image: -moz-linear-gradient(top, #f2f2f2, #d8d9d8);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#f2f2f2), to(#d8d9d8));
	background-image: -o-linear-gradient(top, #f2f2f2, #d8d9d8);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#d8d9d8');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#d8d9d8')";
	background-image: linear-gradient(top, #f2f2f2, #d8d9d8);
	color: #555;
}

a.button.secondary > span,
a.button.secondary:hover > span,
a.button.secondary:active > span {
	color: #555;
}

/* promo */
a.button.promo {
	background: #ffc82e;
	background-image: -moz-linear-gradient(top, #f8dd48, #f2af06);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#f8dd48), to(#f2af06));
	background-image: -o-linear-gradient(top, #f8dd48, #f2af06);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8dd48', endColorstr='#f2af06');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8dd48', endColorstr='#f2af06')";
	background-image: linear-gradient(top, #f8dd48, #f2af06);
	border: 1px solid #d48e08;
	color: #000;
}

a.button.promo:hover,
a.button.promo:active {
	background: #f8db46;
	background-image: -moz-linear-gradient(top, #fae474, #f5c445);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#fae474), to(#f5c445));
	background-image: -o-linear-gradient(top, #fae474, #f5c445);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fae474', endColorstr='#f5c445');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fae474', endColorstr='#f5c445')";
	background-image: linear-gradient(top, #fae474, #f5c445);
	color: #000;
}

a.button.promo > span,
a.button.promo:hover > span,
a.button.promo:active > span {
	color: #000;
}