/* DEFAULT STYLING */
.button {
	font: bold 13px/1.6em  "Lucida Grande", Arial, Verdana;
	color: white;
	text-decoration: none;
	
	text-shadow: 0 1px 0 rgba(0,0,0,.4);
	filter: dropshadow(color=#1c1c1c, offx=0, offy=1);
	
	display: block;
	display: inline-block;
	
	text-align: center;
	border: none;
	padding: 5px 35px;
	margin-bottom: 10px;
			
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	-webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,.25);
	-moz-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,.25);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,.25);
	
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
}

.button:hover {
	text-decoration: none;
	cursor: pointer;
}

.button:active {
	padding-top: 6px;
	padding-bottom: 4px;
	-webkit-box-shadow: inset 0 100% 0 0 rgba(0,0,0,0.2);
}

/* @group Colors
----------------------------------------------- */

/* RED */

.button.red {
    background: #c64249;
    background: #c64249 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #c64249 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}

.button.red:hover {
    background: #c64249 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #c64249 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}

.button.red:active {
    background: #c64249 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #c64249 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}

/* ORANGE */

.button.orange {
    background: #d36221;
    background: #d36221 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #d36221 -moz-linear-gradient( top, rgba(255,255,255,.4),rgba(0,0,0,0));
}

.button.orange:hover {
    background: #d36221 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #d36221 -moz-linear-gradient( top, rgba(255,255,255,.55),rgba(0,0,0,0));
}

.button.orange:active {
    background: #d36221 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #d36221 -moz-linear-gradient( top,rgba(0,0,0,.1),rgba(0,0,0,0));
}

/* WOODY */

.button.woody {
    background: #d99734;
    background: #d99734 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #d99734 -moz-linear-gradient( top, rgba(255,255,255,.4),rgba(0,0,0,0));
}

.button.woody:hover {
    background: #d99734 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #d99734 -moz-linear-gradient( top, rgba(255,255,255,.55),rgba(0,0,0,0));
}

.button.woody:active {
    background: #d99734 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #d99734 -moz-linear-gradient( top,rgba(0,0,0,.1),rgba(0,0,0,0));
}

/* HOT PINK */

.button.pink {
    background: #d93880;
    background: #d93880 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #d93880 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}

.button.pink:hover {
    background: #d93880;
    background: #d93880 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #d93880 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}

.button.pink:active {
    background: #d93880 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #d93880 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}


/* GRAPHITE */

.button.graphite {
    background: #6f7f8d;
    background: #6f7f8d -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #6f7f8d -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}

.button.graphite:hover {
    background: #6f7f8d -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #6f7f8d -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}

.button.graphite:active {
    background: #6f7f8d -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #6f7f8d -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}

/* TURQUOISE */

.button.turquoise {
    background: #3ab29e;
    background: #3ab29e -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #3ab29e -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}

.button.turquoise:hover {
    background: #3ab29e -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #3ab29e -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}

.button.turquoise:active {
    background: #3ab29e -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #3ab29e -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}

/* EMERALD */

.button.emerald {
    background: #4fbb6c;
    background: #4fbb6c -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #4fbb6c -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}

.button.emerald:hover {
    background: #4fbb6c -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #4fbb6c -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}

.button.emerald:active {
    background: #4fbb6c -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #4fbb6c -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}

/* GRASS */

.button.grass {
    background: #475311;
    background: #475311 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #475311 -moz-linear-gradient( top, rgba(255,255,255,.4),rgba(0,0,0,0));
}

.button.grass:hover {
    background: #475311 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #475311 -moz-linear-gradient( top, rgba(255,255,255,.55),rgba(0,0,0,0));
}

.button.grass:active {
    background: #475311 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #475311 -moz-linear-gradient( top,rgba(0,0,0,.1),rgba(0,0,0,0));
}

/* BLUE */

.button.blue {
    background: #3d67a6;
    background: #3d67a6 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #3d67a6 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}

.button.blue:hover {
    background: #3d67a6 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #3d67a6 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}

.button.blue:active {
    background: #3d67a6 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #3d67a6 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}

/* ROYAL BLUE */

.button.royalblue {
    background: #4099c5;
    background: #4099c5 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #4099c5 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}

.button.royalblue:hover {
    background: #4099c5 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #4099c5 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}

.button.royalblue:active {
    background: #4099c5 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #4099c5 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}

/* BROWN */

.button.brown {
    background: #c57c40;
    background: #c57c40 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #c57c40 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}

.button.brown:hover {
    background: #c57c40 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #c57c40 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}

.button.brown:active {
    background: #c57c40 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #c57c40 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}

/* DARK BROWN */

.button.darkbrown {
    background: #532611;
    background: #532611 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #532611 -moz-linear-gradient( top, rgba(255,255,255,.4),rgba(0,0,0,0));
}

.button.darkbrown:hover {
    background: #532611 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #532611 -moz-linear-gradient( top, rgba(255,255,255,.55),rgba(0,0,0,0));
}

.button.darkbrown:active {
    background: #532611 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #532611 -moz-linear-gradient( top,rgba(0,0,0,.1),rgba(0,0,0,0));
}

/* MINT */

.button.mint {
    background: #a5cb3a;
    background: #a5cb3a -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #a5cb3a -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}

.button.mint:hover {
    background: #a5cb3a -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #a5cb3a -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}

.button.mint:active {
    background: #a5cb3a -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #a5cb3a -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}

/* GRAPE */

.button.grape {
    background: #8d6b85;
    background: #8d6b85 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #8d6b85 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}

.button.grape:hover {
    background: #8d6b85 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #8d6b85 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}

.button.grape:active {
    background: #8d6b85 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #8d6b85 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}

/* MAGENTA */

.button.magenta {
    background: #c642a2;
    background: #c642a2 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #c642a2 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}

.button.magenta:hover {
    background: #c642a2 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #c642a2 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}

.button.magenta:active {
    background: #c642a2 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #c642a2 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}


/* PURPLE */

.button.purple {
    background: #5c3bbc;
    background: #5c3bbc -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #5c3bbc -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}

.button.purple:hover {
    background: #5c3bbc -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #5c3bbc -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}

.button.purple:active {
    background: #5c3bbc -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #5c3bbc -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}

/* DARK GREY */

.button.darkgrey {
    background: #707070;
    background: #707070 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #707070 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}

.button.darkgrey:hover {
    background: #707070 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #707070 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}

.button.darkgrey:active {
    background: #707070 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #707070 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}

/* SILVER */

.button.silver {
    background: #c4c4c4;
    background: #c4c4c4 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #c4c4c4 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}

.button.silver:hover {
    background: #c4c4c4 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #c4c4c4 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}

.button.silver:active {
    background: #c4c4c4 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #c4c4c4 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}



/* GOLDEN */

.button.golden {
    background: #c5ab43;
    background: #c5ab43 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #c5ab43 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}

.button.golden:hover {
    background: #c5ab43 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #c5ab43 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}

.button.golden:active {
    background: #c5ab43 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #c5ab43 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}

/* BLACK */

.button.black {
    color: white;
    background: #1a1a1a;
    background: #1a1a1a -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #1a1a1a -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}

.button.black:hover {
    color: orange;
    background: #1a1a1a -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #1a1a1a -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}

.button.black:active {
    color: white;
    background: #1a1a1a -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #1a1a1a -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}

/* WHITE */

.button.white {
    color: #1a1a1a;
    text-shadow: 0 0 1px white;

    background: #f9f9f9;
    background: #f9f9f9 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.2)),to(rgba(0,0,0,0)));
    background: #f9f9f9 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}

.button.white:hover {
    background: #f9f9f9 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #f9f9f9 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}

.button.white:active {
    background: #f9f9f9 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #f9f9f9 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}

/* CYAN */

.button.cyan {
    background: #5acbe1;
    background: #5acbe1 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
    background: #5acbe1 -moz-linear-gradient( top, rgba(255,255,255,.4),rgba(0,0,0,0));
}

.button.cyan:hover {
    background: #5acbe1 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
    background: #5acbe1 -moz-linear-gradient( top, rgba(255,255,255,.55),rgba(0,0,0,0));
}

.button.cyan:active {
    background: #5acbe1 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
    background: #5acbe1 -moz-linear-gradient( top,rgba(0,0,0,.1),rgba(0,0,0,0));
}


button.red {
    background-color: red;
    position: relative;
    opacity: 0.8;
    z-index: 10;
}

.item-buttons a,
.item-buttons button,
.i-button
{
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    padding: 0;
    line-height: 1;
    transition: background 0.2s ease;
    opacity: 0.8;
    z-index: 10;
}

.i-button:hover,
.item-buttons a:hover,
.item-buttons button:hover {
  opacity: 1;
}