@define achievementstitle: gradient( linear, 80% 0%, 92% 0%, from( #f2f2f2ff ), to( #ebebeb00 ) );
@define achievementsdesc: gradient( linear, 0% 0%, 0% 100%, from( #b3b3b3ee ), to( #b3b3b3ce ) );
@define newstitle: gradient( linear, 80% 0%, 92% 0%, from( #f2f2f2bb ), to( #ebebeb00 ) );
@define largenewstitle: gradient( linear, 0% 0%, 0% 160%, from( #f2f2f2ef ), to( #abababee ) );
@define largenewsbyline: gradient( linear, 0% 0%, 100% 0%, from( #666666ff ), color-stop( 0.8, #666666ff ), to( #66666600 ) );
@define largenewsbody: gradient( linear, 82% 0%, 98% 0%, from( #d2d2d2ef ), to( #8b8b8bce ) ); 
@define largenewstitle_dark: gradient( linear, 0% 0%, 0% 100%, from( #0e0e0eff ), to( #3b3b3bce ) );
@define largenewsbyline_dark: gradient( linear, 0% 0%, 160% 0%, from( #888888ff ), color-stop( 0.8, #88888822 ), to( #8f8f8f00 ) );
@define largenewsbody_dark: gradient( linear, 82% 0%, 98% 0%, from( #363636ff ), to( #36363600 ) );
@define playtime: gradient( linear, 92% 0%, 0% 110%, from( #c4c4c4dd ), to( #f2f2f2dd) );
@define playtimetitle: gradient( linear, 80% 0%, 0% 100%, from( #d2d2d2ef ), to( #8b8b8bce ) );  
@define achievementdetailsheader: gradient( linear, 0% 0%, 0% 100%, from( #d2d2d2ef ), to( #8b8b8bce ) );
@define achievementdetailsheaderdark: gradient( linear, 0% 0%, 0% 100%, from( #525252ef ), to( #3b3b3bce ) );
@define achievementstitledark: gradient( linear, 80% 0%, 92% 0%, from( #000000ce ), to( #00000000 ) );
@define achievementsdescdark: #434343ff;

@define guidestitle: gradient( linear, 80% 0%, 92% 0%, from( #f2f2f2ff ), to( #ebebeb00 ) );
@define guidestitledark: gradient( linear, 80% 0%, 92% 0%, from( #000000ce ), to( #00000000 ) );
@define guidesdesc: gradient( linear, 0% 0%, 0% 100%, from( #b3b3b3ee ), to( #b3b3b3ce ) );
@define guidedetailsheader: gradient( linear, 0% 0%, 0% 100%, from( #d2d2d2ef ), to( #8b8b8bce ) );
@define guidedetailsheaderdark: gradient( linear, 0% 0%, 0% 100%, from( #525252ef ), to( #3b3b3bce ) );

@define shortduration: 0.25s;
@define shortmedduration: 0.3s;
@define mediumduration: 0.4s;
@define longduration: 1.7s;

.HeaderLabelLarge
{ 
	font-size: largefontsize;
	font-family: platformfont;
	color: tclegendlabel;
	horizontal-align: center;
}


MusicPanel
{
	width: 100%;
	height: 100%;
	vertical-align: bottom;
	opacity: 0.0;
}


.MusicVisible:descendantfocus
{
	transition-property: transform, position, opacity !immediate; 
	transition-duration: mediumduration;
	transition-delay: mediumduration;
	transition-timing-function: linear;
	transition-delay: 0s;

	opacity: 1.0;
}



.MusicVisible.MusicControlOverlay
{
	height: 100%;
	transform: translateY( 0px ) translateZ( 0px );
	padding-bottom: 60px;
	margin-top: -60px;
	background-color: none;
}


.HeaderLabelLarge
{ 
	font-size: largefontsize;
	font-family: platformfont;
	color: tclegendlabel;
	horizontal-align: center;
}


.HiddenPanel
{
	visibility: collapse;
}

.GridBackground
{
	width: 100%;
	height: 100%;

	margin-top: 4px;
	box-shadow: #000000aa -2px -2px 4px 4px;
	background-color: black;
	background-image: url( "file://{images}/store/store_app_bg.png" );

	background-position: center center;
	background-repeat: no-repeat;
	background-size: 1920px 1080px;
}

OverlayBasePanel .GridBackground
{
	opacity-mask: none;
}

// Crawling
//======================================

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

#PanelDuringCrawling
{
	width: 100%;
	height: 100%;
	margin-top: 80px;
	opacity: 0.0;
}

.DuringCrawling #PanelDuringCrawling
{
	opacity: 1.0;
}

.CrawlingHeader
{
	font-family: platformfont;
	color: carousel_title;
	font-size: 24px;
	height: 50px;
	// white-space: nowrap;
	margin-left: 102px;
	margin-top: 45px;	
	vertical-align: top;
	text-align: left;
}