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

#ContentPanel
{
	width: 100%;
	height: 100%;
	margin-top: 20px;
	opacity: 1.0;
	flow-children: down;
}

#LibraryContent
{
	width: 100%;
	height: 100%;
}

.DuringCrawling #ContentPanel
{
	opacity: 0.0;
}

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

.DuringCrawling #PanelDuringCrawling
{
	opacity: 1.0;
}

MusicLibraryAlbumPanel
{
	width: 100%;
	height: 100%;
	
	opacity: 1.0;
	
	transition-property: opacity;
	transition-duration: 0.4s;
	transition-timing-function: linear;
}

MusicLibraryArtistPanel
{
	width: 100%;
	height: 100%;
	
	opacity: 1.0;
	
	transition-property: opacity;
	transition-duration: 0.4s;
	transition-timing-function: linear;
}

MusicLibraryPlaylistPanel
{
	width: 100%;
	height: 100%;
	
	opacity: 1.0;
	
	transition-property: opacity;
	transition-duration: 0.4s;
	transition-timing-function: linear;
}

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

.MusicLibraryVisible
{
	opacity: 1.0;
	saturation: 1.0;
}

.MusicExploreVisible
{
	opacity: 1.0;
	visibility: visible;
}



.SectionHeader
{
	font-family: platformfont;
	text-transform: uppercase;
	font-weight: light;
	color: carousel_title;
	font-size: 56px;
	line-height: 70px;
	white-space: nowrap;

	margin-left: 100px;
	vertical-align: center;
}

.SectionLabel
{
	font-family: platformfont;
	text-transform: uppercase;
	font-weight: light;
	font-size: 32px;
	line-height: 40px;
	white-space: nowrap;
	color: white;
	margin-left: 100px;
	vertical-align: center;
}

.HeaderRow
{
	margin-top: 60px;
	width: 100%;
	height: 80px;
	padding-top: 0px;
	flow-children: right;
}


#GridTabs
{
	margin-top: 0px;
	height: 50px;

	width: 100%;
	flow-children: right;
	margin-left: -25px;

	opacity: 1.0;

	transition-property: transform, opacity;
	transition-duration: 0.4s;
	transition-timing-function: bigpicture-ease-in-out;
}


#GridTabs Button
{

	height: 60px;
	padding: 0px;

	transform: translatey( -1px );
	pre-transform-scale2d: 0.85;
	color: #ffffff77;
	box-shadow: fill #ffffff00 3px 16px 40px -32px;
	margin-left: 0px;

	padding-right: 24px;

	transition-property: color, box-shadow, background-color, pre-transform-scale2d, transform;
	transition-timing-function: ease-out;
	transition-duration: 0.4s;
}

//current selection
#GridTabs Button.Focused
{

	pre-transform-scale2d: 0.85;
	transform: translatey( -2px );
	transition-duration: 0.23s !immediate;
	color: #f2f2f2ff;

}

//focus
#GridTabs Button:focus
{
	pre-transform-scale2d: 1.0;
	transform: translatey( -3px );
	transition-duration: 0.23s !immediate;
	color: #ffffff77;

	background-image: url( "file://{images}/store/filterbg.png" );
	background-size: 110% 110%;
	background-position: left -10px top -4px;
	background-repeat: no-repeat;
}

#GridTabs Button:hover
{
	pre-transform-scale2d: 0.9;
	transform: translatey( -2px );
	transition-duration: 0.23s !immediate;
	color: #ffffff55;

	//box-shadow: fill light_box_shadow_color 3px 16px 40px -32px;
}

#GridTabs Button.Focused
{
	pre-transform-scale2d: 0.85;
	transform: translatey( -1px );
	transition-duration: 0.23s !immediate;
	color: #ffffff77;

	box-shadow: fill box_shadow_off_color 3px 16px 40px -32px;
}

