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


MusicControlTransport
{
	flow-children: down;
	width: 100%;
	height: fit-children;
}

#TransportTopSection
{
	width: 100%;
	height: fit-children;
	flow-children: down;
	background-color: message_box_bg_dark;
}

#TransportTopSection:descendantfocus
{
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #133e57 ), to( messagecolorwash ) );
}

.ControlBarButton
{
	width: 60px;
	margin-right: 5px;
	height: 60px;
	border: 5px solid #00000000;
	vertical-align: center;
	pre-transform-scale2d: 1.0;
	transition-property: pre-transform-scale2d;
	transition-duration: 0.23s;
	transition-timing-function: linear;
}

#BrowseMusicControlButton
{
}



.ControlBarButton:focus, .PlayPauseControlBarButton:focus
{
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #f0f0f0 ), to( #c2c2c2 ) );
	pre-transform-scale2d: 1.05;
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
	border-color: #fdfefef0;
	transition-duration: 0.23s;
	transition-timing-function: linear;
	animation-name: main-button-glow-movement-no-fill;
	animation-duration: 1.7s;
	animation-delay: 0.4s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

.ControlBarButton Image
{
	align: center center;
}

.ControlBarButton:focus Image, .PlayPauseControlBarButton:focus Image
{
	wash-color: #000000ff;
}

#QueueRepeat:selected Image, #QueueShuffle:selected Image
{
	wash-color: ui_primary_color;
}

#QueueRepeat:selected:descendantfocus Image, #QueueShuffle:selected:descendantfocus Image
{
	wash-color: ui_primary_dark_color;
}

#QueuePrevious
{
	margin-left: 60px;
}

#BrowseMusicButton 
{
	margin-left: 7px;
	margin-right: 0px;
	}

.PlayPauseControlBarButton
{
	height: 90px;
	width: 90px;
	border-width: 5px;
	border-style: solid;
	border-radius: 50%;
	border-color: ui_common_control_border;
	box-shadow: #00000022 -4.5px -4.5px 9px 9px;
	pre-transform-scale2d: 0.90;
	transition-property: pre-transform-scale2d;
	transition-duration: 0.1s;
	transition-timing-function: linear;
	vertical-align: center;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( dark_box_shadow_color_opaque ), to( ui_primary_color ) );
}


.PlayPauseControlBarButton:focus
{
	pre-transform-scale2d: 1.0;
	border-color: white;
		
	animation-name: main-button-glow-movement-no-fill;
	animation-duration: 1.7s;
	animation-delay: 0.4s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;

}




