/* ***************************************************************************** */
/* Vulgata                                                                       */
/* ***************************************************************************** */

/* ***************************************************************************** */
/*  BUTTONS                                                                      */
/* ***************************************************************************** */

button {
	cursor: pointer
}

	button.percussio {
		background-image: linear-gradient(-180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.3333) 10%, rgba(255,255,255,0.0) 55%), linear-gradient(77deg, transparent 55%, rgba(255,255,255,0.222) 66%, rgba(255,255,255,0.333) 77%, rgba(255,255,255,0.222) 88%, transparent 99%);
		background-position-x: 0%;
		background-repeat: repeat-x;
		background-size: 200% 100%;
		border: 0;
		border-radius: 6px;
		box-shadow: 0 0 1px 1px rgba(101,101,101,0.4444), inset -2px -2px 6px 1px rgba(0,0,0,0.5555), inset 2px 2px 6px 1px rgba(255,255,255,0.5555);
		font-weight: bold;
		padding: 11px;
		position: relative;
		width: 100%;
		z-index: 0
	}

		button.percussio:after {
			border-image-slice: 1 0 0 1;
			border-image-source: radial-gradient(ellipse at 75% 100%, transparent 77%, rgba(255,255,255,0.666) 88%, transparent 96%);
			border-image-width: 1px;
			bottom: 3px;
			box-sizing: content-box;
			content: ' ';
			left: 3px;
			position: absolute;
			right: 3px;
			top: 3px;
			z-index: -2
		}

		button.percussio:before {
			background-color: rgba(255,255,255,0.0777);
			bottom: 50%;
			border-radius: 9px 9px 99% 99%;
			box-sizing: content-box;
			content: ' ';
			left: 3px;
			position: absolute;
			right: 3px;
			top: 3px;
			z-index: -1
		}

		button.percussio:focus,
		button.percussio:hover {
			animation: 3s ease-in-out infinite percussio;
			box-shadow: 0 0 1px 1px rgba(101,101,101,0.4444), inset -2px -2px 6px 1px rgba(0,0,0,0.5555), inset 2px 2px 6px 1px rgba(255,255,255,0.5555), 0 0 3px rgba(0,0,0,0.3333)
		}

@keyframes percussio {
	0% {
		background-position-x: 0
	}

	25% {
		background-position-x: 200%
	}

	50% {
		background-position-x: 200%
	}

	75% {
		background-position-x: 0
	}
}


button.percussio span {
	display: inline-block;
	position: relative;
	transition: all 0.44s
}

	button.percussio span:after,
	button.percussio span:before {
		position: absolute;
		opacity: 0;
		top: 0;
		transition: 0.22s
	}

	button.percussio span:after {
		right: 0
	}

	button.percussio span:before {
		left: 0
	}

button.percussio:focus span:after,
button.percussio:hover span:after {
	opacity: 1;
	right: 0;
	transition: all 0.22s ease 0.22s
}

button.percussio:focus span:before,
button.percussio:hover span:before {
	left: 0;
	opacity: 1;
	transition: all 0.22s ease 0.22s
}

button.accipio {
	background-color: #ffa724;
	color: #1b2232
}

	button.accipio:focus,
	button.accipio:hover {
		background-color: #ffbb57
	}

		button.accipio:focus span:after,
		button.accipio:hover span:after,
		button.accipio span:after {
			content: '\00bb'
		}

		button.accipio:focus span,
		button.accipio:hover span {
			padding-right: 11px
		}

	button.accipio:active {
		background-color: #f05323
	}

div.accipio {
	bottom: -11px;
	height: 44px;
	left: 0;
	position: absolute
}

	div.accipio.zz {
		height: 30px;
		left: 0;
		margin: 11px auto;
		right: 0;
		position: absolute
	}

button.eo {
	background-color: #fff;
	color: #1b2232;
	padding: 3px 11px
}

	button.eo:focus,
	button.eo:hover {
		background-color: #ffbb57
	}

	button.eo:active {
		background-color: #ffa724
	}

button.aureoleo:focus,
button.aureoleo:hover {
	background-color: #a39161;
	color: #fefdf9
}

button.aureoleo:active {
	background-color: #84754d
}

button.oblittero {
	background-color: #1b2232;
	color: #f5eede
}

	button.oblittero:focus,
	button.oblittero:hover {
		background-color: #2d3953
	}

		button.oblittero:focus span:before,
		button.oblittero:hover span:before,
		button.oblittero span:before {
			color: #ff0000;
			content: 'X'
		}

		button.oblittero:focus span,
		button.oblittero:hover span {
			padding-left: 11px
		}

	button.oblittero:active {
		background-color: #546f9f
	}

button.redeo {
	background-color: #1b2232;
	color: #f5eede
}

	button.redeo:focus,
	button.redeo:hover {
		background-color: #2d3953
	}

		button.redeo:focus span:before,
		button.redeo:hover span:before,
		button.redeo span:before {
			content: '\00ab'
		}

		button.redeo:focus span,
		button.redeo:hover span {
			padding-left: 11px
		}

	button.redeo:active {
		background-color: #546f9f
	}