#GridTabs Button.Focused:hover
{
	pre-transform-scale2d: 0.9;
	transform: translatey( -2px );
	transition-duration: 0.23s !immediate;
	color: #ffffff77;

	//box-shadow: fill light_box_shadow_color 3px 16px 40px -32px;
	
	background-image: url( "file://{images}/store/filterbg.png" );
	background-size: 100% 100%;
	background-position: left -12px top 0px;
	background-repeat: no-repeat;
}



#GridTabs Button.Focused:active
{
	pre-transform-scale2d: 1.00;
	transform: translatey( -2px );
	transition-duration: 0.23s !immediate;
	color: #f2f2f2ff;
	
	//box-shadow: fill light_box_shadow_color 3px 16px 40px -32px;
	
	background-image: url( "file://{images}/store/filterbg.png" );
	background-size: 100% 100%;
	background-position: left -12px top 0px;
	background-repeat: no-repeat;

}


#GridTabs Button Label
{
	color: #ffffff66;
	font-size: 32px;
	text-transform: uppercase;
	font-weight: light;
	align: center center;
	transition-property: color, opacity;
	transition-timing-function: bigpicture-ease-in-out;
	transition-duration: 0.4s;
}

#GridTabs Button:descendantfocus Label
{
	color: #ffffffff;
	align: center center;
}

#GridTabs Button:focus Label
{
	color: #ffffffff;
}

#GridTabs Button.Focused Label
{
	color: #ffffffff;
}

#GridTabs Button:hover Label
{
	color: #ffffffff;
}


.CrawlingTextRow
{
	flow-children: right;
}

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


.CrawlingTopSpacer
{
	width: 10px;
	height: 280px;
}

.CrawlingLabelLeft
{
	font-family: platformfont;
	text-transform: uppercase;
	font-weight: light;
	color: carousel_title;
	font-size: 48px;
	height: 90px;
	margin-top: 26px;
	white-space: nowrap;

	margin-left: 440px;
	vertical-align: top;
	text-align: right;
	margin-right: 20px;
	width: 500px;
}

.CrawlingLabelRight
{
	font-family: platformfont;
	text-transform: uppercase;
	font-weight: light;
	color: carousel_title;
	font-size: 70px;
	height: 90px;
	margin-top: 5px;
	// white-space: nowrap;

	margin-left: 0px;
	vertical-align: top;
	text-align: left;
}

.MusicAlbumGrid
{
	transition-property: transform;
	transition-duration: 0.23s;
	transition-timing-function: bigpicture-ease-in-out;

	width: 1500px;
	height: 100%;
	horizontal-align: center;
	padding: 10px;
	margin-top: 10px;
}

.MusicAlbumGrid AlbumGridItem
{
	width: 220px;
	height: 220px;
	margin-bottom: 10px;
}

.Active #MusicAlbumGrid
{
	opacity: 1.0;
	transform: translateX( 0px );
}

AlbumGridItem
{
	width: 326px;
	height: 326px;
	vertical-align: top;
	pre-transform-scale2d: 1.0;

	transition-property: position, pre-transform-scale2d, transform, box-shadow;
	transition-duration: 0.23s;
	transition-delay: 0.0s;
	transition-timing-function: bigpicture-ease-in-out;
	
	box-shadow: box_shadow_off_color 0px 0px 16px 0px;
}

.DragScrolling AlbumGridItem
{
	transition-duration: 0.0s, 0.23s;
}

.Flick AlbumGridItem
{
	transition-timing-fuction: DragScrollFlickTimingFunction, bigpicture-ease-in-out;
	transition-duration: DragScrollFlickTime, 0.23s;
}