#Volume
{
	width: 170px;
	height: 60px;
	border-radius: 0px;
	margin-left: 10px;
	margin-right: 10px;
	horizontal-align: right;
	vertical-align: center;
	margin-bottom: 15px;
	margin-top: 15px;
	padding: 6px;
	padding-top: 0px;
	padding-left: 10px;
	padding-bottom: 10px;
	padding-right: 0px;
	background-color: none;

	// animation-name: control-outer-glow;
	animation-duration: 1.7s;
	animation-delay: 0.2s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

#Volume:focus
{
	background-color: gradient( linear, -0% 0%, 0% 100%, from( #f0f0f099 ), to( #c2c2c299 ) );
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
	border-color: #fdfefef0;

	pre-transform-scale2d: 1.05;
	animation-name: main-button-glow-movement-no-fill;
	animation-duration: 1.7s;
	animation-delay: 0.4s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

#Volume:selected
{
	pre-transform-scale2d: 1.05;
	background-color: gradient( linear, -0% 0%, 0% 100%, from( #f0f0f0ff ), to( #c2c2c2ff ) );
}	

#Volume Image
{
	align: center center;
}


#Volume:focus Image
{
	wash-color:	#000000ff;
}

#Bar1.VoiceBar { height:  3px; }
#Bar2.VoiceBar { height:  6px; }
#Bar3.VoiceBar { height:  9px; }
#Bar4.VoiceBar { height: 12px; }
#Bar5.VoiceBar { height: 15px; }
#Bar6.VoiceBar { height: 18px; }
#Bar7.VoiceBar { height: 21px; }
#Bar8.VoiceBar { height: 24px; }
#Bar9.VoiceBar { height: 27px; }
#Bar10.VoiceBar { height: 30px; }
#Bar11.VoiceBar { height: 33px; }
#Bar12.VoiceBar { height: 36px; }




.VoiceBar
{
	margin-left: 3px;
	margin-right: 3px;
	width: 8px;
	background-color: #ffffff22;
	opacity: 1.0;
}

.VoiceBarActive
{
	background-color: white;
	transition-duration: 0.23s;
}

#Volume:focus .VoiceBar
{
	background-color: #ffffff99;
}

#Volume:focus .VoiceBarActive
{
	background-color: #111111aa;
}

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

#Volume:selected .VoiceBarActive
{
	background-color: #111111ff;
}


.QueueControlButtons
{
	flow-children: right-wrap;
	vertical-align: center;
	horizontal-align: center;
	width: 100%;
	height: 100px;
	margin: 10px;
	margin-top: 0px;
	padding-left: 10px;
	margin-bottom: 0px;
	background-image: url("file://{images}/music/control_bg.png");
	background-position: left 5px top 15px;
	background-size: 610px 70px;
	background-repeat: no-repeat;
}

.ControlBG
{
	background-color: black;
	width: 100%;
	height: 60px;
	margin-top: -20px;
}



//---------------------------------------------------------
// QUEUE ENTRY

#EntriesContainer
{
	flow-children: down;
	width: 100%;

	height: 0px;
	visibility: collapse;
}

#NoMusicQueueEntriesContainer
{
	height: 95%;
	width: 100%;
	visibility: collapse;
	flow-children: down;
	padding: 20px;
}

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



#MusicQueueEntriesContainer
{
	visibility: collapse;
	height: 95%;
	width: 100%;
	padding-top: 10px;

	flow-children: down;

	padding-bottom: 10px;
	padding-right: 4px;

	opacity-mask-scroll-up: url( "file://{images}/friends/friends_list_mask_fade_top.png" );
	opacity-mask-scroll-down: url( "file://{images}/friends/friends_list_mask_fade_bottom.png" );
	opacity-mask-scroll-up-down: url( "file://{images}/friends/friends_list_mask_fade_both.png" );

}

#MusicQueueEntriesContainer.PanelVisible
{
	visibility: visible;
}


#RemotePlayerEntriesContainer
{
	height: 95%;
	width: 100%;
	visibility: collapse;
	flow-children: down;
}

#RemotePlayerEntriesContainer.PanelVisible
{
	visibility: visible;
	flow-children: down;
	padding-top: 10px;
	
	background-image: url( "file://{images}/music/empty_player_bg.png" );
	background-size: 208px 243px;
	background-position: 200px 130px;
	background-repeat: no-repeat;
	
	overflow: squish scroll;
	margin-top: -10px;
	padding-bottom: 10px;
	margin-bottom: -10px;
}

#TrackContainer
{
	flow-children: right;
	margin-left: 20px;
}

#RemotePlayerEntriesContainer .TrackCompositeTitle
{
	font-size: deffontsize;
	line-height: 30px;
	font-family: platformfont;
	font-weight: bold;
	text-overflow: clip;
	max-height: 40px;
	padding-right: 14px;
	height: 32px;
	width: 500px;
	color: applabel;
}

#RemotePlayerEntriesContainer:focus .TrackCompositeTitle
{
	height: 32px;
	color: applabelselected;
}


#RemotePlayerEntriesContainer .TrackTime
{
	visibility: visible;
	horizontal-align: right;
	
	font-size: deffontsize;
	line-height: 30px;
	font-family: platformfont;
	font-weight: bold;
	text-overflow: clip;
	max-height: 40px;
	padding-right: 14px;
	width: 120px;
}

#RemotePlayerEntriesContainer.IsPlaying .TrackTime
{
  horizontal-align: right;
	visibility: visible;
	color: messagecolorwash;
}

#RemotePlayerEntriesContainer.IsPlaying:focus .TrackTime
{
  horizontal-align: right;
	visibility: visible;
	color: applabelselected;
}


#MusicQueueEntriesList
{
	flow-children: down;
	overflow: squish scroll;
	padding-top: 10px;
	margin-top: -10px;
	padding-bottom: 20px;
	margin-bottom: -10px;

	opacity-mask-scroll-up: url( "file://{images}/friends/friends_list_mask_fade_top.png" );
	opacity-mask-scroll-down: url( "file://{images}/friends/friends_list_mask_fade_bottom.png" );
	opacity-mask-scroll-up-down: url( "file://{images}/friends/friends_list_mask_fade_both.png" );
}

#MusicQueueInfoLabel
{
	width: 100%;
	// background-color: #888888;
	color: applabelsolid;
	text-align: center;
	height: 30px;
	font-size: 20px;
	font-weight: light;
	font-family: platformfont;
	text-transform: uppercase;
	opacity: 0.7;
}



MusicControlQueueEntry
{
	width: 600px;
	padding: 6px 8px;
	box-shadow: #eeeeee00 0px 0px 16px 0px;
	border: 5px solid;
	height: 53px;
	color: tcexitrow;
	margin-left: 20px;
	margin-right: 16px;

	transition-property: border, blur, background-color, color, transform, box-shadow;
	transition-duration: 0.23s;
	transition-timing-function: ease-out;

	visibility: visible;
}

MusicControlQueueEntry Label
{
	horizontal-align: left;
	color: applabel;
	transform: translatex(-12px);
	padding-left: 0px;
	transition-property: color, position, transform;
	transition-duration: 0.23s;
	transition-timing-function: bigpicture-ease-in-out;
	font-size: deffontsize;
	line-height: 30px;
	font-family: platformfont;
	font-weight: bold;
	text-overflow: clip;
	max-height: 40px;
	padding-right: 14px;

}

#MusicControllerPanel:descendantfocus MusicControlQueueEntry:focus Label, 
#MusicControllerPanel:descendantfocus MusicControlQueueEntry:hover Label,
#MusicControllerPanel:descendantfocus MusicControlQueueEntry:selected Label,
#MusicControlOverlay:descendantfocus MusicControlQueueEntry:focus Label, 
#MusicControlOverlay:descendantfocus MusicControlQueueEntry:hover Label
#MusicControlOverlay:descendantfocus MusicControlQueueEntry:selected Label
{
	horizontal-align: left;
	transform: translatex( 5px );
	padding-left: 0px;
	padding-right: 7px;
	transition-duration: 0.23s;
	color: applabelselected;
}


MusicControlQueueEntry.CurrentEntry
{
	background-color: simplebutton;	
}

MusicControlQueueEntry.CurrentEntry Label
{
	transform: translateX( 5px );
	padding-right: 14px;
	transition-duration: 0.23s;
	width: 510px;
}

#MusicControllerPanel:descendantfocus MusicControlQueueEntry:hover,
#MusicControlOverlay:descendantfocus MusicControlQueueEntry:hover,
{
	background-color: simplebutton;
}


#MusicControllerPanel:descendantfocus MusicControlQueueEntry:focus, 
#MusicControllerPanel:descendantfocus MusicControlQueueEntry:selected,
#MusicControllerPanel:descendantfocus MusicControlQueueEntry:hover:focus,

#MusicControlOverlay:descendantfocus MusicControlQueueEntry:focus, 
#MusicControlOverlay:descendantfocus MusicControlQueueEntry:selected,
#MusicControlOverlay:descendantfocus MusicControlQueueEntry:hover:focus
{
	transition-duration: 0.23s !immediate;

	border-width: 5px;
	border-style: solid;
	border-color: #fdfefef0;
	color: tcexitrowfocus;

	background-color: gradient( linear, 0% 0%, 100% 100%, from( #fdfdfdff ), to( #bdbfbfff ) );

	// Remove border, so we dont transition border out on focus lost, that looks weird.
	transition-property: blur, background-color, color, transform;

	transform: translatez( 0px );
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;

	animation-name: main-button-glow-movement;
	animation-duration: 1.7s;
	animation-delay: 0.4s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}




#MusicControllerPanel:descendantfocus MusicControlQueueEntry.CurrentEntry Label,
#MusicControlOverlay:descendantfocus MusicControlQueueEntry.CurrentEntry Label,
#MusicControllerPanel:descendantfocus MusicControlQueueEntry.CurrentEntry:hover Label,
#MusicControlOverlay:descendantfocus MusicControlQueueEntry.CurrentEntry:hover Label,
#MusicControllerPanel:descendantfocus MusicControlQueueEntry.CurrentEntry:hover:focus Label,
#MusicControlOverlay:descendantfocus MusicControlQueueEntry.CurrentEntry:hover:focus Label
{
	color: messagecolorwashfade;
}





MusicControlQueueEntry.CurrentEntry .TrackTime
{
	width: 80px;
	color: applabelselected;
}


MusicControlQueueEntry .TrackCompositeTitle
{
	width: 600px;
	height: 32px;
	color: applabel;
}



MusicControlQueueEntry:focus .TrackCompositeTitle
{
	height: 32px;
	color: applabelselected;
}

#MusicControlOverlay MusicControlQueueEntry.CurrentEntry Label
{
	color: gradient( linear, 0% 80%, 80% 100%, from( #5492b8ff ), color-stop( 0.75, #5492b8ff ), to( #5492b800 ) );
	text-overflow: clip;
	transform: translateX( 5px );
	width: 350px;
}


#MusicControlOverlay:descendantfocus MusicControlQueueEntry.CurrentEntry Label, #MusicControlOverlay:descendantfocus MusicControlQueueEntry.CurrentEntry:focus Label
{
	color: messagecolorwashfade;
	max-width: 365px;
	text-overflow: clip;
	transform: translateX( 5px );
	width: 450px;
}

#MusicControllerPanel MusicControlQueueEntry.CurrentEntry .TrackTime, 
#MusicControllerPanel MusicControlQueueEntry.CurrentEntry:focus .TrackTime,
#MusicControllerPanel MusicControlQueueEntry.CurrentEntry:hover .TrackTime,
#MusicControlOverlay MusicControlQueueEntry.CurrentEntry .TrackTime, 
#MusicControlOverlay MusicControlQueueEntry.CurrentEntry:focus .TrackTime,
#MusicControlOverlay MusicControlQueueEntry.CurrentEntry:hover .TrackTime
{
	visibility: visible;
	horizontal-align: right;
	width: 80px;

}

MusicControlQueueEntry .TrackTime
{
	visibility: collapse;
}

MusicControlQueueEntry.IsPlaying .TrackTime
{
  horizontal-align: right;
	visibility: visible;
	color: messagecolorwash;
}

MusicControlQueueEntry.IsPlaying:focus .TrackTime
{
  horizontal-align: right;
	visibility: visible;
	color: applabelselected;
}

#MusicControlOverlay MusicControlQueueEntry.CurrentEntry .TrackTime
{
	opacity: 1.0;
}

#MusicControlOverlay MusicControlQueueEntry.CurrentEntry:descendantfocus .TrackTime,
#MusicControlOverlay:descendantfocus MusicControlQueueEntry.CurrentEntry .TrackTime,
#MusicControlOverlay:descendantfocus MusicControlQueueEntry.CurrentEntry:descendantfocus .TrackTime
{
	opacity: 1.0;
	width: 80px;
	padding-left: 0px;
	color: messagecolorwashfade;
}

#MusicControlOverlay:descendantfocus .PlayPauseControlBarButton
{
	pre-transform-scale2d: 0.8;	

}

#MusicControlOverlay:descendantfocus .PlayPauseControlBarButton:focus
{
	pre-transform-scale2d: 0.92;	
	transition-duration: 0.23s;
}


#MusicControlPanel:descendantfocus MusicControlQueueEntry:hover Label,
#MusicControlOverlay:descendantfocus MusicControlQueueEntry:focus:hover Label,
#MusicControlPanel:descendantfocus MusicControlQueueEntry:hover Label,
#MusicControlOverlay:descendantfocus MusicControlQueueEntry:focus:hover Label
{
	transform: translateX( 5px );
	color: applabel;
	transition-duration: 0.23s;
}

#MusicControlOverlay MusicControlQueueEntry.CurrentEntry:hover Label, #MusicControlOverlay MusicControlQueueEntry:focus:hover Label
{
	transform: translateX( 5px );
	transition-duration: 0.23s;

}

#EntriesContainer VerticalScrollBar
{
	margin-top: 10px;
	margin-bottom: 10px;
}


#RemotePlayerDropDown
{
	visibility: collapse;
	flow-children: right;
	vertical-align: center;
	horizontal-align: center;
	width: 100%;
	height: 50px;
	margin-top: 15px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: -8px;
}

#RemotePlayerDropDown.RemotePlayerAvailable 
{
	visibility: visible;
}

#MusicQueueEntriesContainer.RemotePlayerAvailable
{
	height: 370px;
}

.SeekContainer
{
	width: 100%;
	margin-top: 10px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 10px;

	flow-children: right;
}

.SeekContainer Label
{
	horizontal-align: right;
}

SeekBar
{
	margin-top: 5px;
	width: 80%;
	height: 15px;
	background-color: message_box_bg;
	margin-right: 10px;
}
SeekBar:focus
{
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #f0f0f0 ), to( #c2c2c2 ) );
	transition-timing-function: linear;
	animation-name: main-button-glow-movement-no-fill;
	animation-duration: 1.7s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
SeekBar .SeekBarProgressBG
{
	width: 1000%;
	height: 100%;
	z-index: 1;
	background-color: #000000;
}
SeekBar .SeekBarProgress
{
	width: 0%;
	height: 100%;
	background-color: messagecolorwash;
	z-index: 2;
}

#TrackContainer
{
	width: 100%;
	margin-top: 12px;
	margin-left: 18px;
	margin-right: 18px;
}

#TrackName
{
	color: white;
	font-size: 30px;
}

#TrackTime
{
	horizontal-align: right;
	color: white;	//messagecolorwash;
	font-size: 20px;
}


#TransportBottomSection
{
	width: 100%;
	height: fit-children;
	margin-top: 20px;
}

.TransportBottomButton
{
	width: 49%;
	height: 180px;

	background-color: gradient( linear, 0% 0%, 0% 100%, from( message_box_bg_dark ), to( #14445f ) );
}

.TransportBottomButton:hover
{
	box-shadow: messagecolorwash -4.5px -4.5px 16px 9px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #133e57 ), to( messagecolorwash ) );
}

.TransportBottomButton:focus
{
	box-shadow: messagecolorwash -4.5px -4.5px 16px 9px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #133e57 ), to( messagecolorwash ) );
}

#MusicExploreButton
{
	horizontal-align: left;
}

.NoCurrentPlaylist #MusicExploreButton
{
	horizontal-align: center;
	width: 60%;
}

#MusicExploreButton Label
{
	color: ui_primary_color;
	font-size: 30px;
	horizontal-align: center;
	vertical-align: center;
	text-align: center;
}

#MusicExploreButton:hover Label,
#MusicExploreButton:focus Label
{
	color: #d6f5ffff;
}

#CurrentlyPlayingButton
{
	horizontal-align: right;

	padding: 10px;

	flow-children: down;
}

.NoCurrentPlaylist #CurrentlyPlayingButton
{
	visibility: collapse;
}

#CurrentlyPlayingButton Image
{
	horizontal-align: center;
	vertical-align: center;
	height: 85%;
	margin-bottom: 4px;

	box-shadow: fill #00000033 -2px -2px 9px 5px;
}