
body
{
	margin:0px;
	padding:0px;
	border:0px;
}

nav
{
	position:fixed;
	/*bottom:-80%;*/
	top:100%;
	width:100%;
	height:100%;
	background:yellow;
	background:transparent;
	transition: 1s top;
	z-index: 100;
}


audio::-webkit-media-controls-panel, audio::-webkit-media-controls-panel
{
	background-color: gray;
	/* height:10px; */
}

audio::-webkit-media-controls-enclosure
{
	border-radius: 0px;
}
audio::-webkit-media-controls-play-button
{
	background-color:#42b992;
}

/**/
audio::-webkit-media-controls-volume-slider-container,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-seek-back-button,
audio::-webkit-media-controls-seek-forward-button,
audio::-webkit-media-controls-fullscreen-button,
audio::-webkit-media-controls-rewind-button,
audio::-webkit-media-controls-return-to-realtime-button,
audio::-webkit-media-controls-toggle-closed-captions-button,
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-timeline-container,
/**/
audio::-webkit-media-controls-current-time-display
{
	color:white;
	font-weight: bold;
}
/*
audio::-webkit-media-controls-time-remaining-display
{
	color:white;
	font-weight: bold;
}
*/

/*
audio::-webkit-media-controls-panel
audio::-webkit-media-controls-play-button
*/

#toggler
{
	visibility:hidden;
}

.toggle-label
{
	position: absolute;
	display: block;
	color:white;
	background:#444;
	/*transform: rotate(90deg);*/
	transition: 1s transform, 1s left, 1s color;
	/*left:90%;*/
	/*right:70px;*/
	padding-left:12px;
	padding-right:12px;
	right:10px;
	margin:0px;
	border:0px;
	top:4px;
	/*font-size:40px;*/
	z-index: 100;
	border-radius:50%;
	font-weight:bold;

	padding-top:0.6rem;
	padding-bottom:0.6rem;
	font-size:1.4rem;
}
.toggle-label:hover
{
	background:#666;
}
.toggle-label.notification
{
	-webkit-animation: blink 1s infinite;  /* Safari 4+ */
	-moz-animation: blink 1s infinite;  /* Fx 5+ */
	-o-animation: blink 1s infinite;  /* Opera 12+ */
	animation: blink 1s infinite;  /* IE 10+, Fx 29+ */
}
.toggle-label.notification:hover
{
	-webkit-animation: blink_hover 1s infinite;  /* Safari 4+ */
	-moz-animation: blink_hover 1s infinite;  /* Fx 5+ */
	-o-animation: blink_hover 1s infinite;  /* Opera 12+ */
	animation: blink_hover 1s infinite;  /* IE 10+, Fx 29+ */
}
@keyframes blink
{
	0%, 49%
	{
		background:#444;
	}
	50%, 100%
	{
		background-color: #42b992;
		background-color: rgb(221, 10, 253);
		background-color: rgb(255, 249, 81);
	}
}
@keyframes blink_hover
{
	0%, 100%
	{
		background:#42b992;
		background:rgb(255, 249, 81);
	}
}

.toggle-label:hover
{
	cursor: pointer;
}

#toggler:checked ~ .toggle-label
{
	/*transform: rotate(-90deg);*/
	transform: rotate(-180deg);
}

#toggler:checked ~ nav
{
	top:54px;
	transition: 1s top;
}

#player
{
	background:#42b992;
	background:gray;
	border-right:5px solid #42b992;
	display:flex;
	align-items:center;
	padding: 0 0em 0 0em;
	width: 500px;
	margin:0;
	height:100%;
}

#radio-info-scroller
{
	/*
	border:0;
	border-left:0px solid #42b992;
	padding-left:10px; padding-right:10px;
	height:100%;
	/*min-width: 724px;*/
	/*
	*/
	flex-grow:1;
	background:red;
	background:transparent;
}


#placeholder-top
{
	position:fixed;
	display:flex;
	display:none;
	justify-content:right;
	align-items:center;
	width:85%;
	width:100%;
	font-size:2rem;
	height:54px;
	font-family:arial;
	font-size:1.5rem;
	background:rgb(66, 185, 146, 1); color:white;
}

@media only screen and (max-width: 1250px)
{

	#placeholder-top
	{
		width:100%;
		font-size:0.8rem;
	}

	#radio-info-scroller
	{	
		width:100%;
	}
	/*
	*/

	.toggle-label
	{
		position:fixed;
		right:0;
	}

	#player
	{
		min-width:calc(40.325% - 3px);
		width:500px;
	}

}