@define currententrytrackcolor: #fefefe;
@define currententrydotcolor: #595850;
@define currententryartistcolor: #698dc6;
@define titlebarbackgroundcolor: #20334c;

@define detailsdatalabel: gradient( linear, 0% 0%, 0% 100%, from( #f2f2f2ef ), to( #cbcbcbce ) );
@define detailsdatalabelfocus: gradient( linear, 80% 0%, 92% 0%, from( #f2f2f2ff ), to( #cbcbcb00 ) );
@define detailsdatalabelfocus2: gradient( linear, 80% 0%, 92% 0%, from( #000000ce ), to( #00000000 ) );

MusicControlOverlay
{
	background-color: transparent_module;
	flow-children: down;
	height: 312px;
	width: 435px;

	border-width: 5px;
	border-style: solid;
	border-color: #00000000;
	
	transition-property: transform, position, border, background-color, opacity, pre-transform-scale2d, box-shadow !immediate;
	transition-duration: shortduration !immediate;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
	
	pre-transform-scale2d: 1.0;
}

.MusicControlOverlay:hover
{
	z-index: 90;
	transition-duration: shortduration !immediate;
	background-color: #161718b0;
	box-shadow: box_shadow_on_color -6px -6px 12px 12px;
}

.MusicControlOverlay .ShowMusicControlButton
{
	width: 100%;
	height: 100%;
	flow-children: down;
	background-color: action_module;
	padding-top: 15px;
}

.MusicControlOverlay .NowPlayingHeader,
.MusicControlOverlay .NowPlayingTrackName,
.MusicControlOverlay .NowPlayingAlbumName,
.MusicControlOverlay .NoMusicSelected,
{
	font-family: platformfont;
	margin: 0px 20px 6px 18px;
	padding-right: 8px;
	color: detailsdatalabel;
	opacity: 1.0;
	horizontal-align: left;
	transition-duration: shortduration;
	transition-property: transform;
	transition-timing-function: bigpicture-ease-in-out;
	font-weight: light;
}

.MusicControlOverlay .NowPlayingHeader
{
	font-size: 22px;
}

.MusicControlOverlay .NowPlayingTrackName
{
	font-size: 28px;
	width: fit-children;
	horizontal-align: center;
	white-space: nowrap;
}

.MusicControlOverlay .NowPlayingAlbumName
{
	font-size: 24px;
	width: fit-children;
	horizontal-align: center;
}

.MusicControlOverlay .NoMusicSelected
{
	font-size: 28px;
	horizontal-align: center;
	vertical-align: center;
}

.MusicControlTransport
{
	pre-transform-scale2d: 1.0;
	width: 100%;
	height: 100%;

}



.HeaderLabel
{
	font-family: platformfont;
	margin: 5px 20px 6px 10px;
	font-size: 36px;
	color: detailsdatalabel;
	visibility: visible;
	horizontal-align: left;

	width: 100%;
	transition-duration: shortduration;
	transition-property: transform;
	transition-timing-function: bigpicture-ease-in-out;
	transform: translatex( 10px );
	font-weight: light;
	opacity: 1.0;
}

.MusicControlOverlay #BrowseQueue
{
	visibility: collapse;
}

#MusicControlOverlay .ControlBarButton
{
	pre-transform-scale2d: 0.8;
	width: 65px;
	height: 63px;
	margin-left: -5px;
	margin-right: -12px;
	margin-top: -7px;
	margin-bottom: -6px;
}

#MusicControlOverlay #MusicControlTransport .QueueControlButtons
{
	visibility: collapse;

}

#MusicControlOverlay #EntriesContainer
{
	transform: translateY( -0px );
	opacity: 0.7;
	transition-property: transform, opacity;
	opacity-mask: url( "file://{images}/library/details_data_mask.tga" );

	
}

#MusicControlOverlay #EntriesContainer VerticalScrollBar
{
	opacity: 0.0;
	margin-top: 10px;
}

#MusicControlOverlay #NoMusicQueueEntriesContainer.PanelVisible
{
	visibility: visible;
	flow-children: down;
	padding-top: 10px;
	
	background-image: url( "file://{images}/music/empty_player_bg.png" );
	background-size: 156px 182px;
	background-position: 130px 0px;
	background-repeat: no-repeat;
}




#MusicControlOverlay #Volume .VoiceBarActive
{
	background-color: #ffffffff;
}

#MusicControlOverlay #Volume:descendantfocus .VoiceBar, #MusicControlOverlay #Volume:selected .VoiceBar
{
	background-color: #ffffffff;
}


#MusicControlOverlay #Volume:descendantfocus .VoiceBarActive, #MusicControlOverlay #Volume:selected .VoiceBarActive
{
	background-color: #111111aa;
}

#AlbumImage
{
	width: 150px;
	height: 150px;
	horizontal-align: center;
	background-color: red;
	margin-bottom: 4px;
}