:root {
	--colour-one: #A07603;
	--colour-two: #424B54;
	--colour-three: #D7C581;
	--colour-four: #FFF8F0;
	--colour-five: #2A3031;
}

:root::before {
	content: url(/static/images/social/facebook.png) url(/static/images/social/twitter.png) url(/static/images/social/googleplus.png) url(/static/images/social/soundcloud.png);
	visibility: hidden;
	position: absolute;
	left: -999em;
}

* {
	box-sizing:border-box;
}

html, body {
	height:100%;
	margin:0;
	padding:0;
}

body {
	font-family:"magra", "arial", sans-serif;
	background-color:#FFF8F0;
	color:#2A3031;
}

body.permascroll {
	overflow-y:scroll;
}

p a {
	color:#424B54;
}

p a:hover {
	text-decoration:none;
}

dl {
	padding:0 0.25em;
}

	dt {
		font-weight:bold;
	}

blockquote {
	margin-left: 1em;
	padding-left: 1em;
	border-left: 1px solid #D7C581;
	color:#424B54;
}

	blockquote footer {
		text-align:right;
	}

		blockquote footer cite {
			color:#424B54;
		}

			blockquote footer cite a {
				color:#424B54;
			}

			blockquote footer cite a:hover {
				text-decoration:none;
			}

.clear {
	clear:both;
}

