/* styles for the browser by category section */

@define storetitlecolor: gradient( linear, 0% 0%, 0% 100%, from( #d2d2d2ff ), to( #979898 ) );
@define storelabel: gradient( linear, 0% 0%, 0% 100%, from( #d6d7d966 ), to( #d6d7d9aa ) );
@define storelabelfade: gradient( linear, 80% 0%, 100% 0%, from( #d6d7d9ff ), to( #d6d7d900 ) );


//
// Browse by category
//
StoreBrowseByCategory
{
}

StoreBrowseByCategory #Contents
{
	width: 100%;
	height: 100%;
	flow-children: down;
}

#LoadingError
{
	margin-top: 200px;
	width: 100%;
	text-align: center;
	font-size: 32px;
	color: applabel;

	opacity: 0.0;

	transition-property: opacity;
	transition-duration: 0.4s;
	transition-timing-function: linear;
}

.Error #LoadingError
{
	opacity: 1.0;
}

@keyframes 'throbber-appear-delay'
{
	from
	{
		opacity: 0.0;
	}

	50%
	{
		opacity: 0.0;
	}

	to
	{
		opacity: 1.0;
	}
}

.Throbber
{
	horizontal-align: center;
	margin-top: 160px;

	opacity: 0.0;
}

.Loading .Throbber
{
	opacity: 1.0;

	animation-name: throbber-appear-delay;
	animation-duration: 1.0s;
	animation-timing-function: bigpicture-ease-in-out;
}

#DetailsBackground
{
	width: 100%;
	height: 100%;
	box-shadow: #000000aa -2px -2px 4px 4px;
}

#BGOverlay
{
	width: 100%;
	height: 100%;
	background-color: none;
	background-image: url( "file://{images}/store/store_app_bg.png" );
	opacity-mask: url( "file://{images}/bg_gradient_mask.tga" ) 1.0;
	opacity: 1.0;
}

.TitleRow
{
	width: 100%;
	margin: 114px 106px 10px;
	flow-children: down;

	opacity: 0.0;

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

.FilterVisible .TitleRow
{
	margin: 44px 100px 10px;
}

.LoadedTabData .TitleRow
{
	opacity: 1.0;
}

#Filter
{
	visibility: collapse;
}

.FilterVisible .TitleRow #Filter
{
	horizontal-align: center;
	margin-bottom: 49px;
	visibility: visible;
}

#CategoryTitle
{
	/* explicitly set height so throbber position in layout doesn't change when text is set */
	height: 70px;

	font-size: 56px;
	line-height: 70px;
	white-space: nowrap;
	color: carousel_title;
	text-transform: uppercase;
	font-weight: light;
}

#Tabs
{
	/* explicitly set height so throbber position in layout doesn't change when text is set */
	height: 60px;

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

	opacity: 0.0;

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

.LoadedTabData #Tabs
{
	opacity: 1.0;
}

#Tabs Button
{

	height: 60px;
	padding: 0px;


	color: #ffffff77;
	box-shadow: fill #ffffff00 3px 16px 40px -32px;
	margin-left: 0px;

	padding-right: 30px;

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

//current selection
#Tabs Button.Focused
{



	transition-duration: 0.23s !immediate;
	color: #f2f2f2ff;

}

//focus
#Tabs Button:focus
{


	transition-duration: 0.23s !immediate;
	color: #ffffff77;
	
	background-image: url( "file://{images}/store/filterbg.png" );
	background-size: 100% 100%;
	background-position: left -12px top 2px;
	background-repeat: no-repeat;
}

#Tabs Button:hover
{


	transition-duration: 0.23s !immediate;
	color: #ffffff55;

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

#Tabs Button.Focused
{


	transition-duration: 0.23s !immediate;
	color: #ffffff77;

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

#Tabs Button.Focused:hover
{


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



#Tabs Button.Focused:active
{


	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;

}


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

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

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

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

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

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

#Items
{
	width: 100%;
	padding: 20px 2px;
	flow-children: right;
	pre-transform-scale2d: 1.0;
	saturation: 0.6;
	blur: gaussian( 0.5 );
	opacity: 0.0;

	transition-property: pre-transform-scale2d, transform, saturation, blur, opacity;
	transition-duration: 0.4s;
	transition-timing-function: bigpicture-ease-in-out;

}

.Loaded #Items
{
	opacity: 0.9;
}

.Loaded #Items:hover 
{
	transform: translatez( 15px ) translatex(0px );
	saturation: 1.0;
	blur: gaussian( 0.0 );
	opacity: 1.0;
}


#Items:descendantfocus
{
	transform: translatez( 0px ) translatex( 0px );
	saturation: 1.0;
	blur: gaussian( 0.0 );
	opacity: 1.0;
}


#Items:descendantfocus:hover
{

	transform: translatez( 0px ) translatex( 0px );
	saturation: 1.0;
	blur: gaussian( 0.0 );
	opacity: 1.0;
}

.LeftMouseScrollRegion, .RightMouseScrollRegion
{
	opacity: 0.0;
	width: 80px;
	height: 100%;
	transition-property: background-color, opacity, pre-transform-scale2d;
	transition-duration: 0.3s;
	transition-delay: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
}

.RightMouseScrollRegion
{
	position: 0px -80px 0px;
	background-color: mouse_off_bg_right;
}

.LeftMouseScrollRegion
{
	position: 0px -80px 0px;
	background-color: mouse_off_bg_left;
}

#Items .LeftMouseScrollRegion
{
	align: left center;
	background-image: url( "file://{images}/mouse/arrowLdefault.tga" );
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 80px 80px;
	background-color: mouse_off_bg_left;
	position: 0px -80px 0px;
	opacity: 0.0;
}

#Items .RightMouseScrollRegion
{
	align: right center;
	background-image: url( "file://{images}/mouse/arrowRdefault.tga" );
	background-position: center;
	background-repeat: no-repeat;
	background-size: 80px 80px;
	background-color: mouse_off_bg_right;
	position: 0px -80px 0px;
	opacity: 0.0;
}

StoreBrowseByCategory #Items .LeftMouseScrollRegion,
StoreBrowseByCategory #Items .RightMouseScrollRegion
{
	position: 0px -140px 0px;
}

#Items:descendantfocus:hover  .RightMouseScrollRegion
{
	background-color: mouse_hover_bg_right;

	opacity: 1.0;	
}

#Items:descendantfocus:hover  .LeftMouseScrollRegion
{
	background-color: mouse_hover_bg_left;

	opacity: 1.0;	
}

#Items:descendantfocus:hover  .RightMouseScrollRegion:hover
{
	background-color: mouse_active_bg_right;

	opacity: 1.0;	
}

#Items:descendantfocus:hover  .LeftMouseScrollRegion:hover
{
	background-color: mouse_active_bg_left;

	opacity: 1.0;	
}


//
// Browse by category item
//
StoreBrowseByCategoryItem
{
	pre-transform-scale2d: 0.80;
	width: 480px;
	height: 536px;
	flow-children: down;

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

#Items:descendantfocus StoreBrowseByCategoryItem.PreviouslyRight
{
	opacity-mask: url( "file://{images}/focus_shadow_right.png" ) 0.0;
}

#Items:descendantfocus StoreBrowseByCategoryItem.PreviouslyLeft
{
	opacity-mask: url( "file://{images}/focus_shadow_left2.png" ) 0.0;
}


#Items:descendantfocus StoreBrowseByCategoryItem.RightOfFocus1
{
	opacity-mask: url( "file://{images}/focus_shadow_right.png" ) 1.0;
}

#Items:descendantfocus StoreBrowseByCategoryItem.LeftOfFocus1
{
	opacity-mask: url( "file://{images}/focus_shadow_left2.png" ) 1.0;
}

StoreBrowseByCategoryItem.Focused:descendantfocus
{
	pre-transform-scale2d: 1.0;
}

#Items:descendantfocus StoreBrowseByCategoryItem:descendantfocus:hover
{
	pre-transform-scale2d: 1.03;
}

.HeaderImageWrapper
{
	width: 460px;
	height: 215px;
	pre-transform-scale2d: 1.0;
	z-index: 1;
	box-shadow: fill #00000044 -4.5px -4.5px 6px 9px;
	margin: 10px;

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


#Items:descendantfocus .HeaderImageWrapper:hover
{

	pre-transform-scale2d: 1.03;
}

StoreBrowseByCategoryItem:descendantfocus:hover .HeaderImageWrapper:hover
{
	pre-transform-scale2d: 1.0;
}



#Items:descendantfocus StoreBrowseByCategoryItem:descendantfocus .HeaderImageWrapper
{
	pre-transform-scale2d: 1.0;

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


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

	border: 0px solid transparent;

	transition-property: border;
	transition-duration: 0.4s;
	transition-timing-function: bigpicture-ease-in-out;
}

StoreBrowseByCategoryItem:descendantfocus .ImageBorder
{
	border-color: #fdfefef0;
}

#HeaderImage
{
	box-shadow: #00000066 -2px -2px 4px 4px;
	width: 460px;
	height: 215px;
	saturation: 0.6;
	wash-color: #00000022;
	transition-property: saturation, wash-color, box-shadow;
	transition-duration: 0.2s;
	transition-timing-function: bigpicture-ease-in-out;
}

StoreBrowseByCategoryItem:descendantfocus #HeaderImage
{
	pre-transform-scale2d: 1.0;
	saturation: 1.0;
	wash-color: #00000000;
}

.OnlyVisibleOnCarouselFocus
{
	opacity: 0.0;

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

StoreBrowseByCategoryItem:descendantfocus .OnlyVisibleOnCarouselFocus
{
	opacity: 1.0;
}

.PriceRow
{
	flow-children: right;
	margin-left: 10px;
	margin-top: 5px;
	width: 460px;
}

#ItemPrice
{
	horizontal-align: left;
}

StorePrice #BasePrice
{
	width: fit-children;
}

.ItemDetails
{
	flow-children: down;
	margin-top: 4px;
	margin-left: 10px;
}

#ItemName
{
	width: 460px;
	max-height: 140px;
	color: applabelsolid;
	font-size: 36px;
	padding-bottom: 2px;
	white-space: normal;
	font-family: platformfont;
	font-weight: bold;
}

.DetailsIconRow
{
	flow-children: right;
	vertical-align: center;
}

.ReleaseDateRow
{
	flow-children: right;
	margin-left: 10px;
	width: 460px;
}

#ReleaseDate
{
	margin-right: 4px;
	margin-top: 4px;
	color: storelabel;
	font-size: 21px;
	text-overflow: clip;
	height: 30px;
}

#GenreLabel
{
	margin-right: 4px;
	margin-top: 4px;
	color: storelabel;
	font-size: 21px;
	text-overflow: clip;
	height: 30px;
}

.GenreRow
{
	flow-children: right;
	width: 460px;
	margin-left: 10px;
}

.SecondaryLabel
{
	color: storelabel;
	font-size: 24px;
	text-overflow: clip;
}

.Metadata
{
	margin-left: 6px;
	margin-top: 4px;
	color: white;
	font-size: 21px;
	width: fill-parent-flow( 1.0 );
	text-overflow: ellipsis;
	white-space: normal;
}

#Genres.Metadata
{
	height: 100%;
	max-height: 30px;
}