/* general */
* {box-sizing: border-box;}
body {font-family: 'libre baskerville', verdana, arial, sans-serif; font-size: 100%; line-height: 2; background-color:#bbccdd; background-image: url(web/img/woodback.jpg); font-weight: normal; font-style: normal; min-width:280px; max-width: 100%;}
.main {max-width:960px; border: 1px solid #444444; margin: 10px auto; background-color:rgba(255,255,255,0.6);}
.header {font-size: 1em; text-align:center; margin: 20px;}
hr {border : 1px solid black; /*width: 95%;*/}
a:link {text-decoration: none; border-bottom: 1px dotted;}
a.quiet {color: black; border-bottom: none;}
a:visited.quiet {color: black; border-bottom: none;}
h1, h2 {font-family: 'playfair display', pristina, georgia, sans-serif; font-size: 3em; font-weight: normal; line-height: 1; margin: 10px;}
h2 {font-size: 3em; margin: 5px; text-align:center;}
h3 {font-size: 1em; margin: 0;}
.tail {font-size: 0.5em; text-align: center;}
.rim {border: 2px solid black; padding: 10px; margin: 10px; margin-top: 0px;}
.news {border: 2px solid black; padding: 10px; margin: 10px; margin-bottom: 0px;}
.mid {text-align: center;}
.photo {text-align: center; width: 250px; margin-bottom: 0px; padding: 0; border: 2px solid black;}
.albumtitle {text-align: center; font-style: italic; margin-bottom: 2px;}
.albumembed {text-align: center; padding-top: 25px;}
.albuminfo {text-align: center; font-size: 75%;}
.footer {font-size: 0.8em; text-align: center;}
.smicon {transform: translateY(5px);}
.showbig {display: inline;}
.showsmall {display: none;}
.announce {font-size: 1em; background-color: white; /*padding: 20px;*/}
.video {position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0;}
.video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
img {max-width: 100%;}

/* columns with equal height */
.tbl{display: table; width: 100%; border-spacing:10px; padding: 0px; margin-top: 0px;}
.col{display: table-cell; border: 2px solid black; padding: 15px; width: 50%; margin-bottom: 0px; margin-top: 0px;}

/* contact forms */
textarea, input {font-family: arial; font-size: .8em; padding: 5px;}
input[type=submit] {width: 10em;}
input:focus, textarea:focus {border:1px solid;}

/* song list */
.songbox {clear:both; font-size:1em; /*font-family: verdana, arial, sans-serif;*/ }
.song {padding:23px; clear:both; padding-left:10px;}
.song:hover {background-color: rgba(255,255,255,0.25);}
.dlsong {float:right;}

/* music player */
#ubaplayer {display: none;}
#ubaplayer-fallback {display: none;}
.button {background: url("web/player/buttons.svg") no-repeat 0 0; height: 50px;
	float: left; cursor: pointer; padding: 0px 25px; margin: 0px 20px 15px 1.5%;}
.button:hover {background-position: 0 -200px;}
.button.ubaplayer-playing {background-position: 0 -100px;}
.button.ubaplayer-loading {background-position: 0 -100px;}
a.button {border-bottom-style:none}

/* mobile */
@media only screen and (max-width: 500px) {
	.main {min-width:none; min-width:300px;} h1 {font-size: 3em;} h2 {font-size: 2em;} /*p{margin: 0px;}*/
	input, input[type=submit]{width:100%;}
	/* columns stack in small browsers */
	.col{display: block; width: 100%; padding: 15px; margin-bottom: 10px;}
	.colfinal{margin-bottom: -0px;}
	.songbox {font-size: 0.8em;}
	.small {font-size: 0.5em;}
	.showbig {display: none;}
	.showsmall {display: inline;}
	.announce {margin-top: 10px;}
	.albumembed {padding-top: 10px;}
	.bandcamp {width: 250px; height: 392px;}
	.photo {max-width: 175px;}
	.tail {font-size: 0.3em;}
	}
@media only screen and (min-width: 800px) {hr {margin-top: 10px} p {margin: 30px;} .rim{margin: 30px; margin-top: 0px;} .news{margin: 30px; margin-bottom: 0px;} .tbl{border-spacing: 30px;}}


/*.dlsong a {border: 1px solid #444444; border-radius: 10px; padding: 5px; background: linear-gradient(to bottom right, white , grey); box-shadow: 5px 5px 5px #222222;}*/