@define mediumduration: 0.4s;


MusicAlbumPanel
{
	width: 100%;
	height: 100%;
	background-color: #00000000;
	padding: 0px 0px 10px 0px;

	opacity: 1.0;

	transform: translate3d( 0px, 1280px, 1000px );
	transform: translatey( 0px );
	
	transition-property: transform, blur, position, opacity, saturation;
	transition-duration: mediumduration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

#TrackInfoBlock
{
	width: 600px;
	height: 130px;
	margin-right: 25px;
	horizontal-align: right;
	vertical-align: bottom;
	background-color: none;
	flow-children: down;
}

.PlaybackSettings
{
	width: 100%;
	horizontal-align: left;
	padding: 4px;
}

.PlaybackSettings Button
{
	width: 50px;
	height: 50px;
	padding: 4px;
}

.PlaybackSettings Button:focus
{
}


#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;
}

#AlbumCoverUpperLabel
{
	color: applabel;
	opacity: 0.0;
	
	transition-property: opacity;
	transition-duration: 0.1s;
	transition-delay: 0.0s;
	transition-timing-function: bigpicture-ease-in-out;
}

#BigLabels
{
	flow-children: down;
	width: 770px;
	height: 80%;
	padding-top: 12px;
	padding-left: 10px;

	transition-property: transform, pre-transform-scale2d;
	transition-duration: 0.3s;
	transition-delay: 0.0s;
	transition-timing-function: bigpicture-ease-in-out;
}

.NowPlayingVisible #BigLabels
{
	pre-transform-scale2d: 0.75;
	transform: translatex( 0px ) translatey( -50px );
}

.NoCover #AlbumCoverUpperLabel
{
	opacity: 0.2;
	font-size: 120px;
	max-height: 450px;
	width: 560px;
	font-weight: thin;
	text-transform: uppercase;
	text-overflow: clip;
	white-space: normal;
	transform: translateX( 180px ) translateY( 12px );
	height: fit-children;
	vertical-align: top;

	transition-property: opacity;
	transition-duration: 0.1s;
	transition-delay: 0.0s;
	transition-timing-function: bigpicture-ease-in-out;
}

#AlbumCoverLowerLabel
{
	color: applabel;
	margin-top: 20px;
	opacity: 0.0;
	
	transition-property: opacity;
	transition-duration: 0.1s;
	transition-delay: 0.0s;
	transition-timing-function: bigpicture-ease-in-out;
}

.NoCover #AlbumCoverLowerLabel
{
	opacity: 0.5;
	font-size: 120px;
	max-height: 450px;
	width: 565px;
	font-weight: thin;
	text-transform: uppercase;
	white-space: normal;
	text-overflow: clip;
	height: fit-children;
	transform: translateX( 180px ) translateY( 29px );

	transition-property: opacity;
	transition-duration: 0.1s;
	transition-delay: 0.0s;
	transition-timing-function: bigpicture-ease-in-out;
}

.UpperRow
{
	width: 100%;
	height: 50px;
	flow-children: down;
}

.Body
{

	width: 100%;
	height: 100%;
	margin-top: 0px;
	padding-top: 20px;
	flow-children: right;
}

.LeftColumn
{
	width: 800px;
	height: 800px;
}

.RightColumn
{
	height: 770px;
	margin-top: 20px;
}

.AlbumImage
{
	width: 600px;
	height: 600px;
	margin-top: 48px;
	margin-left: 175px;
	margin-right: 10px;
	margin-bottom: 10px;
	box-shadow: fill #00000033 -5px -5px 18px 10px;

	opacity: 0.0;

	transform: none;

	transition-property: opacity, transform, pre-transform-scale2d;
	transition-duration: 0.01s, 0.3s, 0.3s;
	transition-delay: 0.0s;
	transition-timing-function: bigpicture-ease-in-out;
}

.NowPlayingVisible .AlbumImage
{	
	pre-transform-scale2d: 0.80;
	transform: translatex( 0px ) translatey( -50px );
}

.AlbumImage.Current
{
	opacity: 1.0;
}

.TopSpacer
{
	width: 100%;
	height: 40px;
}

.TrackButtonContainer
{
	margin-top: 20px;
	flow-children: down;
	height: 100%;
	width: 960px;
	overflow: squish scroll;
	opacity: 0.99;
	padding: 0px;
	padding-top: 5px;

	transition-property: transform;
	transition-duration: 0.2s;
	transition-timing-function: bigpicture-ease-in-out;

	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" );
}