div#main {
	max-width:901px;
	margin:0 auto 0 auto;
	min-height:100%;
}

	div#header {
		background-color:#A07603;
		background-image:url("/static/images/backs/header-back-6.png");
		background-repeat:no-repeat;
		background-position:0 0;
		background-size:contain;
		display:flex;
		align-items:flex-end;
		justify-content: flex-start;
	}

		@media screen and (min-width: 450px) {
			div#header {
				background-image:url("/static/images/backs/header-back-5.png");
			}
		}

		a#logo {
			font-size:40.5px;
			padding:0 1vw;
			margin-right:5px;
			font-weight:bold;
			display:block;
			color:#2A3031;
			text-decoration:none;
		}

		a#logo::before {
			content:"Tl";
		}		

		@media screen and (min-width: 450px) {
			a#logo {
				font-size:9vw;
			}
			a#logo::before {
				content:"Tunelines";
			}		
		}

		@media screen and (min-width: 901px) {
			a#logo {
				font-size:81px;
			}
		}

		a.menu-item {
			display:block;
			text-decoration:underline;
			width:100px;
			line-height: 3.2;
			text-align:center;
			color:#2A3031;
			font-weight:bold;
			font-size:16px;
			transition: background-color 0.2s;
			transition-timing-function: ease-out;
		}

		@media screen and (min-width: 450px) {
			a.menu-item {
				height:auto;
			}
		}

		a.menu-item:hover {
			background-color:#424B54;
			color:#FFF8F0;
			text-decoration:none;
		}

		a.menu-item:active {
			background-color:#2A3031;
			color:#FFF8F0;
		}

			img.menu-item-icon {
				border: none;
				height: 16px;
				width: 16px;
				/* margin: 17.6px 5px 0 0; */
				margin-right: 5px;
				margin-bottom: -2px;
				display: inline-block;
			}

	div#hook {
		margin:1em 0;
		padding:0.5em;
		background-color:#D7C581;
	}

	div#book-buy-holder {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0.5em;
		border:3px solid #A07603;
		/* border-left: none;
		border-right: none; */
		background-color:#D7C581;
	}

		div#book-buy-form {
			margin-top: 0.5em;
		}

			input.paypal-button {
				display:block;
				padding:0.5em;
				font-size:1.2em;
				font-weight:bold;
				text-decoration:none;
				text-align:center;
				background-color:#424B54;
				color:#FFF8F0;
				border: none;
				outline: none;
				font-family:"magra", "arial", sans-serif;
				cursor: pointer;
			}

	input.paypal-button:hover {
		background-color:#2A3031;
	}

	div#big-map {
		width:100%;
		height:70vh;
		margin-top:1em;
	}

	@media screen and (min-height: 600px) {
		div#big-map {
			height:420px;
		}
	}

	h1 {
		background-color:#A07603;
		color:#2A3031;
		padding:0.3em 0 0.3em 0.5em;
		/*height:2em;*/
		/*line-height:1.5em;*/
		font-size:1.5em;
	}

	p {
		padding:0.25em;
	}

	div.promo-video {
		text-align:center;
	}

		div.promo-video div.fb-video {
			margin:0 auto;
		}

	div#tunes-filter-box {
		margin:2em 2em 2em 2em;
	}

		input#tunes-filter {
			border:none;
			outline:none;
			background-color:#FFF8F0;
			border-bottom:2px solid #424B54;
			font-family:"magra", "arial", sans-serif;
			font-size:2em;
			padding:0.1em 0.5em;
			width:100%;
		}

		input#tunes-filter:focus {
			border-bottom-color:#2A3031;
		}

	div#tunes-letters {
		display:none;
		margin:2em 0;
		flex-wrap:wrap;
		justify-content:space-between;
		align-items:center;
	}

	@media screen and (min-width: 600px) {
		div#tunes-letters {
			display:flex;
		}
	}

	@media screen and (max-width: 900px) {
		div#tunes-letters::after {
			content:"";
			flex:auto;
		}
	}

		a.tunes-letter, a.tunes-letter-void {
			display:block;
			flex-shrink:0;
			margin:0.1em;
			text-align:center;
			text-decoration:none;
		}

		a.tunes-letter {
			background-color:#D7C581;
			color:#2A3031;
			font-size:1.5em;
			width:1.5em;
			line-height:1.5em;
		}

		a.tunes-letter:hover {
			background-color:#424B54;
			color:#FFF8F0;
		}

		a.tunes-letter-void {
			color:#424B54;
			font-size:0.8em;
			padding:0.3em;
			cursor:default;
		}

	div.tunes-place-box {
		margin:1em 0;
		background-color:#D7C581;
		padding-bottom:0.01em;
	}

		div.tunes-place-box-title {
			background-color:#424B54;
			color:#FFF8F0;
			font-size:1.5em;
			padding:0.5em;
			font-weight:bold;
		}

			span.highlight {
					/*padding:0 0.1em;
					margin:0 0.1em;*/
					border-width:1px;
					border-style:solid;
					border-radius:3px;
			}

			div.tunes-place-box-title > span.highlight {
				/*background-color:#A07603;*/
				border-color:#FFF8F0;
			}

		div.tunes-place-box-tunes {

		}

			div.tunes-tune {
				margin:1em;
				border-top:1px dashed #FFF8F0;
			}

			div.tunes-tune:first-child {
				border-top:none;
			}

				a.tunes-tune-title {
					font-size:1.25em;
					font-weight:bold;
					margin:0.75em 0 0.25em 0;
					display:block;
					color:#2A3031;
					text-decoration:underline;
				}

				a.tunes-tune-title:hover {
					color:#424B54;
					text-decoration:none;
				}

					a.tunes-tune-title > span.highlight, div.tunes-tune-about > span.highlight {
						/*background-color:#A07603;*/
						/*color:#FFF8F0;*/
						border-color:#2A3031;
					}

					a.tunes-tune-title:hover > span.highlight {
						border-color:#424B54;
					}

				div.tunes-tune-about {

				}

					a.tunes-tune-readmore {
						color:#424B54;
						text-decoration:underline;
					}

					a.tunes-tune-readmore:hover {
						text-decoration:none;
					}

	div#tune-detail-container {
	}

		div#tune-detail-description {
		}

			div#tune-detail-location {
				font-size:1.25em;
				font-style:italic;
				padding:0.25em 0.25em 0.5em 0.5em;
			}

			div.performance-box {
				margin:1em 0;
			}

		div#tune-detail-column {
			background-color:#D7C581;
			padding:1em;
		}

		@media screen and (min-width: 800px) {
			div#tune-detail-description {
				float:left;
				width:64%;
			}
			div#tune-detail-column {
				float:right;
				width:33%;
			}
		}

			a#tune-score-download {
				display:block;
				padding:0.5em;
				margin-bottom:0.5em;
				font-size:2em;
				font-weight:bold;
				text-decoration:none;
				text-align:center;
				background-color:#424B54;
				color:#FFF8F0;
			}

			a#tune-score-download:hover {
				background-color:#2A3031;
			}

			div#tune-download-or {
				text-align: center;
				margin-bottom:1em;
			}

			a#tune-melody-score-download {
				display:block;
				padding:0.5em;
				margin-bottom:0.9em;
				font-size:1.1em;
				font-weight:bold;
				text-decoration:none;
				text-align:center;
				background-color:#424B54;
				color:#FFF8F0;
			}

			a#tune-melody-score-download:hover {
				background-color:#2A3031;
			}

			div#tune-donate-spiel {
				text-align:center;
				margin-bottom:0.1em;
			}

			div#tune-donate-buttons {
				margin-bottom:1em;
				text-align:center;
				line-height:1.5;
			}

				div#tune-donate-buttons-text {
					display:inline;
					margin-top:0.4em;
				}

				div#tune-donate-buttons form {
					display:inline;
				}

					input.tune-donate-button {
						background-color:#A07603;
						color:#2A3031;
						background-color:#424B54;
						color:#FFF8F0;
						border:none;
						outline:none;
						margin:0.4em 0.2em 0 0.2em;
						padding:0.5em;
						font-weight:bold;
						cursor:pointer;
					}

					input.tune-donate-button:hover {
						background-color:#2A3031;
						color:#FFF8F0;
					}

			div#tune-score-license {
				text-align:center;
				margin-bottom:1em;
			}

				div#tune-score-license a {
					color:#424B54;
					text-decoration:underline;
				}

				div#tune-score-license a:hover {
					text-decoration:none;
				}

			div#tune-detail-map {
				width:100%;
				height:400px;
				border:3px solid #FFF8F0;
				display:none;
			}

	div#footer {
		margin-top:3em;
		padding:1em 2em 2em 2em;
		border-top:1px dotted #424B54;
	}

		div.footer-row {
			display:flex;
			justify-content:space-around;
			flex-wrap:wrap;
			flex-direction:column;
			align-items:center;
		}

			@media screen and (min-width:450px) {
				div.footer-row {
					flex-direction:row;
				}
			}

			div.footer-item {
				padding:0 1em;
				margin-top:1em;
				text-align:center;
			}

				a.footer-link {
					color:#424B54;
					text-decoration:none;
					border-bottom:1px solid #424B54;
					padding:0.05em 0.1em;
				}

				a.footer-link:hover {
					background-color:#424B54;
					color:#FFF8F0;
				}

			div#footer-social {
				
			}

				a.footer-social-icon {
					width:30px;
					height:30px;
					margin:0 0.5em;
					transition:background 0.5s;
					display:inline-block;
					background-size:contain;
					transition-timing-function: ease-in;
				}

				a#footer-social-facebook {
					background-image:url("/static/images/social/facebook-dull.png");
				}

				a#footer-social-facebook:hover {
					background-image:url("/static/images/social/facebook.png");
				}

				a#footer-social-twitter {
					background-image:url("/static/images/social/twitter-dull.png");
				}

				a#footer-social-twitter:hover {
					background-image:url("/static/images/social/twitter.png");
				}

				a#footer-social-googleplus {
					background-image:url("/static/images/social/googleplus-dull.png");
				}

				a#footer-social-googleplus:hover {
					background-image:url("/static/images/social/googleplus.png");
				}

				a#footer-social-soundcloud {
					background-image:url("/static/images/social/soundcloud-dull.png");
				}

				a#footer-social-soundcloud:hover {
					background-image:url("/static/images/social/soundcloud.png");
				}