@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333; text-align: center; margin: 0; padding: 0; }
p { padding: 0 0 15px 0; margin: 0; line-height: 16px; }
a:link, a:visited { color: #860000; }
a:active, a:hover { color: #f00; }
blockquote { margin: 5px 0 10px 15px; }
h2 { margin: 30px 0 0 0; padding-bottom: 10px; font-size: 14px; font-weight: bold; color: #a6a6a6; }
table { width: 90%; padding-bottom: 30px; }
#songlist td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333; padding: 3px; border-bottom: 1px solid #ccc; }
em { color: #f00; }

.highlight { font-weight: bold; font-style: italic; }
.arrow { border: 0; margin-right: 20px; }
.spacer { height: 0; margin: 0; padding: 0; clear: both; }
.half { width: 45%; float: left; }
.logo { font-size: 11px; text-align: center; margin-bottom: 50px; }
.logo img { border: 0; padding-bottom: 10px; }
.hide { display: none; }
.cdcover { padding: 3px; border: 1px solid #eee; }

#frame { margin: 0 auto; padding-bottom: 30px; text-align: left; width: 790px; }

#header { margin: 0; padding: 0; }
#header #bandname { text-indent: -100em; width: 317px; height: 90px; background: url(../images/header.gif) top left no-repeat; }
#header h1 { margin: 0; padding: 0; }

#content { margin-left: 87px; padding-bottom: 10px; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; }

#nav { float: right; margin-top: 16px; margin-bottom: 16px; }
#nav a { color: #aaa; margin: 0 5px; }

#main { float: left; padding-top: 16px; width: 393px; }
#main #upcoming_shows { text-indent: -100em; width: 116px; height: 18px; background: url(../images/lbl_upcoming-shows.gif) no-repeat; }

#buynow { margin: 0 0 30px 0; }
#buynow img { border: none; }
#blog_feed { text-indent: -100em; width: 98px; height: 18px; background: url(../images/lbl_myspace_blog.gif) no-repeat; }

#sidebar { margin-left: 410px; padding-top: 0; }
#sidebar .pics { padding: 0 6px 6px 0; }
#sidebar #music { text-indent: -100em; width: 41px; height: 13px; background: url(../images/lbl_music.gif) no-repeat; }
#sidebar #buynowbutton { margin: 10px 0 0 15px; }
#sidebar #contact { text-indent: -100em; width: 51px; height: 10px; background: url(../images/lbl_contact.gif) no-repeat; }
#sidebar #mailing_list { text-indent: -100em; width: 78px; height: 18px; background: url(../images/lbl_mailing-list.gif) no-repeat; }
#sidebar #blogfeed .blogpost { padding-bottom: 6px; }

#press { text-indent: -100em; width: 100px; height: 18px; background: url(../images/lbl_press.gif) no-repeat; }
.photo { float: left; margin: 5px; }

#footer { font-size: 10px; color:#a6a6a6; text-align: right; }
#footer p { margin: 0; padding: 0; }

#player { margin: 50px 0 50px 410px; }

#watch #main { width: 210px; }
#watch #player { margin: 50px 0 50px 220px; }

video {
	width: 100%;
	height: auto;
}

#listen #frame { width: 1020px; }
#listen ul, #listen li, #watch ul, #watch li { list-style-type: none; list-style-image: url(../images/icon_arrow.gif); }
#listen li, #watch li { margin-bottom: 8px; }
#listen p, #watch p { margin-bottom: 0; padding-bottom: 0; }

#look .cdthumb { float: left; padding: 3px; margin-right: 5px; }

#album-cover img {
	display: block;
	width: 100%;
	margin: 10px auto 20px auto;
}


.flex{display:-webkit-flex;display:flex;}
.flex-wrap{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.flex-align{-webkit-align-items:center;align-items:center;}
.w-full{width:100%;}

/* HTML5 Audio Player with Playlist, source: https://codepen.io/sekedus/pen/ExxjZEz */
#simp button,#simp input,#simp img{border:0;}
#simp{max-width:600px;font-size:14px;font-family:"Segoe UI", Tahoma, sans-serif;text-align:initial;line-height:initial;background:#17212b;color:#ddd;margin:0 auto;border-radius:6px;overflow:hidden;}
#simp .simp-album{padding:20px 25px 5px;}
#simp .simp-album .simp-cover{margin-right:20px;}
#simp .simp-album .simp-cover img{max-width:80px;width:100%;margin:0;padding:0;display:block;}
#simp .simp-album .simp-title{font-size:120%;font-weight:bold;}
#simp .simp-album .simp-artist{font-size:90%;color:#6c7883;}
#simp .simp-controls{padding:15px;}
#simp .simp-controls button{font-size:130%;width:32px;height:32px;background:none;color:#ddd;padding:7px;cursor:pointer;border:0;border-radius:3px;}
#simp .simp-controls button[disabled]{color:#636469;cursor:initial;}
#simp .simp-controls button:not([disabled]):hover{background:#4082bc;color:#fff;}
#simp .simp-controls .simp-prev,#simp .simp-controls .simp-next{font-size:100%;}
#simp .simp-controls .simp-tracker,#simp .simp-controls .simp-volume{flex:1;margin-left:10px;position:relative;}
#simp .simp-controls .simp-buffer {position:absolute;top:50%;right:0;left:0;height:5px;margin-top:-2.5px;border-radius:100px;}
#simp .simp-controls .simp-loading .simp-buffer {-webkit-animation:audio-progress 1s linear infinite;animation:audio-progress 1s linear infinite;background-image: linear-gradient(-45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;}
#simp .simp-controls .simp-time,#simp .simp-controls .simp-others{margin-left:10px;}
#simp .simp-controls .simp-volume{max-width:110px;}
#simp .simp-controls .simp-volume .simp-mute{margin-right:5px;}
#simp .simp-controls .simp-others .simp-active{background:#242f3d;}
#simp .simp-controls .simp-others .simp-shide button{font-size:100%;padding:0;width:24px;height:14px;display:block;}
#simp .simp-controls input[type=range]{-webkit-appearance:none;background:transparent;height:19px;margin:0;width:100%;display:block;position:relative;z-index:2;}
#simp .simp-controls input[type=range]::-webkit-slider-runnable-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .simp-controls input[type=range]::-moz-range-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .simp-controls .simp-load .simp-progress::-webkit-slider-runnable-track{background:#2f3841;}
#simp .simp-controls .simp-load .simp-progress::-moz-range-track{background:#2f3841;}
#simp .simp-controls .simp-loading .simp-progress::-webkit-slider-runnable-track{background:rgba(255,255,255,.25);}
#simp .simp-controls .simp-loading .simp-progress::-moz-range-track{background:rgba(255,255,255,.25);}
#simp .simp-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;margin-top:-4px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#simp .simp-controls input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#simp .simp-footer{padding:10px 10px 12px;font-size:90%;text-align:center;opacity:.7;}
#simp .simp-display{overflow:hidden;max-height:650px;transition:max-height .5s ease-in-out;}
#simp .simp-hide{max-height:0;}
/* playlist */
#simp ul{margin:5px 0 0;padding:0;list-style:none;max-height:245px;}
#simp ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:0;padding:8px 20px;cursor:pointer;}
#simp ul li:last-child{padding-bottom:13px;}
#simp ul li:nth-child(odd){background:#0e1621;}
#simp ul li:hover{background:#242f3d;}
#simp ul li.simp-active{background:#4082bc;color:#fff;}
#simp ul li .simp-desc{font-size:90%;opacity:.5;margin-left:5px;}
/* playlist scrollbar */
#simp ul{overflow-y:auto;overflow-x:hidden;scrollbar-color:#73797f #2f3841;}
#simp ul::-webkit-scrollbar-track{background-color:#2f3841;}
#simp ul::-webkit-scrollbar{width:6px;background-color:#2f3841;}
#simp ul::-webkit-scrollbar-thumb{background-color:#73797f;}
/* progress animation */
@-webkit-keyframes audio-progress{to{background-position:25px 0;}}
@keyframes audio-progress{to{background-position:25px 0;}}
/* mobile */
@media screen and (max-width:480px) {
#simp .simp-controls .simp-volume,#simp .simp-controls .simp-others{display:none;}
#simp .simp-controls .simp-time{margin-right:10px;}
}
@media screen and (max-width:370px) {
#simp .simp-time .simp-slash,#simp .simp-time .end-time{display:none;}
}

@media screen and (max-width: 807px) {
	#frame {
		width: 100%;
		max-width: 400px;
	}
	#content {
		margin-top: 15px;
		margin-left: 0;
	}
	#main {
		float: none;
		margin: 0 20px;
		width: calc(100% - 40px);
	}
	#sidebar {
		margin: 0 auto;
		max-width: 290px;
	}
	#footer {
		text-align: center;
		margin-top: 10px;
	}
	#watch #player {
		margin: 20px 0;
	}
}

@media screen and (max-width: 310px) {
	#sidebar {
		width: 145px;
	}
}