/* chessrex button base class */

.cr-btn, .cr-btn.black {
	display: inline-block;
	background: dimgray;
	background: radial-gradient(ellipse at 50% -50%, darkgray 0%, black 100%);
	border: 1px solid #999;
	border-radius: 5px;
	color: #EEE !important;
	text-shadow: 1px 1px 1px #000;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	font-size: 14px;
	font-style: normal !important;
	line-height: 16px;
	padding: 3px 0;
	/* 1px + 3px + 16px + 3px + 1px = 24px */
}

.cr-btn:hover, .cr-btn.black:hover {
	background: radial-gradient(ellipse at 50% -25%, darkgray 0%, black 100%);
	border: 1px solid #CCC;
	color: #FFF !important;
	text-decoration: none !important;
	cursor: pointer;
}

.cr-btn:active, .cr-btn.black:active {
	background: radial-gradient(ellipse at 50% 0%, darkgray 0%, black 100%);
	border: 1px solid #FFF;
}

/* generic extensions */

.cr-btn.red {
	background: firebrick;
	background: radial-gradient(ellipse at 50% -50%, lightsalmon 0%, darkred 100%);
}

.cr-btn.red:hover {
	background: radial-gradient(ellipse at 50% -25%, lightsalmon 0%, darkred 100%);
}

.cr-btn.red:active {
	background: radial-gradient(ellipse at 50% 0%, lightsalmon 0%, darkred 100%);
}

.cr-btn.green {
	background: forestgreen;
	background: radial-gradient(ellipse at 50% -50%, lightgreen 0%, darkgreen 100%);
}

.cr-btn.green:hover {
	background: radial-gradient(ellipse at 50% -25%, lightgreen 0%, darkgreen 100%);
}

.cr-btn.green:active {
	background: radial-gradient(ellipse at 50% 0%, lightgreen 0%, darkgreen 100%);
}

.cr-btn.blue {
	background: royalblue;
	background: radial-gradient(ellipse at 50% -50%, deepskyblue 0%, mediumblue 100%);
}

.cr-btn.blue:hover {
	background: radial-gradient(ellipse at 50% -25%, deepskyblue 0%, mediumblue 100%);
}

.cr-btn.blue:active {
	background: radial-gradient(ellipse at 50% 0%, deepskyblue 0%, mediumblue 100%);
}

.cr-btn.lightblue {
	background: cornflowerblue;
	background: radial-gradient(ellipse at 50% -50%, lightskyblue 0%, royalblue 100%);
}

.cr-btn.lightblue:hover {
	background: radial-gradient(ellipse at 50% -25%, lightskyblue 0%, royalblue 100%);
}

.cr-btn.lightblue:active {
	background: radial-gradient(ellipse at 50% 0%, lightskyblue 0%, royalblue 100%);
}

.cr-btn.disabled {
	background: #444;
	background: radial-gradient(ellipse at 50% -50%, #555 0%, #333 100%);
	color: gray !important;
	border-color: gray;
	cursor: default;
	pointer-events: none;
}

/* specific extensions */

.cr-btn.play, .cr-btn.cancel, .cr-btn.accept, .cr-btn.decline,
.cr-btn.send, .cr-btn.save, .cr-btn.submit {
	width: 60px;
}

.cr-btn.challenge, .cr-btn.message {
	width: 80px;
}

.cr-btn.play-now, .cr-btn.next-game, .cr-btn.create-game {
	width: 100px;
	margin-top: -4px;
}

.cr-btn.chal-team, .cr-btn.req-mem, .cr-btn.can-req, .cr-btn.ent-club, .cr-btn.ent-aqua {
	width: 150px;
}

.cr-btn.game-option {
	width: 120px;
	margin-right: 16px;
}

.cr-btn.game-option:last-child {
	margin-right: 0;
}

.cr-btn.analyzer-option {
	width: 60px;
	margin-right: 16px;
}

.cr-btn.analyzer-option:last-child {
	margin-right: 0;
}

.cr-btn.clear-chat {
	width: 100px;
}

.cr-btn.clear-chat.lobby {
	margin: 10px 0 0 82px;
}

.cr-btn.post {
	width: 42px;
	float: right;
}

.cr-btn.show-move {
	width: 77px;
	margin: 0 0 10px 10px;
	font-size: 12px;
}

.cr-btn.confirm-move {
	width: 93px;
	margin: 0 0 10px 10px;
	font-size: 12px;
}

.cr-btn.go-back-to-game {
	width: 150px;
}

.cr-btn.resign {
	width: 77px;
	margin: 10px 0 0 10px;
}

.cr-btn.offer-draw {
	width: 93px;
	margin: 10px 0 0 10px;
}

.cr-btn.O-O {
	width: 77px;
	margin: 10px 0 0 10px;
}

.cr-btn.O-O-O {
	width: 93px;
	margin: 10px 0 0 10px;
}

.cr-btn.add {
	width: 42px;
	height: 34px;
	float: right;
}