/* styles for the store page */

// in seconds
@define genre_screenshot_switch_delay: 2.5;
@define category_screenshot_switch_delay: 2.5;
@define FeaturedCategoryFocusHeight: 215px;
@define FeaturedCategoryScale: 0.813793;
@define FeaturedCapsuleTextHeight: 32px;
@define FeaturedCapsuleTextPadding: 20px;

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

//
// Loading related
//

#LoadingFrontPageError
{
	max-width: 1300px;
	align: center top;
	margin-top: 490px;
	width: 100%;
	text-align: center;
	font-size: 32px;
	color: detailsdatalabel;

	opacity: 0.0;

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

.FrontPageError:descendantfocus #LoadingFrontPageError
{
	opacity: 1.0;
	transition-duration: 0.2s;
	transition-delay: 0.0s;
}

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

	50%
	{
		opacity: 0.0;
	}

	to
	{
		opacity: 1.0;
	}
}

.Throbber
{
	horizontal-align: center;
	margin-top: 350px;
	opacity: 0.0;
}

.Loading .Throbber,
.FrontPageLoading:descendantfocus .Throbber
{
	opacity: 1.0;

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

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

.LeftMouseScrollRegion, .RightMouseScrollRegion
{
	opacity: 0.0;
	width: 80px;
	height: 100%;
	z-index: 200;
	transition-property: background-color, opacity;
	transition-duration: 0.3s;
	transition-delay: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 80px 80px;
}

.LeftMouseScrollRegion 
{
	background-color: mouse_off_bg_left;
}

.RightMouseScrollRegion 
{
	background-color: mouse_off_bg_right;
}

Carousel:descendantfocus .LeftMouseScrollRegion
{

	background-image: url( "file://{images}/mouse/arrowLdefault.tga" );

	background-color: mouse_off_bg_left;
	opacity: 0.0;
}

Carousel:descendantfocus .RightMouseScrollRegion
{

	align: right center;
	
	background-image: url( "file://{images}/mouse/arrowRdefault.tga" );

	background-color: mouse_off_bg_right;
	opacity: 0.0;
}

#FrontPage:descendantfocus #FeaturedCapsules:hover .ActualStoreImage
{
	opacity-mask: url( "file://{images}/store/store_browse_bg.png" ) 0.6;
}

#FrontPage:descendantfocus #FeaturedCapsules:descendantfocus:hover .RightMouseScrollRegion
{
	position: -440px 0px 0px;
	background-color: mouse_hover_bg_right;
	opacity: 1.0;	
}

#FrontPage:descendantfocus #FeaturedCapsules:descendantfocus:hover .RightMouseScrollRegion:hover
{
	background-color: mouse_active_bg_right;
	opacity: 1.0;
}

#FrontPage:descendantfocus #FeaturedCapsules:descendantfocus:hover .LeftMouseScrollRegion
{
	position: 440px 0px 0px;
	background-color: mouse_hover_bg_left;
	opacity: 1.0;
}

#FrontPage:descendantfocus #FeaturedCapsules:descendantfocus:hover .LeftMouseScrollRegion:hover
{
	background-color: mouse_active_bg_left;
	opacity: 1.0;
}

#FrontPage:descendantfocus #Categories:descendantfocus:hover .RightMouseScrollRegion
{
	position: 0px 0px 0px;
	background-color: mouse_hover_bg_right;
	opacity: 1.0;	
}

#FrontPage:descendantfocus #Categories:descendantfocus:hover .RightMouseScrollRegion:hover
{
	background-color: mouse_active_bg_right;
	opacity: 1.0;
}

#FrontPage:descendantfocus #Categories:descendantfocus:hover .LeftMouseScrollRegion
{
	position: 0px 0px 0px;
	background-color: mouse_hover_bg_left;
	opacity: 1.0;
}

#FrontPage:descendantfocus #Categories:descendantfocus:hover .LeftMouseScrollRegion:hover
{
	background-color: mouse_active_bg_left;
	opacity: 1.0;
}

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


.LeftMouseScrollRegion, .RightMouseScrollRegion
{
	opacity: 0.0;
	transition-property: opacity, background-color;
	transition-duration: mediumduration;
	transition-delay: 0.2s;
	transition-timing-function: bigpicture-ease-in-out;
}

Grid.CursorVisible:descendantfocus:hover .LeftMouseScrollRegion

{
	width: 80px;
	height: 100%;
	background-image: url( "file://{images}/mouse/arrowLdefault.tga" );
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 80px 80px;
	z-index: 200;
	opacity: 1.0;
	transition-delay: 0.2s;
	background-color: mouse_hover_bg_left;
}

Grid.CursorVisible:descendantfocus:hover .RightMouseScrollRegion,
#GenreGrid.CursorVisible:descendantfocus:hover  .RightMouseScrollRegion,
{
	width: 80px;
	height: 100%;
	align: right center;
	background-image: url( "file://{images}/mouse/arrowRdefault.tga" );
	background-position: center;
	background-repeat: no-repeat;
	background-size: 80px 80px;
	z-index: 200;
	opacity: 1.0;
	transition-delay: 0.2s;
	transition-duration: 0.2s;
	background-color: mouse_hover_bg_right;
}

#GenreGrid.CursorVisible:descendantfocus:hover  .RightMouseScrollRegion:hover,
{
		background-color: mouse_active_bg_right;
}

Grid.CursorVisible:descendantfocus:hover  .LeftMouseScrollRegion:hover, Grid.CursorVisible:descendantfocus:hover  .LeftMouseScrollRegion:active
{
	background-color: mouse_active_bg_left;
}

Grid.CursorVisible:descendantfocus:hover .RightMouseScrollRegion:hover, Grid.CursorVisible:descendantfocus:hover .RightMouseScrollRegion:active
{
	background-color: mouse_active_bg_right;
}

#FeaturedCapsules
{
	width: 2800px;
	height: 100%;
	pre-transform-scale2d: 1.0;

	// make sure this is rendered after FeaturedPlatform
	z-index: 1;

	transition-property: position, transform, opacity, opacity-mask, pre-transform-scale2d, blur, wash-color, saturation;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
	overflow: noclip noclip;

	animation-name: store-perspective;
	animation-duration: 20s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}


.WebBrowserActive #FeaturedCapsules
{
	perspective-origin: 50% 50%;
	padding-bottom: 0px;
	animation-name: none;
	transform: translate3d(-340px, -435px, -450px);
	flow-children: right;
	blur: gaussian (2.0);

	saturation: 0.0;
	wash-color: bgcolorwash;
	opacity: 0.5;
}

#FrontPage:descendantfocus #FeaturedCapsules
{
	transform: translate3d(-340px, -190px, -440px);
	saturation: 0.5;
	wash-color: bgcolorwashlight;
	opacity: 0.9;
	blur: gaussian (1.0);
	pre-transform-scale2d: 1.0;
}

#FrontPage:descendantfocus #FeaturedCapsules:hover
{
	pre-transform-scale2d: 1.02;
}

#StoreFilter
{
	visibility: collapse;
}

.FilterVisible #FilteredStoreWrapper:descendantfocus #StoreFilter
{
	vertical-align: top;
	horizontal-align: center;
	margin-top: 170px;
	visibility: visible;
}

.FrontPageLoading #StoreFilter
{
	visibility: collapse;
}

#FilteredStoreWrapper:descendantfocus #FeaturedCapsules
{
	animation-name: none;
	transform: translate3d(-440px, 60px, 0px);
	saturation: 1.0;
	wash-color: #61e2ff00;
	opacity: 1.0;
	blur: none;
}

.FilterVisible #FilteredStoreWrapper:descendantfocus #FeaturedCapsules
{
	transform: translate3d(-440px, 100px, -50px);
}

.FilterVisible #FrontPage:descendantfocus #FilteredStoreWrapper:descendantfocus #FeaturedCapsules:descendantfocus
{
	transform: translate3d(-440px, 90px, 0px);
}

#FrontPage:descendantfocus #FeaturedCapsules:descendantfocus:hover
{
	pre-transform-scale2d: 1.00;

}

#FeaturedCapsules:descendantfocus .StoreImage
{
	pre-transform-scale2d: 1.0;
}

#FeaturedCapsules:descendantfocus .StoreImage:hover
{
	pre-transform-scale2d: 1.03;
	transition-delay: 0.0s;
	transition-duration: 0.4s;
}

#FeaturedCapsules:descendantfocus .StoreImage:descendantfocus:hover
{
	pre-transform-scale2d: 1.03;
	transition-delay: 0.0s;
	transition-duration: 0.4s;
}

.ActualStoreImage
{
	width: 616px;
	margin: 15px;
	height: 353px;
	border-color: transparent;
	box-shadow: fill #00000033 -3px -3px 6px 6px;
	wash-color: store_dark_wash;

	transition-property: wash-color, opacity-mask, box-shadow;
	transition-delay: 0.0s;
	transition-duration: 0.2s;

}

#FeaturedCapsules:descendantfocus .ActualStoreImage
{
	border-color: #fdfefe00;
	saturation: 0.8;
	transition-property: box-shadow, saturation, wash-color;
	transition-duration: 0.2s;

	animation-duration: 1.7s;
	animation-delay: 0.2s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
	wash-color: #00000039;
	box-shadow: fill #00000044 -3px -3px 6px 6px;
}

#FeaturedCapsules:descendantfocus .ActualStoreImage:hover
{
	
	wash-color: #00000000;
}


#FeaturedCapsules:descendantfocus .ActualStoreImage:focus
{

	saturation: 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;
	wash-color: #00000000;

	background-image: url( "file://{images}/store/shadow.png" );
	background-size: 400px 125px;
	background-repeat: no-repeat;
}

#PlatformSupport
{
	margin: 15px;
	padding-left: 30px;
	padding-right: 5px;
	padding-top: 30px;
	width: fit-children;
	height: 80px;

	flow-children: right;
	vertical-align: bottom;
	horizontal-align: right;
	opacity: 0.0;

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

	background-image: url( "file://{images}/store/shadow.png" );
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

#FeaturedCapsules:descendantfocus .StoreImage.Focused #PlatformSupport
{
	opacity: 1.0;
}

#FeaturedCapsules .StoreImage.Focused #PlatformSupport
{
	opacity: 0.0;
}


#ImageAndIcons
{
	opacity: 1.0;
}


.CapsuleControllerSupport, .MacSupport, .WindowsSupport, .SteamOSSupport, .StreamingVideoSupport
{
	width: 50px;
	height: 50px;
	horizontal-align: left;
	vertical-align: center;

	visibility: collapse;

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


//.CapsuleControllerSupportContainer:descendantfocus .CapsuleControllerSupport .MacSupport .WindowsSupport .SteamOSSupport
//{
//	visibility: visible;
//}


.CapsuleControllerSupportContainer.MacAvailable .MacSupport
{
	visibility: visible;
	background-image: url( "file://{images}/store/icon_mac_storefront.png" );
	background-size: contain;
	background-repeat: no-repeat;
}


.CapsuleControllerSupportContainer.SteamOSAvailable .SteamOSSupport
{
	visibility: visible;
	background-image: url( "file://{images}/store/icon_steamos_storefront.png" );
	background-size: contain;
	background-repeat: no-repeat;
}


.CapsuleControllerSupportContainer.WindowsAvailable .WindowsSupport
{
	visibility: visible;
	background-image: url( "file://{images}/store/icon_windows_storefront.png" );
	background-size: contain;
	background-repeat: no-repeat;
	horizontal-align: right;
	vertical-align: center;
}


.CapsuleControllerSupportContainer.StreamingVideoAvailable .StreamingVideoSupport
{
	visibility: visible;
	background-image: url( "file://{images}/store/icon_streamingvideo_storefront.png" );
	background-size: contain;
	background-repeat: no-repeat;
	horizontal-align: right;
	vertical-align: center;
}


.CapsuleControllerSupportContainer .CapsuleControllerSupport
{
	width: 50px;
	height: 50px;
	margin-left: 8px;
	margin-right: 4px;
	
	vertical-align: center;
	visibility: visible;
	background-image: url( "file://{images}/store/icon_keyboard_storefront.png" );
	//background-size: 50px 50px;
	background-repeat: no-repeat;
}

.DetailsIconRow .CapsuleControllerSupport
{
	margin-top: -3px;
}

.CapsuleControllerSupportContainer.FullController .CapsuleControllerSupport
{
	width: 45px;
	height: 45px;


	vertical-align: center;
	visibility: visible;
	background-image: url( "file://{images}/store/icon_fullcontroller_storefront.png" );
	background-size: contain;
	background-repeat: no-repeat;
}

.SteamPad .CapsuleControllerSupportContainer.FullController .CapsuleControllerSupport
{
	width: 45px;
	height: 45px;

	margin-left: 3px;
	margin-top: 2px;
	vertical-align: center;
	visibility: visible;
	background-image: url( "file://{images}/store/icon_steamcontroller_storefront.png" );
	background-size: contain;
	background-repeat: no-repeat;
}


//.CapsuleControllerSupportContainer.PartialController .CapsuleControllerSupport
//{
//	width: 50px;
//	height: 50px;

//	visibility: collapse;

//	background-image: url( "file://{images}/store/icon_partialcontroller_storefront.png" );
//	background-size: contain;
//	background-repeat: no-repeat;
//}

.SteamPad .CapsuleControllerSupportContainer.PartialController .CapsuleControllerSupport
{
	width: 45px;
	height: 45px;

	visibility: visible;

	background-image: url( "file://{images}/store/icon_legacycontroller_storefront.png" );
	background-size: contain;
	background-repeat: no-repeat;
}


.SteamPad .CapsuleControllerSupportContainer.PartialController:descendantfocus .CapsuleControllerSupport, 
.SteamPad .CapsuleControllerSupportContainer.FullController:descendantfocus .CapsuleControllerSupport,
{
	visibility: visible;
}

.SteamPad .CapsuleControllerSupportContainer .CapsuleControllerSupport
{
	width: 45px;
	height: 45px;
	visibility: visible;
	margin-left: 2px;
	margin-top: -2px;

	background-image: url( "file://{images}/store/icon_legacycontroller_storefront.png" );
	background-size: contain;
	background-repeat: no-repeat;
}

#FeaturedCapsules #StoreImageDiscount
{
	visibility: collapse;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #88c03d ), to( #4d6e23 ) );
	color: white;
	box-shadow: #00000099 -3px -3px 6px 6px;

	padding: 4px 0px 4px 0px;
	width: 318px;
	font-family: platformfont;
	font-size: 30px;
	font-weight: light;
	text-align: center;

	transform-origin: 0% 0% parent-relative;
	transform: rotatez( -45deg ) translatex( -75px ) translatey( 145px );

	opacity: 0.0;

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

#FeaturedCapsules .StoreImage:descendantfocus #StoreImageDiscount
{
	opacity: 1.0;
}

#FrontPage:descendantfocus #FeaturedCapsules .ActualStoreImage
{
	opacity-mask: url( "file://{images}/store/store_browse_bg.png" ) 1.0;
	blur: none;
	saturation: 1.0;
}

#FrontPage:descendantfocus #FeaturedCapsules:descendantfocus .ActualStoreImage
{
	opacity-mask: url( "file://{images}/store/store_browse_bg.png" ) 0.0;
	blur: none;
	saturation: 1.0;
}


.FilterVisible #FilteredStoreWrapper:descendantfocus #FeaturedCapsules .ActualStoreImage
{
	opacity-mask: url( "file://{images}/store/store_browse_bg.png" ) 0.0;
	blur: gaussian (0.7);
	saturation: 0.5;
}


.FilterVisible #FilteredStoreWrapper:descendantfocus #FeaturedCapsules:descendantfocus .ActualStoreImage
{
	opacity-mask: url( "file://{images}/store/store_browse_bg.png" ) 0.0;
	blur: none;
	saturation: 1.0;
}

.WebBrowserActive .StoreImage,
{
	pre-transform-scale2d: 1.0;
	margin: -4px -8px;
	padding: 4px 8px;	
	transform: translateY( 0px );

	box-shadow: fill box_shadow_off_color 20px 20px 40px -44px;
	saturation: 1.0;
	transform: none;
	opacity: 1.0;
	wash-color: transparent;

	border-width: 5px;
	border-style: solid;
	border-color: transparent;
	blur: none;
}


#FeaturedPlatform
{
	width: 100%;
	height: 100%;

	// should be behind FeaturedCapsules
	z-index: 0;

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

	animation-name: store-perspective;
	animation-duration: 20s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}


.FrontPageFeaturedApp
{
	width: 382px;
	height: 219px;
	margin: 8px;
	vertical-align: center;

	border-width: 5px;
	border-style: solid;
	border-color: transparent;

	transition-property: width, height, position, transform !immediate;
	transition-duration: 0.5s, 0.5s, 0.5s;
}

#Featured:descendantfocus .FrontPageFeaturedApp
{
	width: 492px; 
	height: 282px;
}

#Featured:descendantfocus .FrontPageFeaturedApp:focus
{
	border-color: #ff0000ff;
}

// Price related
.FeaturedImageInfo
{
	opacity: 0.0;
	flow-children: right;
	width: 621px;
	height: 68px;
	margin: 0px 10px;
	margin-right: 0px;

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

.FeaturedImageInfo #FeaturedPrice
{
	padding-top: 3px;
}

.StoreImage:descendantfocus .FeaturedImageInfo
{
	opacity: 1.0;
}

#FeaturedImageHeadline
{
	font-size: 28px;
	color: applabel;
	font-weight: bold;
	width: fill-parent-flow( 1.0 );
	white-space: nowrap;
	margin-right: 8px;
	text-overflow: clip;
}

#StorePriceArea
{
	flow-children: right;
	horizontal-align: right;
}


//
// Front page categories
//
#Categories
{
	margin-top: 0px;
	flow-children: right;
	position: 0px 500px 0px;
	pre-transform-scale2d: 1.0;
	background-image: url( "file://{images}/carousel_bg.png");
	background-size: 1920px 400px;
	background-repeat: no-repeat;
	background-position: center;

	opacity: 1.0;

	transition-property: transform, pre-transform-scale2d, opacity;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
	transform: translateY( 50% ) translateZ( -100px );
}

.FrontPageLoaded #Categories
{
	opacity: 0.0;
}

#FrontPage:descendantfocus #Categories
{
	transform: translateY( 0px );
	opacity: 1.0;
}

#FrontPage:descendantfocus #Categories 
{
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
	transition-property: transform, opacity-mask, box-shadow, position, pre-transform-scale2d;

	opacity-mask: url( "file://{images}/lower_row_mask.tga" ) 0.65;
}

#FrontPage:descendantfocus #Categories:hover 
{
	opacity-mask: url( "file://{images}/lower_row_mask.tga" ) 0.3;	
}

#FrontPage:descendantfocus  #Categories:descendantfocus 
{
	opacity: 1.0;
	opacity-mask: url( "file://{images}/lower_row_mask.tga" ) 0.0;
}

#FrontPage #Categories:descendantfocus 
{
		pre-transform-scale2d: 1.0;
}

#FrontPage:descendantfocus #Categories:descendantfocus
{
	transform: translatey(-140px);
	opacity-mask: url( "file://{images}/lower_row_mask.tga" ) 0.0;
}

#FrontPage:descendantfocus #Categories:hover
{
		pre-transform-scale2d: 1.02;
		transform: translatey(0px);
}

#FrontPage:descendantfocus #Categories:descendantfocus:hover
{
	pre-transform-scale2d: 1.00;
	transform: translatey(-140px);
}


//
// Stack styles
//
.Stackable
{
	width: 100%;
	height: 948px;
	vertical-align: bottom;

	// transitions
	transform: translate3d( 0px, 1280px, 1000px );
	opacity: 0.0;
	saturation: 0.0;

	transition-property: transform, opacity, saturation;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.Stackable.InStoreStack
{
	transform: translate3d( 0px, -60px, 0px );
	opacity: 1.0;
	saturation: 1.0;
}

.Stackable:descendantfocus,
.WebBrowserActive .Stackable
{
	transform: translate3d( 0px, 0px, 0px );
	opacity: 1.0;
	saturation: 1.0;
	box-shadow: #000000aa -2px -2px 4px 4px;
}


//
// StorePrice styles
//
StorePrice
{
	flow-children: right;
	horizontal-align: left;
	font-size: 24px;
	padding-bottom: 2px;
	padding-left: 2px;
	margin-bottom: 2px;
	height: 32px;
}

#PurchaseBtn StorePrice,
#PurchaseOptionsBtn StorePrice
{
	horizontal-align: right;
	padding-top: 2px;
	padding-bottom: 0px;
}

#PurchaseOptionsBtn StorePrice
{
	padding-bottom: 0px;
	padding-top: 2px;
}

Button:focus StorePrice
{
		transform: translateX(0px);
}

StorePrice #DiscountPercent
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #537e3c ), to( #689b46 ) );
	color: white;
	padding: 1px 6px;
	margin-right: 4px;
}

StorePrice #BasePrice
{
	color: #52636dFF;
	text-decoration: line-through;
	width: 0px;
	margin-right: 4px;
	margin-top: 7px;
	font-size: 24px;
	visibility: collapse;
}

#PurchaseBtn StorePrice #BasePrice,
#PurchaseOptionsBtn StorePrice #BasePrice,
#PackagePrice #BasePrice
{
	visibility: collapse;
	width: 0px;

}

CartLineItem #BasePrice,
{
	margin-top: 0px;
	width: fit-children;
}


CartLineItem:descendantfocus #FinalPrice
{
	color: applabelselectedsolid;
}

StorePrice #FinalPrice
{
	color: #c6c6c6ff;
}

Button:focus StorePrice #FinalPrice
{
	color: applabelselectedsolid;
}


//
// Countdown Timer
//
CountdownTimer
{
	background-color: #117c9f;
	color: #a3b8c9;
	font-size: 24px;
	width: 120px;
	padding-left: 8px;
}

CountdownTimer.ExtendedHours
{
	width: 136px;
}

#FeaturedCapsules CountdownTimer
{
	margin-left: 6px;
	margin-top: 3px;
}


//
// Slideshow
//
StoreSlideshow
{
	width: 1920px;
	height: 1080px;
}

StoreSlideshow #Contents
{
	width: 100%;
	height: 100%;
}

.SlideshowPanel
{
	width: 100%;
	height: 100%;
	transform: translatex( 0px );

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

.SlideshowPanel.SlideShowLeftOfFocus
{
	transform: translatex( -1920px );
}

.SlideshowPanel.SlideShowRightOfFocus
{
	transform: translatex( 1920px );
}

StoreSlideshowImage Image
{
	width: 100%;
	height: 100%;
}

StoreSlideshowImage #PlaybackTitleAndControls
{
	z-index: 1000;
}

StoreSlideshow:hover .RightMouseScrollRegion
{
	position: 0px 0px 0px;
	align: right center;
	background-image: url( "file://{images}/mouse/arrowRdefault.tga" );
	opacity: 1.0;
}

StoreSlideshow:hover .RightMouseScrollRegion:hover
{
	background-color: mouse_active_bg_right;
	opacity: 1.0;
}

StoreSlideshow:hover .LeftMouseScrollRegion
{
	position: 0px 0px 0px;
	align: left center;
	background-image: url( "file://{images}/mouse/arrowLdefault.tga" );
	opacity: 1.0;
}

StoreSlideshow:hover .LeftMouseScrollRegion:hover
{
	background-color: mouse_active_bg_left;
	opacity: 1.0;
}

StoreSlideshow:hover .LeftMouseScrollRegion.Disabled
{
	opacity: 0.0;
}

StoreSlideshow:hover .RightMouseScrollRegion.Disabled
{
	opacity: 0.0;
}



//
// Genres
//
#BGOverlay
{
	width: 100%;
	height: 100%;
	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
{
	padding: 10px 104px;
	padding-top: 56px;
	width: 100%;
	flow-children: right;
}

#GenreTitle
{
	font-size: 56px;
	line-height: 70px;
	margin-top: -32px;
	white-space: nowrap;
	color: carousel_title;
	text-transform: uppercase;
	font-weight: light;
}

#GenreGrid
{
	width: 100%;
	height: 700px;
	margin-top: 115px;
	padding: 10px 225px 10px 105px;
}


//
// StoreTrailerSlideshow
//
StoreTrailerSlideshow.Stackable
{
	width: 100%;
	height: 100%;
}

#Loading
{
	width: 100%;
	height: 100%;
	background-image: url( "file://{images}/store/store_app_bg.png" );
	background-repeat: no-repeat;
	background-size: 100% 100%;

	opacity: 1.0;

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

#Loading #LoadingStatus
{
	align: center top;
	margin-top: 300px;
	width: 100%;
	text-align: center;

	font-size: 32px;
}

#Loaded
{
	width: 100%;
	height: 100%;

	opacity: 0.0;

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

StoreTrailerSlideshow.Loaded #Loaded
{
	opacity: 1.0;
	transition-duration: 0.0s;
}

StoreTrailerSlideshow.Loaded #Loading
{
	opacity: 0.0;
	transition-duration: 0.0s;
}

.DiscountPanel
{
	transform: translateX( 15px ) translateY( 15px );
	height: 145px;
	width: 305px;
}

#FrontPage:descendantfocus #FeaturedCapsules:descendantfocus .StoreImage.PreviouslyRight
{
	opacity-mask: url( "file://{images}/focus_shadow_right2.png" ) 0.0;
}

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

#FrontPage:descendantfocus #FeaturedCapsules:descendantfocus .StoreImage.RightOfFocus1
{
	opacity-mask: url( "file://{images}/focus_shadow_right2.png" ) 1.0;
}

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