/* DEFAULT SETTINGS */
body, html {
	margin: 0;
	padding: 0;
	background-color: transparent;
	width: 100%;
	height: 100%;
}
a {
	color: #9cf;
	text-decoration: none;
	transition: color 0.5s;
}
a:hover {
	color: #eee;
}
.poppedout body {
	background-color: #222;
}
.poppedout #popoutIcon {
	display: none;
}
/* add when ready to test:
	.poppedout {
		background-color: #222;
	}
	.poppedout #info {
		color: #ccc;
	}
	.poppedout #info #nowplaying {
		color: #999;
	}
	.poppedout #info #popoutIcon {
		color: #999;
	}
	.poppedout #info #popoutIcon:hover {
		color: #eee;
	}
	.poppedout #info #title {
		color: #eee;
	}
*/

#banner, #bannerimg {
	display: none;
	position: fixed;
	width: 100%;
	height: auto;
	left:0px;
	top:0px;
	border:0px;
	z-index: 9999;
}
#info {
	display: block;
	position: absolute;
	top: 0px;
	left: 45%; /* safty for old browser */
	left: 100vh;
	margin-top: 0px;
	margin-left: 10px;
	width: auto;
	height: auto;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #cccccc;
}
#info #nowplaying {
	margin-top: 0px;
	margin-bottom: 5px;
	color: #999;
	font-weight: 900;
}
#info #popoutIcon {
	color: #999;
	transition: color 0.5s;
}
#info #popoutIcon:hover {
	color: #eee;
}
#info #title {
	color: #eee;
}
#info #album {
	display: none;
}
#info #year {
	display: none;
}
#info #recordid {
	display: block;
	margin-top: 10px;
	margin-bottom: 7px;
	font-size: 13px;
	word-wrap: break-word;
}
#info #notes {
	font-size: 13px;
}
#info #buy {
	position: relative;
	left: -3px;
	margin-top:2px;
	padding: 0px;
}

#info #mini-amazon {
	margin: 2px;
	width:30px;
	height:30px;
	border:0px;
}
#info #mini-amazon:hover {
	content: url(mini-amazon-o.png);
}
#info #mini-itunes {
	margin: 2px;
	width:30px;
	height:30px;
	border:0px;
}
#info #mini-itunes:hover {
	content: url(mini-itunes-o.png);
}
#info #mini-tweet {
	margin: 2px;
	width:30px;
	height:30px;
	border:0px;
}
#info #mini-tweet:hover {
	content: url(mini-tweet-o.png);
}
#info #mini-facebook {
	margin: 2px;
	width:30px;
	height:30px;
	border:0px;
}
#info #mini-facebook:hover {
	content: url(mini-facebook-o.png);
}
#info #mini-instagram {
	margin: 2px;
	width:30px;
	height:30px;
	border:0px;
}
#info #mini-instagram:hover {
	content: url(mini-instagram-o.png);
}

#cover, #coverimg, #coverplay {
	display: block;
    position: fixed;
    top: 0;
	left: 0;
}
#coverplay {
	z-index: 999;
	background-color:rgba(0, 0, 0, 0.5);
    opacity:0.0;
	transition: opacity 0.5s, background-color 0.5s;
}
#coverplay:hover {
	cursor:pointer;
    opacity:1.0;
	transition: opacity 0.3s, background-color 0.3s;
}


#vol {
	display: block;
    position: fixed;
	z-index: 1000;
	white-space: nowrap;
	overflow: hidden;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	transition: opacity 0.3s;
}
input[type='range'] {  
		width: calc(100% - 40px);
		-webkit-appearance: none;
		padding-left:2px; padding-right:2px;
		-webkit-border-radius: 5px;  
		background-image: -webkit-linear-gradient(top, #000000, #666, #000000);
}  



/* Portrait */
@media screen and (orientation:portrait) {
	body {
		background-color: #222;
	}
	.poppedout #banner, #bannerimg {
		display: block;
	}
	#cover, #coverimg, #coverplay {
		width: 100%;
		height: 100vw;
	}
	#vol {
		top: calc(100vw  - 30px);
		width: calc(100% - 40px);
	}
	.poppedout #vol {
		top: calc(100vw + (100vw / 12.5) - 30px);
		width: calc(100% - 40px);
	}
	#info {
		left:0px;
		top:100vw;
		margin-top: 10px;
		margin-left: 0px;
		width:100%;
		text-align: center;
	}
	#info #nowplaying {
		display:none;
	}
	#info #title {
		font-weight: bold;
	}
	#info #recordid {
		font-size: 11px;
		margin-top: 7px;
		margin-bottom: 6px;
	}
	#info #buy {
		position: static;
		margin-left: auto;
		margin-right: auto;	
		left: 0px;
	}
	#info #itunes {
		margin-left: 5px;
	}
	#info #tweet {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Landscape */
@media screen and (orientation:landscape) {
	#cover, #coverimg, #coverplay {
		width: 45%; /* safty for old browsers */
		width: 100vh;
		height: 100%;
	}
	#vol {
		top: calc(100vh - 30px);
		width: 45%; /* safty for old browsers */
		width: calc(100vh - 40px);
	}
	
	
	/* can remove poppedout classes here after addded above */
	.poppedout {
		background-color: #222;
	}
	.poppedout #info {
		color: #ccc;
	}
	.poppedout #info #nowplaying {
		color: #999;
	}
	.poppedout #info #popoutIcon {
		color: #999;
	}
	.poppedout #info #popoutIcon:hover {
		color: #eee;
	}
	.poppedout #info #title {
		color: #eee;
	}
	
}