button[type="submit"] {
  font-family: Arial,Helvetica,sans;
  font-weight: bold;
  font-size: 0.8rem;
  -webkit-appearance: button;
}
/* Ideas from cssdeck.com */
.copper {
  color: white;
  background-image: linear-gradient(0deg, #666600, #aaaaaa 85%);
  background-color: #666600;
  border: 1px solid #555500;		
}

.copper:hover {
  color: yellow;
  background-image: linear-gradient(0deg, #aaaaaa, #666600 85%); 
  border: 3px solid #eeeeff;
}

.silver{
  color: black;
  background-image: linear-gradient(0deg, #666666, #aaaaaa 55%);
  background-color: #aaaaaa;
  border: 1px solid #666666;		
}

.silver:hover {
  color: darkblue;
  background-image: linear-gradient(0deg, #666666, #aaaaaa 85%); 
  border: 3px solid #888888;
}

.gold {
  color: white;
  background-image: linear-gradient(0deg, #888800, #aaaaaa 85%);
  background-color: #888800;
  border: 1px solid #888888;		
}

.gold:hover {
  color: black;
  background-image: linear-gradient(0deg, #aaaaaa, #888800 85%); 
  border: 3px solid #888888;
}

.blue {
  color: white;
  background-image: linear-gradient(0deg, #66bbff, #6666ff 85%);
  border: 2px solid #445555;
  background-color: #6666ff;
}

.blue:hover {
  color: black;
  background-image: linear-gradient(0deg, #66ff66, #66ffbb 85%); 
  border: 3px solid #445555;
}

.platinum {
  color: white;
  background-image: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.45) 37%,rgba(0,0,0,0.2) 77%,rgba(0,0,0,0.2) 100%);
  border: 4px solid #888888;		
}

.platinum:hover {
  color: darkblue;
  background-image: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 23%,rgba(0,0,0,0.45) 63%,rgba(0,0,0,0.35) 100%);
  border: 6px solid #888888;
}

.ruby {
  color:mediumvioletred;
  background-image: radial-gradient(ellipse at center, rgba(155,50,50,0.1) 0%,rgba(100,50,50,0.1) 23%,rgba(100,50,50,0.2) 63%,rgba(144,50,50,0.2) 100%);
  border: 6px solid $888888;
}
.ruby:hover {
  color: aliceblue;
  background-image: linear-gradient(0deg, #aaaaaa, #882200 85%); 
  border: 3px solid #aa4444;
}

.emerald {
  color:green;
  background-image: radial-gradient(ellipse at center, rgba(50,155,50,0.1) 0%,rgba(50,100,50,0.1) 23%,rgba(50,100,50,0.2) 63%,rgba(50,144,50,0.3) 100%);
  border: 6px solid $888888;
}
.emerald:hover {
  color: aliceblue;
  background-image: linear-gradient(0deg, #aaaaaa, #228800 85%); 
  border: 3px solid #44aa44;
}

.diamond {
  color: white;
  background-image: linear-gradient(0deg, #888800, #aaaaaa 85%);
  background-color: #888888; */
  border: 4px solid #888888;		
}

.diamond:hover {
  color: yellow;
  background-image: url("../images/stone.png");
  /* linear-gradient(0deg, #aaaaaa, #888800 85%); */
  border: 6px solid #888888;
}

.champion {
  color: white;
  background-image: url("../images/water.png");
  background-color: #880088;
  border: 4px solid #888888;		
}

.champion:hover {
  color: black;
  background-image: url("../images/sky.png");
  border: 4px solid #888888;
}

.donate {
	text-decoration: none;
        font-size: 1.125rem;
	padding: 1px 20px;
        border-radius: 50px;	
        margin: 3px;
/*
        font-weight: bold;
	text-shadow: 0 2px 0 white;
        background: #6666ff;
*/
	box-shadow: 2px 2px 0 1px rgba(100,100,200,0.35);
  width:210px;
}
.pushed {
	position: relative;
}
.donate:hover {
/*
        background: #66bbff;
*/
	box-shadow: 2px 2px 0 1px rgba(0,0,0,0.35);
}
.pushed:active {
	top: 4px;	
        left: 4px;
	border: 3px solid #445555;
}
.donate:active {
	box-shadow: 3px 3px 0 2px rgba(100,100,200,0.1);
}