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


MusicQueuePanel
{
	width: 100%;
	height: 100%;
	background-color: #00000000;
	opacity: 0.0;
	padding: 10px 5px 10px 5px;

	transition-property: opacity, transform;
	transform: translatez( 600px ) translatey( 1080px );
}

.MusicQueueVisible
{
	opacity: 1.0;

	transition-property: opacity, blur, saturation, transform;
	transition-duration: 0.3s, 0.3s, 0.3s, 0.4s !immediate;
	transition-timing-function: linear;
	transform: translatez( 0px ) translatey( 0px );

}


.MusicQueueVisible.ScreenSaverMode
{
	opacity: 0.0;
	transition-property: opacity, transform, pre-transform-scale2d, saturation, wash-color, blur;
	transition-duration: 1.4s, 0.3s !immediate;
	transition-timing-function: linear;
}



.MusicFullQueuePanel

{

	padding: 10px 0px 0px 0px;

	width: 640px;

	height: 660px;

	background-color: #eeeeee60;

	vertical-align: center;

	horizontal-align: center;

	flow-children: down;



	border-width: 5px;

	border-style: solid;

	border-color: ui_common_control_border;

	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;



	color: #ffffffff;

	background-color: message_box_bg;



	animation-name: msg-box-appear;

	animation-duration: 0.4s;

	animation-timing-function: bigpicture-ease-in-out;

	animation-iteration-count: 1;

}


#MusicQueueEntriesList
{
	flow-children: down;
	overflow: squish scroll;
	height: 580px;
	width: 100%;
	padding-bottom: 20px;

	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%;
	text-align: center;
	padding-top: 20px;
	height: 50px;
	font-size: deffontsize;
	font-family: platformfont;
	opacity: 0.7;
	text-transform: uppercase;
	font-weight: light;
}


MusicQueueListEntry
{
	width: 100%;
	padding: 6px 8px;
	box-shadow: #eeeeee00 0px 0px 16px 0px;
	border: 5px solid;
	height: 53px;
	color: tcexitrow;
	margin-left: 10px;
	margin-right: 16px;

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

	visibility: visible;


}

MusicQueueListEntry Label
{
	horizontal-align: left;
	color: applabel;
	transform: translatex(0px);
	padding-left: 0px;
	transition-property: color, position, transform;
	transition-duration: 0.25s;
	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;

}

MusicQueueListEntry:focus Label
{
	horizontal-align: left;
	color: #171717f5;
	transform: translatex(7px);
	padding-left: 0px;
	padding-right: 14px;
}

MusicQueueListEntry.CurrentEntry
{
	background-color: simplebutton;	
}


MusicQueueListEntry:hover
{
	transition-duration: 0.23s !immediate;

	color: tcexitrowhover;
	box-shadow: #eeeeee60 -5px -5px 6px 10px;
}



MusicQueueListEntry:focus
{
	transition-duration: 0.25s !immediate;

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

	background-color: gradient( linear, -15% 0%, 100% 0%, 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;
}





MusicQueueListEntry.CurrentEntry Label, MusicQueueListEntry.CurrentEntry:focus Label
{
	color: messagecolorwashfade;
	width: 520px;

}



MusicQueueListEntry.CurrentEntry .TrackTime, MusicQueueListEntry.CurrentEntry:focus .TrackTime
{
	visibility: visible;
	horizontal-align: right;
	width: 80px;

}

MusicQueueListEntry.CurrentEntry:focus .TrackTime
{
	color: applabelselected;
}


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

MusicQueueListEntry:focus .TrackCompositeTitle
{
	width: 600px;
	height: 32px;
	color: applabelselected;
}

MusicQueueListEntry .TrackTime
{
	visibility: collapse;
}

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

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