AlbumGridItem:focus
{
	z-index: 5;
	pre-transform-scale2d: 1.05;
	
	box-shadow: box_shadow_on_color 0px 0px 16px 0px;

	animation-name: main-button-glow-movement-no-fill;
	animation-duration: longduration;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

AlbumGridItem:hover
{
	opacity: 1.0;
	saturation: 1.0;
}

AlbumGridItem:focus:hover
{
	opacity: 1.0;
	saturation: 1.0;
}	

AlbumGridItem.Hidden
{
	visibility: collapse;
}



.AlbumImage
{
	width: 100%;
	height: 100%;
	horizontal-align: left;
}

#FastScrollWrapper
{
	z-index: 100;
	flow-children: right;
}

#FastScrollLabel
{
	margin-top: 43px;
	margin-left: 100px;
	font-size: 584px;

	height: 710px;

	z-index: 100;

	color: #f2f2f2ff;
	opacity: 0.0;
	
	background-image: url( "file://{images}/library/lettershadow.png"  );
	background-repeat: no-repeat no-repeat;
	background-position: 0px 80px;
	
	text-transform: uppercase;

	transition-property: opacity;
	transition-duration: shortduration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;

}

.Moving #FastScrollLabel
{
	opacity: 1.0;
	transition-duration: 0.5s;
	
}

#TypeToJumpLabel
{
	margin-top: 300px;
	font-size: 300px;

	z-index: 100;

	color: #f2f2f2ff;
	opacity: 0.0;
	
	transition-property: opacity;
	transition-duration: shortduration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.Moving #TypeToJumpLabel
{
	opacity: 1.0;
	transition-duration: 0.5s;
}

#OverlayBasePanel .MusicAlbumGrid
{
	padding-bottom: 60px;
	margin-top: 10px;
}

.MusicCrawlAnimation
{
	opacity: 1.0;
	width: 3840px;
	height: 420px;

	vertical-align: top;
	background-image: url( "file://{images}/library/stream2b.png"  );
	background-repeat: repeat no-repeat;
	background-position: 0px 0px;
	overflow: noclip;
	margin-top: -310px;
	animation-name: stream-activity;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}


@keyframes 'stream-activity'
{
     0%
     {
           transform: scale3d( 2.0, 1.0, 1.0 ) translatex( -1920px );

     }
     
     100%
     {
           transform: scale3d( 2.0, 1.0, 1.0 ) translatex( 0px );
     }
}


#InputButton
{
	width: 100px;
	height: 100px;
}


///////////////////////////////////////////////////////

.MusicArtistGrid
{
	margin-top: 0px;

	padding-top: 30px;
	padding-left: 95px;
	padding-right: 90px;
	padding-bottom: 84px;

	transform: translateX( 220px );
	transition-property: transform;
	transition-duration: 0.23s;
	transition-timing-function: ease-out;

	width: 1500px;
	height: 100%;

	visibility: visible;
}


.Active .MusicArtistGrid
{
	opacity: 1.0;
	transform: translateX( 0px );
}

///////////////////////////////////////////////////////

.MusicPlaylistGrid
{
	margin-top: 0px;

	padding-top: 30px;
	padding-left: 95px;
	padding-right: 90px;
	padding-bottom: 84px;

	transform: translateX( 220px );
	transition-property: transform;
	transition-duration: 0.23s;
	transition-timing-function: ease-out;

	width: 1500px;
	height: 100%;

	visibility: visible;
}


.Active .MusicPlaylistGrid
{
	opacity: 1.0;
	transform: translateX( 0px );
}

.LibraryAllGames MusicLibraryAlbumPanel
{
	overflow: clip;
}

.LibraryAllGames .MusicAlbumGrid
{
	padding-top: 77px;
	padding-left: 135px;
	position: 390px 0px 0px;
	padding-right: 40px;
	margin-left: 200px;

	width: 1854px;
	height: 1480px;

	//opacity-mask-scroll-up: url( "file://{images}/library/scroll_data_mask_up.tga" );
	//opacity-mask-scroll-down: url( "file://{images}/library/scroll_data_mask_down.tga" );
	//opacity-mask-scroll-up-down: url( "file://{images}/library/scroll_data_mask_both.tga" );

	transform: translateX( 0px );
	transition-delay: 0s;
	transition-duration: supershortduration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-property: transform, width;
}

AlbumGridItem.NoCover #AlbumLabelWrapper
{
	visibility: visible;
}

AlbumGridItem.HiddenByFilter
{
	visibility: collapse;
}

#AlbumLabelWrapper
{
	margin: 5px;
	flow-children: down;
	visibility: collapse;
}

#AlbumUpperLabel
{
	color: white;
	font-size: 24px;
}

#AlbumLowerLabel
{
	color: white;
	font-size: 20px;
}

.AddLibraryItem #AlbumLowerLabel
{
	font-size: 26px;
	font-weight: bold;
}

.EmptyLabel
{
	position: 0px -100px 0px;

	visibility: visible;

	font-size: 34px;
	height: 64px;
	horizontal-align: center;
	vertical-align: center;
	color: #67c1f5ff;
	white-space: nowrap;
	text-overflow: clip;

	transition-property: opacity;
	transition-duration: shortduration;
	transition-timing-function: bigpicture-ease-in-out;
}


.EmptyGrid #EmptyLibraryArea
{
	opacity: 1.0;

	vertical-align: center;
	horizontal-align: center;
	background-color: #00000044;
	height: 800px;
	width: 1350px;
	z-index: -10;
}

.search.EmptyGrid #EmptySearchArea,
#DownloadsNone,
#ActivateProductArea
{
	opacity: 1.0;

	position: 486px 32px 0px;
	background-color: #00000044;
	height: 800px;
	width: 1350px;

	transition-property: transform;
	transition-delay: 0s;
	transition-duration: supershortduration;
	transition-timing-function: bigpicture-ease-in-out;
	z-index: -10;
}

.AddLibraryItem,
.AddLibraryItem:focus
{
	width: 600px;
	height: 150px;
	margin-top: 50px;
	margin-left: 100px;
	background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdff ), to( #bdbfbfff ) );
}

.AddLibraryItem Label
{
	color: gradient( linear, 0% 96%, 96% 100%, from( #f2f2f299 ), color-stop( 0.90, #f2f2f299 ), to( #97989800 ) );
	font-weight: bold;
}

.AddLibraryItem #AlbumImage,
.AddLibraryItem .GridItemBackground
{
	width: 150px;
	height: 150px;
	horizontal-align: left;
}

.AddLibraryItem #AlbumLabelWrapper
{
	margin-left: 150px;
	margin-top: 30px;
	visibility: visible;
}

.AddLibraryItem #AlbumLabelWrapper Label
{
	color: black;
}

.NoMusicAvailable #AlbumsFilter,
.NoMusicAvailable #ArtistsFilter,
{
	visibility: collapse;
}

.MusicAlbumGrid AlbumGridItem
{
	width: 220px;
	height: 220px;
	margin-bottom: 10px;
}

.AddLibraryItem #ArtistUpperLabel,
.AddLibraryItem #ArtistLowerLabel
{
	visibility: collapse;
}

.AddLibraryItem #PlaylistUpperLabel,
.AddLibraryItem #PlaylistLowerLabel
{
	visibility: collapse;
}

ArtistGridItem
{
	width: 600px;
	height: fit-children;
	pre-transform-scale2d: .94;

	margin-bottom: 10px;

	transition-property:  position, pre-transform-scale2d, transform, box-shadow;
	transition-duration: 0.23s;
	transition-delay: 0.0s;
	transition-timing-function: bigpicture-ease-in-out;
	
	box-shadow: box_shadow_off_color 0px 0px 16px 0px;

	padding: 5px;
}

.DragScrolling ArtistGridItem
{
	transition-duration: 0.0s, 0.23s;
}

.Flick ArtistGridItem
{
	transition-timing-fuction: DragScrollFlickTimingFunction, bigpicture-ease-in-out;
	transition-duration: DragScrollFlickTime, 0.23s;
}

ArtistGridItem:focus
{
	pre-transform-scale2d: 1.0;
	z-index: 5;
	transform: translateX( -7px );
	
	box-shadow: box_shadow_on_color 0px 0px 16px 0px;

	animation-name: main-button-glow-movement-no-fill;
	animation-duration: longduration;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

ArtistGridItem:hover
{
	pre-transform-scale2d: 1.0;
	z-index: 5;
	transform: translateX( 0px );
}

ArtistGridItem:focus:hover
{
	pre-transform-scale2d: 1.04;
	z-index: 5;
	transform: translateX( -7px );
}

ArtistGridItem Label
{
	height: fit-children;
	font-size: 26px;
	font-family: platformfont;
	font-weight: normal;
	color: applabel;
	opacity: 1.0;
	text-overflow: clip;
	white-space: nowrap;
	font-family: platformfont;
	z-index: 5;
}

ArtistGridItem:focus Label
{
	z-index: 6;
	color: applabelselected;	
}

#ArtistUpperLabel
{
	font-weight: bold;
	font-size: 30px;
	text-overflow: ellipsis;
}	

ArtistGridItem.HiddenByFilter
{
	visibility: collapse;
}
	
.Moving ArtistGridItem
{
	blur: gaussian( 5, 1 );
	opacity: 0.15;
	saturation: 0.3;
}

ArtistGridItem #AlbumLabelWrapper
{
	height: fit-children;
	width: 500px;
	margin: 5px;
	margin-left: 114px;
	flow-children: down;
	visibility: visible;
}

ArtistGridItem.NoCover #AlbumLabelWrapper
{
	visibility: visible;
}

#AddLibraryText
{
	visibility: collapse;
}

.AddLibraryItem #AddLibraryText
{
	visibility: visible;
	margin-top: 20px;
}

ArtistGridItem #ArtistUpperLabel
{
	color: white;
	font-size: 40px;
}

ArtistGridItem #ArtistLowerLabel
{
	color: white;
	font-size: 24px;
}

ArtistGridItem #AlbumImage
{
	width: 100px;
	height: 100px;
}

ArtistGridItem.AddLibraryItem #AlbumImage
{
	width: 150px;
	height: 150px;
}

PlaylistGridItem
{
	width: 600px;
	height: fit-children;
	pre-transform-scale2d: .94;

	margin-bottom: 10px;

	//transition-property: pre-transform-scale2d, position, transform, box-shadow;
	transition-property:  position;
	transition-duration: 0.23s;
	transition-delay: 0.0s;
	transition-timing-function: bigpicture-ease-in-out;
	
	box-shadow: box_shadow_off_color 0px 0px 16px 0px;

	padding: 5px;
}

PlaylistGridItem:focus
{
	pre-transform-scale2d: 1.0;
	z-index: 5;
	transform: translateX( -7px );
	
	box-shadow: box_shadow_on_color 0px 0px 16px 0px;

	animation-name: main-button-glow-movement-no-fill;
	animation-duration: longduration;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

PlaylistGridItem:hover
{
	pre-transform-scale2d: 1.0;
	z-index: 5;
	transform: translateX( 0px );
}

PlaylistGridItem:focus:hover
{
	pre-transform-scale2d: 1.04;
	z-index: 5;
	transform: translateX( -7px );
}

PlaylistGridItem Label
{
	height: fit-children;
	font-size: 26px;
	font-family: platformfont;
	font-weight: normal;
	color: applabel;
	opacity: 1.0;
	text-overflow: clip;
	white-space: nowrap;
	font-family: platformfont;
	z-index: 5;
}

PlaylistGridItem.HiddenByFilter
{
	visibility: collapse;
}
	
.Moving PlaylistGridItem
{
	blur: gaussian( 5, 1 );
	opacity: 0.15;
	saturation: 0.3;
}

PlaylistGridItem #AlbumLabelWrapper
{
	height: fit-children;
	width: 500px;
	margin: 5px;
	margin-left: 114px;
	flow-children: down;
	visibility: visible;
}

PlaylistGridItem.NoCover #AlbumLabelWrapper
{
	visibility: visible;
}

PlaylistGridItem #PlaylistUpperLabel
{
	color: white;
	font-size: 40px;
}

PlaylistGridItem #PlaylistLowerLabel
{
	color: white;
	font-size: 24px;
}

PlaylistGridItem #AlbumImage
{
	width: 100px;
	height: 100px;
}

PlaylistGridItem.AddLibraryItem #AlbumImage
{
	width: 150px;
	height: 150px;
}