::-webkit-input-placeholder {color: #999; color: rgba(0,0,0,.4)}
:-moz-placeholder {color: #999; color: rgba(0,0,0,.4)}
::-moz-placeholder {color: #999; color: rgba(0,0,0,.4)}
:-ms-input-placeholder {color: #999; color: rgba(0,0,0,.4)}
.inverse ::-webkit-input-placeholder, .inverse::-webkit-input-placeholder {color: #aaa; color: rgba(255,255,255,.4)}
.inverse :-moz-placeholder, .inverse:-moz-placeholder {color: #aaa; color: rgba(255,255,255,.4)}
.inverse ::-moz-placeholder, .inverse::-moz-placeholder {color: #aaa; color: rgba(255,255,255,.4)}
.inverse :-ms-input-placeholder, .inverse:-ms-input-placeholder {color: #aaa; color: rgba(255,255,255,.4)}

.button {
	position: relative;
	display: inline-block;
	max-width: 17rem;
	padding: 0 1.25rem;
	border: 0;
	border-radius: .375rem;
	text-decoration: none;
	text-align: center;
	letter-spacing: .075em;
	line-height: 2.625rem;
	font-weight: 600;
	white-space: nowrap;
	color: #fff;
	box-sizing: border-box;
	box-shadow: 0 .5rem .5rem -.5rem rgba(0,0,0,.75),
							inset 0 1px 0 0 rgba(255,255,255,.25),
							inset 0 -1px 0 0 rgba(0,0,0,.25);
	cursor: pointer;
}
.button:hover {text-decoration: none}
.button.hide {display: none}
.inverse .button, .inverse.button {
	box-shadow: 0 .5rem .5rem -.5rem rgba(0,0,0,.5),
							0 0 .25rem rgba(0,0,0,.3),
							inset 0 1px 0 0 rgba(255,255,255,.5),
							inset 0 -1px 0 0 rgba(0,0,0,.5);
}
.button .limiter {
	box-sizing: border-box;
	border: 0 solid transparent;
	border-top-width: .0625rem;
	border-bottom-width: .0625rem;
}
.button .trace {
	position: absolute;
	background: #fff;
	border-radius: 50%;
}
input[type="text"], input[type="password"], select, textarea {
	display: inline-block;
	width: 100%;
	padding: 0 .625rem;
	font: 1rem 'Open Sans', sans-serif;
	color: #333;
	line-height: 2.625rem;
	border: 0;
	border-radius: .25rem;
	background: #cbcbcb;
	box-sizing: border-box;
	box-shadow: inset 0 .25rem .125rem -.125rem rgba(0,0,0,.25);
}
input[type="text"], input[type="password"] {max-width: 17rem;}
input.hide {display: none}
input:focus, select:focus, textarea:focus {
	outline: none;
	box-shadow: inset 0 .25rem .125rem -.125rem rgba(0,0,0,.25);
}
.inverse input, .invert select, .invert textarea {color: #fff}
input.wrong,
textarea.wrong,
select.wrong {background: rgba(255,87,34,.2)}
input.correct,
textarea.correct,
select.correct {background: rgba(76,175,80,.2)}
.label {
	display: inline-block;
	width: 100%;
	max-width: 12rem;
	font-size: .875rem;
	font-weight: 600;
	padding: 0 .5rem;
	line-height: 1.5rem;
	text-align: left;
	color: rgba(0,0,0,.75);
	box-sizing: border-box;
}
.inverse .label {color: #fff; color: rgba(255,255,255,.75)}

.green {background: linear-gradient(#66BB6A, #43A047)}
.green:hover {background: linear-gradient(#4CAF50, #388E3C)}
.gray {background: linear-gradient(#9E9E9E, #757575)}
.gray:hover {background: linear-gradient(#757575, #616161)}