/* CSS by Andrew Hedges, andrew@hedges.name
*/
html {
	overflow: hidden;
}

body {
	min-height: 100%;
	min-width: 100%;
	font-family: sans-serif;
}

#map {
	bottom: 67px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

#lyrics {
	background: white;
	border-top: solid 1px black;
	bottom: 0;
	left: 0;
	height: 67px;
	overflow: hidden;
	position: absolute;
	right: 0;
}

#words, #mask {
	bottom: 0;
	font-size: 36px;
	line-height: 67px;
	left: 67px;
	position: absolute;
	right: 67px;
	text-align: center;
	top: 0;
}

#words {
	background: white;
}
	#words span {
		color: silver;
	}
		#words span.active {
			color: black;
		}

#mask {
	/* can't use `transparent` because of a bug in Safari Version 9.0 (10601.1.39.0.2) */
	background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, white 100%);
}

.control {
	background-color: white;
	border: solid 1px black;
	border-radius: 6px;
	bottom: 5px;
	cursor: pointer;
	display: block;
	height: 55px;
	position: absolute;
	width: 55px;
}
	.control:hover {
		background-color: silver;
	}
	.control:active {
		background-color: gray;
	}

#places {
	background-image: url(img/icon-place.svg);
	background-position: -27px center;
	background-repeat: no-repeat;
	background-size: 111px 45px;
	bottom: auto;
	left: 80px;
	top: 11px;
}

#controls {
	background-image: url(img/button-sprite-audio-controls.png);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 111px 45px;
	left: 5px;
}
	#controls.pause {
		background-position: -62px center;
	}

#chord {
	display: block;
	font-size: 36px;
	line-height: 55px;
	right: 5px;
	text-align: center;
}

.togglee {
	background-color: white;
	border-radius: 10px;
	opacity: 0;
	position: absolute;
	transition: opacity 0.5s;
}
	.togglee.showing {
		opacity: 1;
	}

#chord-diagram {
	bottom: 72px;
	padding: 2px 5px 8px 5px;
	right: 5px;
}
	#chord-diagram img {
		height: 195px;
		width: 195px;
	}

#places-list {
	bottom: 80px;
    left: 80px;
    overflow: hidden;
    top: 80px;
    width: 120px;
}
	#places-list span, #places-list div {
		color: silver;
		display: block;
	    padding: 10px 10px 0;
	}
		#places-list span.active {
			color: black;
		}

#overlay {
	background: rgba(0,0,0,0.75);
	bottom: 0;
	left: 0;
	opacity: 1;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 0.5s;
}
	#overlay.hidden {
		opacity: 0;
	}
	#overlay section {
		background: white;
		border-radius: 10px;
		font: 16px/1.5 sans-serif;
		margin: 100px auto;
		padding: 1em 2em;
		position: relative;
		width: 600px;
	}
		#overlay section #close-x {
        		height: 32px;
        		position: absolute;
        		right: 10px;
        		top: 10px;
        		width: 32px;
		}
		#overlay section h1 {
			margin-top: 0;
		    padding-top: 10px;
		}
		#overlay section a {
			color: blue;
			text-decoration: none;
		}
			#overlay section a:hover {
				text-decoration: underline;
			}