Template:Aud/styles.css

/* For templates:
   Aud, AQ */

.audio-button {
	display: inline-block;
	vertical-align: middle;
	width: 23px;
	height: 23px;
	overflow: hidden;
	background-color: #009b8a;
	cursor: pointer;
	margin-right: 7px;
	transition: background-color .2s;
	background-repeat: no-repeat;
	background-position: 0 0; 
	background-image: url("https://static.miraheze.org/gogiganticwiki/4/44/Audio_button.png");}
.audio-button:hover {
	background-position: 0 -23px; }
	
.audio-button audio {
	opacity: 0; }
	
/** New version (with Template:AudioLoader) **/
.aq {
		border: 3px solid #3FB9BE;
		background-color: #0A4557;
		font-weight: bold; }
.aq p {
		margin: 0; }
.aq .MediaLoader {
		text-align: center;
		line-height: 2;
		height: 35px; }
.aq audio {
		/* background-color: #FF0A00;
		filter: invert(1);
		-webkit-filter: none; */
		vertical-align: top;
		height: 35px;
		width: 100%; }
/* On desktop screens */
@media (min-width: 500px) {
	.aqbox {
		margin: 5px 5px ;
		display: flex; }
	.aq:hover {
		background-color: #3FB9BE; 
		color: #07252F; }
	.aq .MediaLoader {
		width: 100px; }
	.aqquote {
		margin-top: 6px; }
}
/* On small screens */
@media (max-width: 499px) {
	.aq .MediaLoader {
		width: 100%; }
	.aqquote {
		margin-bottom: 7px; }
}
	
/* [[Category:Styling pages]] */