.TrackButton
{	
	background-color: transparent;
	color: applabel;
	width: 100%;
	height: 58px;
	padding: 4px;
}

.TrackButton #TrackLabel
{
	color: applabel;
	width: 100%;
	text-overflow: clip;
	font-weight: bold;
	height: 32px;
	transform: translateX(-14px );
	transition-property: transform;
	transition-duration: 0.23s;
}

.TrackButton:hover
{
	box-shadow: none;
	transition-property: background-color;
	transition-duration: 0.23s;
}


.TrackButton:focus:hover
{
	transition-duration: 0.25s !immediate;

	horizontal-align: left;

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

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

	transform: translatex(7px);

	// 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;
}


.TimeLabel
{
	transform: translateX(500px);
	font-weight: bold;
	visibility: collapse;
	horizontal-align: right;
	transition-property: opacity;
}

.TrackButton.TrackCurrentlyPlaying #ElapsedLabel
{
	visibility: visible;
	transform: translateX(500px);
}


.TrackButton:focus #TimeLabel
{
	visibility: visible;
	transform: translateX(500px);
}

.TrackButton.TrackCurrentlyPlaying #TimeLabel
{
	visibility: collapse;
}

.TrackButton.TrackCurrentlyPlaying Label,
.TrackButton:focus .TrackCurrentlyPlaying Label
{
	color: messagecolorwashfade;
	transform: translateX( 0px );
	width: 100%;
}

.TrackButton:focus #TrackLabel
{
	color: musicapplabelselected;
}

.TrackButton.TrackCurrentlyPlaying #TrackLabel,
.TrackButton.TrackCurrentlyPlaying:focus #TrackLabel
{
	color: messagecolorwashfade;
	width: 85%;
}

.TrackButton #TrackPosition
{
	transform: translateX( -14px );
	max-width: 45px;
	font-size: 18px;
	font-weight: bold;
	text-align: left;
	padding-right: 4px;
	padding-top: 4px;
	color: #999999ff;
	vertical-align: center;
	width: fit-children;
	transition-property: transform, color;
	transition-timing-function: bigpicture-ease-in-out;
	transition-duration: 0.15s;
	margin-left: 30px;
}

.TrackButton:focus #TrackPosition
{
	color: #666666ff;
	transform: translateX( 0px );
}

.TrackButton.TrackCurrentlyPaused #TrackPosition,
.TrackButton.TrackCurrentlyPlaying #TrackPosition
{
	visibility: collapse;
}

.TrackButton #TrackLabel
{
	transform: translateX( 65px );
	vertical-align: center;
}

#OverlayBasePanel #MusicAlbumPanel
{
	margin-top: 50px;
}

#NowPlaying
{
	visibility: collapse;
	margin-top: 5px;
	margin-left: 23px;
	width: 590px;
	transform: translatex( 157px ) translatey( 547px );
}

.NowPlayingVisible #NowPlaying
{
	visibility: visible;
}

.ControlBarButton
{
	margin-top: 5px;
	border-radius: 8px;
	background-color: #00000033;
}

.PlayPauseControlBarButton
{
	height: 40px;
	width: 40px;
	border-width: 2px;
	border-style: solid;
	border-radius: 50%;
	border-color: #14c4f999;
	box-shadow: #00000022 -4.5px -4.5px 9px 9px;
	pre-transform-scale2d: 0.90;
	transition-property: transform, pre-transform-scale2d;
	transition-duration: 0.15s, 0.1s;
	transition-timing-function: bigpicture-ease-in-out, linear;
	vertical-align: center;
	horizontal-align: left;
	//background-color: gradient( linear, 0% 0%, 0% 100%, from( dark_box_shadow_color_opaque ), to( ui_primary_color ) );
	background-color: #00000033;
	margin-left: 0px;
	visibility: collapse;
}

.PlaybackSettings .PlayPauseControlBarButton
{
	visibility: visible;
	height: 60px;
	width: 60px;
	horizontal-align: center;
}

#QueueRepeat
{
	margin-left: 20px;
}

#QueueShuffle
{
	transform: translatex( 70px );
}

#QueuePrevious
{
	transform: translatex( 190px );
}

#QueueNext
{
	transform: translatex( 321px );
}

.TrackButton:focus .PlayPauseControlBarButton
{
	color: #666666ff;
	transform: translateX( 5px );
}

.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;

	background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #b6e1faff ) );
	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:focus Image, .PlayPauseControlBarButton:focus Image
{
	wash-color: #000000ff;
}

.TrackButton.TrackCurrentlyPaused .PlayPauseControlBarButton,
.TrackButton.TrackCurrentlyPlaying .PlayPauseControlBarButton
{
	visibility: visible;
}

#TogglePauseImage,
#TogglePlayImage
{
	visibility: collapse;
}

.PlaybackSettings #TogglePlayImage
{
	visibility: visible;
}

.TrackCurrentlyPlaying .PlaybackSettings #TogglePauseImage
{
	visibility: visible;
}

.TrackCurrentlyPlaying .PlaybackSettings #TogglePlayImage
{
	visibility: collapse;
}

.TrackButton.TrackCurrentlyPlaying #TogglePauseImage
{
	visibility: visible;
}

.TrackButton.TrackCurrentlyPlaying.TrackCurrentlyPaused #TogglePauseImage
{
	visibility: collapse;
}

.TrackButton.TrackCurrentlyPaused #TogglePlayImage
{
	visibility: visible;
}

#VolumeControl
{
	padding: 0px;
	horizontal-align: right;
	margin-right: 20px;

}

#VolumeControl .VolumeImage
{
	width: 37px;
	height: 37px;
	align: center center;
	pre-transform-scale2d: 0.8;
}

#VolumeControl:focus .VolumeImage
{
	wash-color: #000000ff;
}

#VolumeControl .VolumeImage
{
	background-image: url( "file://{images}/transport_controls/icon_volume_04.png" );
}

#VolumeControl.AudioVolumeMuted .VolumeImage
{
	background-image: url( "file://{images}/transport_controls/icon_volume_01.png" );
}

#VolumeControl.AudioVolumeUnder33 .VolumeImage
{
	background-image: url( "file://{images}/transport_controls/icon_volume_02.png" );
}

#VolumeControl.AudioVolumeUnder66 .VolumeImage
{
	background-image: url( "file://{images}/transport_controls/icon_volume_03.png" );
}

//
// VolumeSliderPopup
//
VolumeSliderPopup
{
	width: 100%;
	height: 100%;
}

VolumeSliderPopup .PopupWrapper
{
	width: 60px;
	height: 150px;

	background-color: gradient( linear, -0% 0%, 0% 100%, from( #f0f0f0 ), to( #c2c2c2 ) );
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
	border: 2px solid #fdfefef0;
	border-radius: 4px;

	transform: translatey( -10px ) translatex( 521px );
}

VolumeSliderPopup Slider
{
	align: center center;
}

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

.PlaybackSettings
{
	overflow: noclip;

	background-image: url("file://{images}/music/control_bg_2.png");
	background-position: left 0px top 0px;
	background-size: 100% 70px;
	background-repeat: no-repeat;
}

#TrackTime
{
	horizontal-align: left;
	margin-top: 25px;
	visibility: collapse;
}

.TrackCurrentlyPlaying #TrackTime,
.TrackCurrentlyPaused #TrackTime
{
	visibility: visible;
}

#TracksInfoLabel
{
	horizontal-align: left;
	margin-top: 25px;

	font-family: platformfont;
	font-weight: bold;
	color: #888888ff;
	font-size: 18px;
	margin-top: 24px;
	margin-left: 30px;
	margin-bottom: 15px;
	white-space: nowrap;
	margin-right: 5px;
	width: 100%;
}

.SeekContainer Label
{
	font-family: platformfont;
	font-weight: bold;
	color: #888888ff;
	font-size: 18px;
	margin-top: 24px;
	white-space: nowrap;
	text-align: right;
	horizontal-align: center;
	margin-right: 5px;
	width: fit-children;
}

SeekBar
{
	margin-top: 5px;
	width: 100%;
	horizontal-align: center;
	height: 15px;
	background-color: #00000033;
}

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: #00000022;
}
SeekBar .SeekBarProgress
{
	width: 0%;
	height: 100%;
	background-color: messagecolorwash;
	z-index: 2;
}

SeekBar:selected  .SeekBarProgress
{
	background-color: white;
}