/* styles for the application page on the store */

// this style is pretty close to the main menu button color.. combine?
//@define storetitlecolor: gradient( linear, 0% 0%, 0% 100%, from( #cfd0d0 ), to( #979898 ) );
@define storetitlecolor: gradient( linear, 0% 0%, 0% 100%, from( #d2d2d2ff ), to( #979898 ) );
@define storeoverviewcolor: #ffffff66;
@define AppSectionTransitionDuration: 0.25s;
@define SlideshowFocusTransitionDuration: 0.3s;
@define notelabel: #bbbbbbff;
@define noteiconwash: #bbbbbbff;
@define noteiconwashheader: #f2f2f2ef;

// values below should cancel eachother
@define PreviewImageBorder: 5px;
@define PreviewImagePadding: -5px;

@define action_module: gradient( linear, 0% 0%, 100% 100%, from( #205a7e ), to( #22648a ) );



@keyframes 'links-and-more-button-focus'
{
	from
	{
		background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdee ), to( #adafafe0 ) ); 
	}

	50%
	{
		background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdff ), to( #bdbfbfff ) ); 
	}

	to
	{
		background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdee ), to( #adafafe0 ) ); 
	}
}


//
// Panel styles
//
StoreApp.Stackable
{
	color: applabel;
	height: 1080px;
}

StoreApp:descendantfocus
{
	box-shadow: none;
}

.StoreAppContents
{
	height: 948px;
	width: 100%;
	vertical-align: bottom;
}

.BehindMessageBox #ImageCarousel
{
	opacity: 0.6;
	saturation: 0.7;
	wash-color: bgcolorwashmedium;
}
	
.BehindMessageBox #AppSections
{
	saturation: 0.5;
	wash-color: bgcolorwashlight;
}

//
// Background
//
#ScreenshotBG
{
	width: 100%;
	height: 100%;
}

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

#BGScreenshot
{
	width: 100%;
	height: 100%;
	saturation: 0.0;
	wash-color: store_details_wash;
	opacity-mask: url( "file://{images}/store/store_app_bg_mask.png" );

	opacity: 0.0;
	transition-property: opacity;
	transition-duration: 0.4s;
}

#BGScreenshot.BGScreenshotVisible
{
	opacity: 1.0;

	animation-name: bg-screenshot-ambient;
	animation-duration: 10s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

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

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

@keyframes 'bg-screenshot-ambient'
{
	from
	{
		transform: translatez( 2px );
		animation-timing-function: linear;
	}

	10%	
	{
		transform: translatez( 2px );
		animation-timing-function: bigpicture-ease-in-out;
	}

	88%
	{
		transform: translatez( 115px );
	}

	to
	{
		transform: translatez( 115px );
	}
}


//
// Loading Section
//
#Loading
{
	width: 100%;
	height: 100%;
	opacity: 1.0;

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

#Loading #LoadingStatus
{
	max-width: 1300px;
	align: center top;
	margin-top: 300px;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 32px;
	color: applabelsolid;

	opacity: 0.0;

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

.Error #Loading #LoadingStatus
{
	opacity: 1.0;
}


StoreApp.Loaded #Loading, StorePackage.Loaded #Loading
{
	opacity: 0.0;
	transition-duration: 0.0s;
}

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

.Loading LoadingThrobber
{
	opacity: 1.0;

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

LoadingThrobber .Bar
{
	height: 120px;
	width: 14px;
	margin-right: 8px;
}

//
// Loaded Section
//
#Loaded
{
	opacity: 0.0;
	width: 100%;
	height: 100%;

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

StoreApp.Loaded #Loaded, StorePackage.Loaded #Loaded, StoreAppPurchaseOptions.Loaded #Loaded, StoreAppDLC.Loaded #Loaded
{
	opacity: 1.0;
	transition-duration: 0.0s;
}


//
// Top row of page & contents
//
#TitleRow
{
	padding: 0px 104px;
	padding-top: 24px;
	width: 100%;
	flow-children: right;
}

.TitleSection
{
	flow-children: down;
	width: fill-parent-flow( 1.0 );
	padding-top: 0px;
}

.AppTitle
{
	font-size: 56px;
	line-height: 70px;
	white-space: nowrap;
	width: 1800px;
	color: applabel;
	font-weight: bold;
	text-overflow: clip;
}

#AppAvailability
{
	font-size: 24px;
	color: tcstatictext;
	opacity: 1.0;
	vertical-align: center;
}

//
// Highlighted friend recommendation
//
#HighlightedRecommendationSection
{
	margin: 14px;
	margin-top: 0px;
	vertical-align: top;

	flow-children: right;
	horizontal-align: right;
	pre-transform-scale2d: 1.0;

	transition-property: color, background-color, pre-transform-scale2d;
	transition-delay: 0s;
	transition-duration: 0.2s;
}


#FriendRecommendAvatar
{
	border-radius: 0px;
	box-shadow: fill #00000044 0px 0px 18px 0px;



	height: 86px;
	width: 86px;
	margin: 12px;
	margin-top: 0px;
	margin-right: 0px;
}

#FriendRecommendationText
{
	color: #ffffff99;
	font-size: 24px;
	font-style: italic;
	width: 660px;
	height: 86px;

	padding-top: 12px;
	margin: 12px;
	margin-left: 0px;
	margin-top: 0px;
	padding-left: 12px;
	padding-right: 8px;

	background-color: store_bubble;
	box-shadow: #00000033 -2px -2px 4px 4px;

	border-radius: 5px;
	transition-duration: 0.2s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0.0s;
	transition-property: box-shadow, color;

}

#FriendRecommendBubble
{
	background-image: url( "file://{images}/store/recommend_bubble.png" );
	opacity: 1.0;
	wash-color: store_bubble;
	width: 24px;
	height: 24px;
	margin-left: 4px;
	margin-top: 44px;
	margin-right: 0px;
}


//
// Carousel for movies & screenshots (2nd row)
//
#ImageCarousel
{
	width: 2600px;
	height: 480px;
	position: 0px 98px 0px;

	overflow: noclip clip;
	flow-children: right;

	pre-transform-scale2d: 1.0;
	wash-color: #00000022;
	saturation: 0.8;
	opacity: 0.9;
	//opacity-mask: url( "file://{images}/focus_shadow_top.png" ) 1.0;

	transition-property: position, pre-transform-scale2d, saturation, wash-color, opacity, opacity-mask;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;

}

#ImageCarousel:hover
{
	pre-transform-scale2d: 1.02;
	saturation: 1.0;
	wash-color: none;
	opacity: 1.0;
}

#ImageCarousel:descendantfocus
{
	pre-transform-scale2d: 1.00;
	wash-color: white;
	saturation: 1.0;
	opacity: 1.0;
	position: 0px 125px 0px;
	//opacity-mask: url( "file://{images}/store/store_browse_bg.png" ) 0.0;
}

#ImageCarousel:descendantfocus:hover
{
	pre-transform-scale2d: 1.00;
	wash-color: white;
	saturation: 1.0;
}


.PreviewImage
{
	width: 800px;
	height: 450px;
	box-shadow: fill #00000044 0px 0px 2px 2px;
	vertical-align: center;
	background-color: black;

	wash-color: #00000033;
	blur: gaussian(0.5);
	saturation: 0.6;
	pre-transform-scale2d: 0.57, 0.57;
	transform: translate3d( -172px, -76px, 0px );

	transition-property: position, pre-transform-scale2d, saturation, border, wash-color, blur, transform;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

#ImageCarousel:descendantfocus .PreviewImage.LeftOfFocus1
{
	transform: translatex(-23px);
}

#ImageCarousel:descendantfocus .PreviewImage
{
	pre-transform-scale2d: 0.72, 0.72;
	transform: translatey( -0px );

	box-shadow: #00000044 -4px -4px 8px 8px;
	wash-color: #00000022;
	blur: gaussian (0.0);
	saturation: 0.8;
}

#ImageCarousel:descendantfocus .PreviewImage:descendantfocus
{
	pre-transform-scale2d: 1.0, 1.0;
	saturation: 1.0;
	wash-color: #00000000;
	animation-name: main-button-glow-movement;
	animation-duration: 1.7s;
	animation-delay: 0.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

#ImageCarousel:descendantfocus .PreviewImage:hover
{
	pre-transform-scale2d: 0.74, 0.74;

}

#ImageCarousel:descendantfocus .PreviewImage:descendantfocus:hover
{
	pre-transform-scale2d: 1.0, 1.0;
}


//
// App infromation sections (3rd row)
//
#AppSections
{
	width: 100%;
	height: 650px;
	padding: 0px;
	padding-left: 0px;
	flow-children: right;
	pre-transform-scale2d: 1.0;
	position: 0px 620px 0px;

	transition-property: position, pre-transform-scale2d;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

#AppSections:hover
{
	pre-transform-scale2d: 1.02;
	position: 0px 628px 0px;
}

#AppSections:descendantfocus
{
	position: 0px 170px 0px;
	pre-transform-scale2d: 1.00;
}

#AppSections:descendantfocus:hover
{
	position: 0px 170px 0px;
	pre-transform-scale2d: 1.00;
}

//
// App section button styles
//
Button
{
	width: 100%;
	margin: 4px 22px;
	padding: 8px 7px 8px 7px;
	box-shadow: none;
	color: detailsdatalabelfocus;
	background-color: none;
	border-style: solid;
	border-width: 5px;
	border-color: none;

	transition-property: border, background-color, color, box-shadow, transform;
	transition-timing-function: bigpicture-ease-in-out;
}

Button Label
{
	vertical-align: center;
	font-family: platformfont;
	font-size: 28px;
	font-weight: normal;
	transform: translatex(-7px);
	color: detailsdatalabelfocus;
	transition-property: transform;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
}

Button:focus Label
{
	color: applabelselectedsolid;
	transform: translatex(0px);
}	

Button:hover
{
	transition-duration: 0.23s !immediate;
	box-shadow: #eeeeee60 -3px -3px 6px 6px;
}

Button:hover Label
{
	transform: translatex(0px);
}

Button:focus
{
	transition-duration: 0.4s !immediate;

	color: #161718f5;
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #fdfdfdee ), to( #adafafe0 ) );
	border-width: 5px;
	border-style: solid;
	border-color: #fdfefef0;

	animation-name: links-and-more-button-focus;
	animation-duration: 1.7s;
	animation-delay: 0.4s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

.AgeButton
{
	height: 50px;
	padding: 5px;
	padding-left: 8px;
	padding-right: 8px;
	border-width: 0px;
}

//
// Generic app section styles
// Sections when minimized should be 320x148. Sizes differ when expanded
//
.AppSection
{
	width: 320px;
	height: 148px;
	padding: 0px;
	overflow: clip clip;
	box-shadow: fill box_shadow_off_color 0px 0px 0px 0px;

	background-color: transparent_module;

	pre-transform-scale2d: 1.0, 1.0;

	transition-property: position, pre-transform-scale2d, transform, border;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.AppSection:descendantfocus, .AppSection:focus
{
	background-color: action_module;
	box-shadow: fill box_shadow_off_color 0px 0px 0px 0px;

	pre-transform-scale2d: 1.0, 1.0;

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

.AppSection .AppSectionWrapper:descendantfocus
{
	pre-transform-scale2d: 1.0, 1.0;
	transform: translate3d( 0px, 0px, 0px );
}

.AppSection .HeaderLabel
{
	font-family: platformfont;
	font-size: 38px;
	color: detailsdatalabel;
	margin: 20px 20px 8px 20px;
	font-weight: light;

	pre-transform-scale2d: 1.0, 1.0;

	transition-property: transform, pre-transform-scale2d;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
}

.AppSection:descendantfocus .HeaderLabel
{
	pre-transform-scale2d: 1.0, 1.0;
	transform: translatex( 0px );
}

.AppSectionOverviewLabel
{
	color: storeoverviewcolor;
	font-size: 28px;
	margin-top: 4px;
}

#NoteSection .AppSectionOverviewLabel
{
	color: applabelsolid;
	opacity: 0.6;
	font-size: 21px;
	margin-top: 4px;
}

.AppSection:descendantfocus .AppSectionBody
{
	pre-transform-scale2d: 1.0, 1.0;
	transform: translatex( 0px );
}

.AppSection:descendantfocus .AppSectionSmallBody
{
	opacity: 0.0;
}

.AppSection:descendantfocus .AppSectionLargeBody
{
	opacity: 1.0;
	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 );
}

.StoreAppDescriptionSection:descendantfocus .AppSectionLargeBody
{
	opacity: 1.0;
	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 );
}


//
// Purchase Section
//
StoreAppPurchaseSection, StorePackagePurchaseSection
{
	width: 514px;
	height: 570px;
	padding: 10px;

	margin-left: -91px;
	margin-right: -91px;
	transform: translatey( -198px );

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

#AppSections:descendantfocus StoreAppPurchaseSection,
#AppSections:descendantfocus StorePackagePurchaseSection
{
	transform: translatey( 51px );
}
#AppSections:descendantfocus .StoreAppPurchaseSection:hover
{
	pre-transform-scale2d: 0.7, 0.3;
}

#AppSections:descendantfocus .StoreAppPurchaseSection:descendantfocus:hover
{
	pre-transform-scale2d: 1.0;
}

.StoreAppPurchaseSection
{
	width: 494px;
	height: 524px;

	// Scale to 320x148.
	// scale2dx = 320 / width
	// margin-right = (width - 320) / 2
	// translatey = (height - 148) / 2
	pre-transform-scale2d: 0.647773279352, 0.2824427480916;
//	margin-left: -87px;
//	margin-right: -87px;
//	transform: translatey( -188px );
}

#AppSections:descendantfocus .StoreAppPurchaseSection
{
//	transform: translatey( 62px );
}

.StoreAppPurchaseSection .AppSectionWrapper
{
	//	width: 540px;
	//	height: 524px;
	overflow: clip clip;
	flow-children: down;
	pre-transform-scale2d: 1.4875, 2.740553;
	transform: translate3d( 114px, 655px, 0px );

	transition-property: transform, pre-transform-scale2d;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.StoreAppPurchaseSection #HeaderImage
{
	width: 460px;
	height: 215px;
	margin: 16px 16px 8px 16px;
	opacity: 0.85;
	saturation: 0.9;

	pre-transform-scale2d: 0.722, 0.89;
	transform: translate3d( -76px, -24px, 0px );

	transition-property: transform, opacity, saturation, pre-transform-scale2d;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
}

.AppSection:descendantfocus #HeaderImage
{
	pre-transform-scale2d: 1.0, 1.0;
	transform: translatex( 0px );
	opacity: 1.0;
	saturation: 1.0;
}

.StoreAppPurchaseSection .AppSectionBody
{
	width: 100%;
	height: fill-parent-flow( 1.0 );
	margin-top: 0px;

	pre-transform-scale2d: 1.03781512605078, 1.2919073415258;
	transform: translate3d( -16px, 84px, 0px );
	transition-property: transform, pre-transform-scale2d;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.StoreAppPurchaseSection .AppSectionSmallBody
{
	flow-children: down;
	transform: translatex( 48px );
	opacity: 1.0;
	width: 100%;
	height: 100%;

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

.StoreAppPurchaseSection .AppSectionLargeBody
{
	width: 100%;
	height: 279px;
	flow-children: down;

	transform: translatex( 50px );

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

StoreAppPurchaseSection #PurchasePriceOverview,
StorePackagePurchaseSection #PurchasePriceOverview
{
	background-color: black;
	vertical-align: bottom;
	horizontal-align: right;
	margin: 10px;

	font-size: 24px;
	visibility: collapse;
}

#DLCInfo
{
	width: 100%;
	flow-children: down;
	margin: 0px 12px;
	width: 100%;
}

.DLCLabel
{
	color: #a455b0;
	font-size: 24px;
	margin: 4px 0px;
}

.DLCRequiresBase
{
	color: applabelsolid;
	width: 100%;
	font-size: 20px;
}

#PurchaseOptionsBtn
{
	flow-children: right;
	
}

#PurchaseOptionsBtn Label,
#AddToCartBtn Label
{
	width: fill-parent-flow( 1.0 );
	white-space: nowrap;
	text-overflow: ellipsis;
}

.PurchaseSectionButtons
{
	width: 100%;
	height: fill-parent-flow( 1.0 );
	margin-top: 12px;
	flow-children: down;
	overflow: squish scroll;
	width: 100%;
	height: 100%;
	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" );


}

#AppSections #PurchaseBtn
{
	margin-top: 12px;
}

#PurchaseOptionsBtn StorePrice
{
	horizontal-align: left;
	transform: translatex(-7px);
	
	transition-property: transform;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
}

#PurchaseOptionsBtn:focus StorePrice
{
	transform: translatex( 0px );
}


#PurchaseOptionsBtn:hover StorePrice
{
	transform: translatex( 0px );
}

#ComingSoon
{
	font-size: 24px;
	color: #a9bd26;
	margin: 4px 12px;
	width: 100%;
}

#AppSections .StoreAppPurchaseSection Button
{
	margin: 0px 16px;
}

// Price related
StorePrice
{
	color: applabelsolid;
}

#PriceOverview
{
	transform: translate3d( 87px, 340px, 0px );

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

StoreAppPurchaseSection:descendantfocus #PriceOverview,
StorePackagePurchaseSection:descendantfocus #PriceOverview
{
	opacity: 0.0;
	transition-duration: AppSectionTransitionDuration;
	transition-delay: AppSectionTransitionDuration, 0s;
}

#PurchaseWishlistBtn
{
	flow-children: right;
}

#PurchaseWishlistBtn Label
{
	width: fill-parent-flow( 1.0 );
}

.WishListThrobber
{
	width: 32px;
	height: 32px;
	margin-top: 0px;
	horizontal-align: center;
	opacity: 0.0;
	
	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.AddingToWishlist .WishListThrobber
{
	opacity: 1.0;
}


//
// Description Section
//
.StoreAppDescriptionSection
{
	width: 534px;
	height: 524px;

	// Scale to 320x148.
	// scale2dx = 320 / width
	// margin-right = (width - 320) / 2
	// translatey = (height - 148) / 2
	pre-transform-scale2d: 0.599250936329588, 0.2824427480916;
	margin-left: -83px;
	margin-right: -103px;
	transform: translatey( -188px );
}

#AppSections:descendantfocus .StoreAppDescriptionSection
{
	transform: translatey( 62px );
}

#AppSections:descendantfocus .StoreAppDescriptionSection:hover
{
	pre-transform-scale2d: 0.6365, 0.3;
}

#AppSections:descendantfocus .StoreAppDescriptionSection:descendantfocus:hover
{
	pre-transform-scale2d: 1.0;
}

.StoreAppDescriptionSection .AppSectionWrapper
{
	width: 100%;
	height: 100%;
	overflow: clip clip;
	flow-children: down;
	pre-transform-scale2d: 1.668750001, 2.744402049;
	transform: translate3d( 170px, 442px, 0px );

	transition-property: transform, pre-transform-scale2d;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.StoreAppDescriptionSection .HeaderLabel
{
	pre-transform-scale2d: 0.95, 1.161085887;
	transform: translate3d( 0px, 6px, 0px );
}

.StoreAppDescriptionSection .AppSectionBody
{
	width: 100%;
	height: fill-parent-flow( 1.0 );
	margin-top: 0px;

	pre-transform-scale2d: 1.0, 1.29009543;
	transform: translate3d( -21px, 74px, 0px );

	transition-property: transform, pre-transform-scale2d;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.StoreAppDescriptionSection .AppSectionSmallBody
{
	flow-children: down;
	transform: translatex( 48px );
	opacity: 1.0;

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

.StoreAppDescriptionSection .AppSectionLargeBody
{
	width: 100%;
	height: 100%;
	flow-children: down;

	transform: translatex( 40px );

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

Label#AppDescription
{
	width: 100%;
	height: 350px;
	margin: 4px 22px;
	padding-bottom: 60px;

	font-size: 24px;
	font-family: platformfont;
	font-weight: normal;
	color: #bbbbbbff;
}

h1, h2
{
	font-size: 28px;
	color: white;
	text-decoration: underline;
}


//
// Note Section
//
.StoreAppNoteSection
{
	width: 514px;
	height: 524px;
	padding: 10px;
	// Scale to 320x148.
	// scale2dx = 320 / width
	// margin-right = (width - 320) / 2
	// translatey = (height - 148) / 2
	pre-transform-scale2d: 0.599250936329588, 0.2824427480916;
	margin-left: -101px;
	margin-right: -81px;
	transform: translatey( -188px );
}

.AppSection:descendantfocus #HeaderIconWrapper
{
	opacity: 0.0;
}

#AppSections:descendantfocus .StoreAppNoteSection
{
	transform: translatey( 62px );
}

#AppSections:descendantfocus .StoreAppNoteSection:descendantfocus
{
	//height: fit-children;
	transform: translateX( 20px ) translateY( 62px );
}

#AppSections:descendantfocus .StoreAppNoteSection:hover
{
	pre-transform-scale2d: 0.6365, 0.3;
}

#AppSections:descendantfocus .StoreAppNoteSection:descendantfocus:hover
{
	pre-transform-scale2d: 1.0;
}

.StoreAppNoteSection .AppSectionWrapper
{
	width: 100%;
	//height: 100%;
	overflow: clip clip;
	flow-children: down;
	pre-transform-scale2d: 1.668750001, 2.744402049;
	transform: translate3d( 170px, 442px, 0px );

	transition-property: transform, pre-transform-scale2d;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.StoreAppNoteSection .HeaderLabel
{
	pre-transform-scale2d: 0.95, 1.161085887;
	transform: translate3d( -20px, -4px, 0px );
	width: 305px;
	flow-children: right;
}

.StoreAppNoteSection .AppSectionBody
{
	width: 100%;
	margin-top: 0px;

	pre-transform-scale2d: 1.0, 1.29009543;
	transform: translate3d( -40px, 74px, 0px );

	transition-property: transform, pre-transform-scale2d;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.StoreAppNoteSection .AppSectionSmallBody
{
	flow-children: down;
	transform: translatex( 48px );
	opacity: 1.0;

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

.StoreAppNoteSection .AppSectionLargeBody
{
	width: 100%;
	height: 420px;
	flow-children: down;
	margin: 12px 22px 20px 22px;

	transform: translatex( 40px );

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

.StoreAppNoteSection:descendantfocus .AppSectionLargeBody
{
	opacity-mask-scroll-down: none;
	opacity-mask-scroll-up: none;
	opacity-mask-scroll-up-down: none;
}

StoreAppNoteSection #LearnMoreButton
{
	margin-left: 0px;
	margin-right: 0px;
	width: 490px;
	height: 100%;
	vertical-align: bottom;

	// Hide until the button does something
	visibility: collapse;
}

StoreAppNoteSection.AppSection
{
	background-color: #3486b0b1;
}

StoreAppNoteSection .AppSectionOverviewLabel
{
	color: detailsdatalabel;
}

#RequiresStreaming, #RequiresOverviewStreaming
{
	visibility: collapse;
	width: 100%;
}

.ShowRequiresStreaming #RequiresStreaming
{
	visibility: visible;
	width: 100%;
}

.ShowRequiresStreaming #RequiresOverviewStreaming
{
	visibility: visible;
	width: 297px;
}

#RequiresController, #RequiresOverviewController
{
	visibility: collapse;
	width: 100%;
}

.ShowRequiresController #RequiresController
{
	visibility: visible;
	width: 100%;
}

.ShowRequiresController #RequiresOverviewController
{
	visibility: visible;
	width: 297px;
}

.ShowRequiresController.ShowRequiresStreaming #RequiresOverviewStreaming,
.ShowRequiresController.ShowRequiresStreaming #RequiresOverviewController
{
	visibility: collapse;
}

#RequiresOverviewStreamingAndController
{
	visibility: collapse;
}

.ShowRequiresController.ShowRequiresStreaming #RequiresOverviewStreamingAndController
{
	visibility: visible;
	width: 297px;
}

#EarlyAccess, #RequiresOverviewEarlyAccess
{
    visibility: collapse;
}

.ShowEarlyAccess #EarlyAccess
{
	visibility: visible;
	width: 100%;
}

.ShowEarlyAccess #RequiresOverviewEarlyAccess
{
    visibility: visible;
    width: 100%;
}

.Note
{
	flow-children: down;
	margin-bottom: 20px;
	width: 100%;
}

Label.NoteLabel
{
	width: 100%;
	margin-bottom: 4px;

	font-size: 22px;
	font-family: platformfont;
	font-weight: normal;
	color: notelabel;
}

.NoteIconWrapper
{
	flow-children: right;
	vertical-align: top;
}

#HeaderIconWrapper.NoteIconWrapper
{
	horizontal-align: right;
	margin-right: 10px;
}

.NoteIcon
{
	horizontal-align: center;
	vertical-align: center;
	background-repeat: no-repeat;
	width: 50px;
	height: 50px;
	margin-right: 10px;
	wash-color: storeoverviewcolor;
	visibility: collapse;
}

#HeaderIconWrapper .NoteIcon
{
	wash-color: noteiconwashheader;
}

.WindowsIcon #WindowsIcon
{
	visibility: visible;
	background-image: url( "file://{images}/store/icon_windows_storefront.png" );
	margin-left: -4px;
	margin-right: -4px;
}

.OSXIcon #OSXIcon
{
	visibility: visible;
	background-image: url( "file://{images}/store/icon_mac_storefront.png" );
	margin-left: -4px;
	margin-right: -4px;
}

.LinuxIcon #LinuxIcon
{
	visibility: visible;
	background-image: url( "file://{images}/store/icon_steamos_storefront.png" );
	margin-right: 4px;
}

.SteamControllerIcon #SteamControllerIcon
{
	visibility: visible;
	background-image: url( "file://{images}/store/icon_steamcontroller_storefront.png" );
	margin-right: 4px;
}

.LegacyControllerIcon #LegacyControllerIcon
{
	// Hide this for now
	//visibility: visible;
	//background-image: url( "file://{images}/store/icon_legacycontroller_storefront.png" );
}

.KeyboardMouseIcon #KeyboardMouseIcon
{
	visibility: visible;
	background-image: url( "file://{images}/store/icon_keyboard_storefront.png" );
}

.ShowEarlyAccess #EarlyAccessIcon
{
	visibility: visible;
	background-image: url( "file://{images}/store/icon_early_access.png" );
	width: 40px;
	height: 40px;
	margin-left: 5px;
}


//
// Details Section
//
.StoreAppDetailsSection
{
	width: 534px;
	height: 524px;

	// Scale to 320x148. Margins include 20px padding to the left
	// scale2dx = 320 / width
	// margin-right = (width - 320) / 2
	// translatey = (height - 148) / 2
	pre-transform-scale2d: 0.599250936329588, 0.2824427480916;
	margin-left: -83px;
	margin-right: -103px;
	transform: translatey( -188px );
}

#AppSections:descendantfocus .StoreAppDetailsSection
{
	transform: translatey( 62px );
}

#AppSections:descendantfocus .StoreAppDetailsSection:hover
{
	pre-transform-scale2d: 0.6365, 0.3;
}
#AppSections:descendantfocus .StoreAppDetailsSection:descendantfocus:hover
{
	pre-transform-scale2d: 1.0;
}

.StoreAppDetailsSection .AppSectionWrapper
{
	width: 100%;
	height: 100%;
	overflow: clip clip;
	flow-children: down;
	pre-transform-scale2d: 1.668750001, 2.744402049;
	transform: translate3d( 170px, 442px, 0px );

	transition-property: transform, pre-transform-scale2d;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.StoreAppDetailsSection .HeaderLabel
{
	pre-transform-scale2d: 0.95, 1.161085887;
	transform: translate3d( 0px, 6px, 0px );
}

.StoreAppDetailsSection .AppSectionBody
{
	width: 100%;
	height: fill-parent-flow( 1.0 );
	margin-top: 0px;

	pre-transform-scale2d: 1.0, 1.29009543;
	transform: translate3d( -21px, 74px, 0px );

	transition-property: transform, pre-transform-scale2d;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.StoreAppDetailsSection .AppSectionSmallBody
{
	flow-children: right;
	transform: translatex( 48px );
	opacity: 1.0;
	padding-top: 10px;
	width: 100%;
	transition-property: opacity;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
}

.StoreAppDetailsSection .AppSectionLargeBody
{
	width: 100%;
	height: 100%;
	flow-children: down;

	transform: translatex( 30px );

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

#DetailsCategories
{
	width: 100%;
	height: 160px;
	flow-children: right;
	margin: 4px 22px;
}

.DetailsCategoryColumn
{
	width: fill-parent-flow( 1.0 );
	height: 100%;
	flow-children: down;
}

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

#DetailsMetacritic
{
	// rounded corner box w/ metacritic logo
	color: black;
	width: 80px;
	height: 40px;
	padding-right: 4px;
	margin-right: 4px;
	
	background-color: storeoverviewcolor;
	background-image: url( "file://{images}/store/metacritic.png" );
	background-repeat: no-repeat;
	background-position: left 4px center;
	border-radius: 2px;
}

#DetailsMetacriticScore
{
	horizontal-align: right;
	vertical-align: center;
	font-size: 30px;
}

#CategoryMetacritic
{
	height: 40px;
	padding-left: 42px;
	flow-children: right;

	background-image: url( "file://{images}/store/metacritic.png" );
	background-repeat: no-repeat;
	background-position: left 4px center;
}

#CategoryMetacritic Label
{
	vertical-align: center;
	font-size: 24px;
}

.CategoryMetacriticScore
{
	color: white;
}

.CategoryMetacriticPossible
{
	color: storeoverviewcolor;
}

#DetailsCategoryOverview
{
	flow-children: right;
	vertical-align: center;

	// show exactly 5 images max
	width: 200px;
}

#DetailsCategoryOverview Image
{
	width: 40px;
	height: 40px;
	margin-right: 1px;
	wash-color: storeoverviewcolor;
	vertical-align: center;
	visibility: collapse;
}

#DetailsCategoryExpanded
{
	// set to show 5 categories
	max-height: 200px;
	width: 100%;
	margin-top: 20px;
	flow-children: down;
}

.CategoryExpanded
{
	// set line height so we can cleanly hide extra categories
	height: 40px;
	flow-children: right;
	color: white;
}

.CategoryExpanded Label
{
	margin-left: 4px;
	vertical-align: center;

	font-size: 22px;
}

.ExpandedGenres
{
	margin: 10px 22px 10px 22px;
	color: storeoverviewcolor;
	flow-children: right;

	font-size: 22px;
}

#Genres
{
	margin-left: 8px;
	color: white;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#CategoryController, #IconController
{
	visibility: collapse;

	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}



.FullController #CategoryController,
.SteamPad .PartialController #CategoryController
{
	visibility: visible;
}

.FullController #IconController
{
	visibility: visible;

	background-image: url( "file://{images}/controller_support_full.png" );
	background-size: contain;
	background-repeat: no-repeat;
	wash-color: storeoverviewcolor;
	width: 40px;
	height: 40px;
}

.SteamPad .FullController #IconController
{
	visibility: visible;

	background-image: url( "file://{images}/store/icon_steamcontroller.png" );
	background-size: contain;
	background-repeat: no-repeat;
	wash-color: storeoverviewcolor;
	width: 40px;
	height: 40px;
}

.SteamPad .PartialController #IconController
{
	visibility: visible;
	background-image: url( "file://{images}/store/icon_legacycontroller.png" );
	background-size: contain;
	background-repeat: no-repeat;
	wash-color: white;
	width: 40px;
	height: 40px;
	vertical-align: center;
}

.SteamPad .PartialController #IconController,
.SteamPad #IconController,
.SteamPad #CategoryControllerImage
{
	visibility: visible;
	background-image: url( "file://{images}/store/icon_legacycontroller.png" );
	background-size: contain;
	background-repeat: no-repeat;
	wash-color: white;
	width: 40px;
	height: 40px;
	margin-left: 4px;
	vertical-align: center;
}

#CategoryControllerImage,
.PartialController #CategoryControllerImage
{
	background-image: url( "file://{images}/store/icon_keyboard.png" );
	vertical-align: bottom;
	background-size: contain;
	background-repeat: no-repeat;
	wash-color: white;
	margin-left: 4px;
	width: 40px;
	height: 40px;
}

.FullController #CategoryControllerImage
{
	background-image: url( "file://{images}/controller_support_full.png" );
	vertical-align: bottom;
	background-size: contain;
	background-repeat: no-repeat;
	wash-color: white;
	width: 40px;
	height: 40px;
}

.SteamPad .FullController #CategoryControllerImage
{
	background-image: url( "file://{images}/store/icon_steamcontroller.png" );
	background-size: contain;
	background-repeat: no-repeat;
	wash-color: white;
	width: 40px;
	height: 40px;
}

#CategoryKeyboardImage
{
	visibility: visible;
	color: applabelsolid;
	background-image: url( "file://{images}/store/icon_keyboard.png" );
	vertical-align: bottom;
	background-size: contain;
	background-repeat: no-repeat;
	wash-color: white;
	width: 40px;
	height: 40px;
}
.FullController #CategoryKeyboardImage,
.SteamPad #CategoryKeyboardImage
{
	visibility: collapse;
}

#CategoryControllerText
{
	visibility: collapse;
}


.FullController #CategoryControllerTextFull
{
	visibility: visible;
}

.FullController #CategoryControllerTextSteam,
.FullController #CategoryControllerTextLegacy,
{
	visibility: collapse;
}



.SteamPad .FullController #CategoryControllerTextSteam
{
	visibility: visible;
}

.SteamPad #CategoryControllerTextSteam,
.SteamPad .PartialSupport #CategoryControllerTextLegacy
{
	visibility: collapse;
}


.SteamPad .FullController #CategoryControllerTextFull,
.SteamPad .FullController #CategoryControllerTextLegacy,
{
	visibility: collapse;
}


.PartialController #CategoryControllerTextSteam,
.PartialController #CategoryControllerTextFull,
.PartialController #CategoryControllerTextLegacy,
.SteamPad .PartialController #CategoryControllerTextSteam,
.SteamPad  #CategoryControllerTextFull
{
	visibility: collapse;
}



.SteamPad .PartialController #CategoryControllerTextLegacy
{
	visibility: visible;
}



.PartialController #CategoryControllerImage
{
	visibility: visible;
}

.SteamPad .PartialController #CategoryControllerImage
{
	visibility: visible;
	background-image: url( "file://{images}/store/icon_legacycontroller.png" );
	background-size: contain;
	background-repeat: no-repeat;
	wash-color: white;
	width: 40px;
	height: 40px;
}

.SteamPad #CategoryController,
.SteamPad .FullController #CategoryController,
.SteamPad .PartialController #CategoryController,
.SteamPad .FullController #IconController,
.SteamPad .PartialController #IconController,
.SteamPad .FullController #CategoryControllerImage,
.SteamPad .PartialController #CategoryControllerImage
{
	visibility: visible;
}

//
// Friends Section
//
.StoreAppFriendsSection
{
	width: 534px;
	height: 524px;

	// Scale to 320x148.
	// scale2dx = 320 / width
	// margin-right = (width - 320) / 2
	// translatey = (height - 148) / 2
	pre-transform-scale2d: 0.599250936329588, 0.2824427480916;
	margin-left: -83px;
	margin-right: -103px;
	transform: translatey( -188px );
}

#AppSections:descendantfocus .StoreAppFriendsSection:hover
{
	pre-transform-scale2d: 0.6365, 0.3;
}

#AppSections:descendantfocus .StoreAppFriendsSection:descendantfocus
{
	transform: translateX( -20px ) translateY( 62px );
}

#AppSections:descendantfocus .StoreAppFriendsSection:descendantfocus:hover
{
	pre-transform-scale2d: 1.0;
}

#AppSections:descendantfocus .StoreAppFriendsSection
{
	transform: translatey( 62px );
}

.StoreAppFriendsSection .AppSectionWrapper
{
	width: 100%;
	height: 100%;
	overflow: clip clip;
	flow-children: down;
	pre-transform-scale2d: 1.668750001, 2.744402049;
	transform: translate3d( 170px, 442px, 0px );

	transition-property: transform, pre-transform-scale2d;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.StoreAppFriendsSection .HeaderLabel
{
	pre-transform-scale2d: 0.95, 1.161085887;
	transform: translate3d( 0px, 6px, 0px );
}

.StoreAppFriendsSection .AppSectionBody
{
	width: 100%;
	height: fill-parent-flow( 1.0 );
	margin-top: 0px;

	pre-transform-scale2d: 1.0, 1.29009543;
	transform: translate3d( -21px, 74px, 0px );

	transition-property: transform, pre-transform-scale2d;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.StoreAppFriendsSection .AppSectionSmallBody
{
	flow-children: down;
	transform: translatex( 48px );
	opacity: 1.0;

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

.StoreAppFriendsSection .AppSectionLargeBody
{
	width: 100%;
	height: 100%;
	flow-children: down;
	overflow: squish scroll;

	transform: translatex( 50px );

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

#FriendsSectionOverview
{
	flow-children: right;
}

#FriendsSectionOverview Image
{
	border-style: solid;
	border-width: 3px;
	border-radius: 0px;
	border-color: #333333;

	width: 60px;
	height: 60px;
	margin-right: 10px;
}

.FriendsWhoWantPlayText
{
	font-size: 20px;
}

#FriendsWhoPlayFeatured, #FriendsWhoWantFeatured
{
	border-style: solid;
	border-width: 4px;
	border-radius: 0px;
	box-shadow: fill #00000040 0px 0px 18px 0px;

	width: 86px;
	height: 86px;
}

#FriendsWhoPlayList, #FriendsWhoWantList, #AchievementsList
{
	flow-children: right;
	vertical-align: bottom;
}

#FriendsWhoPlayList AvatarImage, #FriendsWhoWantList AvatarImage
{
	border-style: solid;
	border-width: 2.5px;
	border-radius: 0px;

	width: 42px;
	height: 42px;
	margin-right: 6px;
}

#FriendsWhoPlayBtn, #FriendsWhoWantBtn, #AchievementsBtn
{
	flow-children: right;
}

#AppSections Button.AvatarImageBtn .FriendsSectionAvatarPanels,
#AppSections Button.AvatarImageBtn .FriendsSectionAvatarFeatured
{
	transform: translatex( -16px );

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

#AppSections Button.AvatarImageBtn:focus .FriendsSectionAvatarPanels
{
	transform: translatex( -8px );
}

#AppSections Button.AvatarImageBtn:hover .FriendsSectionAvatarPanels
{
	transform: translatex( -8px );
}

#AppSections Button.AvatarImageBtn Label
{
	transform: none;
}

.FriendsSectionAvatarPanels
{
	flow-children: down;
	margin-left: 8px;
	height: 86px;
}

#AchievementFeatured
{
	width: 86px;
	border-width: 4px;
	border-color: #666666ff;
	height: 86px;
	box-shadow: inset #00000040 2px 2px 18px 4px;
}

#AchievementsList Image
{
	width: 42px;
	height: 42px;
	margin-right: 6px;
	border-width: 3px;
	border-color: #333333ff;
	box-shadow: inset #00000040 2px 2px 18px 4px;
}


//
// Reviews Section
//
.StoreAppReviewsSection
{
	width: 494px;
	height: 524px;

	// Scale to 320x148. Margins include 20px padding to the left
	// scale2dx = 320 / width
	// margin-right = (width - 320) / 2
	// translatey = (height - 148) / 2
	pre-transform-scale2d: 0.647773279352, 0.2824427480916;
	margin-left: -67px;
	margin-right: -87px;
	transform: translatey( -188px );
}

#AppSections:descendantfocus .StoreAppReviewsSection
{
	transform: translatey( 62px );
}

.StoreAppReviewsSection .AppSectionWrapper
{
	overflow: clip clip;
	flow-children: down;
	pre-transform-scale2d: 1.4875, 2.740553;
	transform: translate3d( 114px, 444px, 0px );

	transition-property: transform, pre-transform-scale2d;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.StoreAppReviewsSection .HeaderLabel
{
	pre-transform-scale2d: 1.0, 1.161085887;
	transform: translate3d( 4px, 5px, 0px );
}

.StoreAppReviewsSection .AppSectionBody
{
	width: 100%;
	height: fill-parent-flow( 1.0 );

	margin-top: 0px;

	pre-transform-scale2d: 1.03781512605078, 1.2919073415258;
	transform: translate3d( -16px, 84px, 0px );
	transition-property: transform, pre-transform-scale2d;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.StoreAppReviewsSection .AppSectionSmallBody
{
	flow-children: down;
	transform: translatex( 48px );
	opacity: 1.0;

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

.StoreAppReviewsSection .AppSectionLargeBody
{
	flow-children: down;
	overflow: squish scroll;

	transform: translatex( 50px );

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

#ReviewList
{
	flow-children: down;
	padding: 8px 16px;
}

#ReviewList Label
{
	margin-top: 8px;
	margin-bottom: 8px;
	font-size: 24px;
	color: #bbbbbbff;
}


//
// Purchase Options
//
StoreAppPurchaseOptions
{
	height: 948px;
	width: 100%;
	vertical-align: bottom;
}

#PackageCarousel
{
	width: 100%;
	padding: 20px 0px;
	flow-children: right;
}

StoreAppPurchaseOptions #Loaded
{
	flow-children: down;
}


//
// Purchase Options Package
//
StoreAppPackage, StoreAppPackageGroup, .StoreAppPackage
{
	width: 494px;
	height: 692px;
	padding: 12px 0px;
	margin-right: -30px;
	background-color: transparent_module;
	pre-transform-scale2d: 0.9;
	flow-children: down;

	box-shadow: #00000044 -2px -2px 4px 4px;

	opacity: 1.0;

	transition-property: position, transform, border, opacity, background-color, pre-transform-scale2d;
	transition-duration: 0.4s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

StoreAppPackage:descendantfocus, StoreAppPackageGroup:descendantfocus, .StoreAppPackage:descendantfocus
{
	wash-color: #429aae00;
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
	pre-transform-scale2d: 1.0;
	margin: 0px;
	background-color: action_module;

	opacity: 1.0;

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

StoreAppPackage:hover, StoreAppPackageGroup:hover, .StoreAppPackage:hover
{
	pre-transform-scale2d: 0.94;
}

StoreAppPackage:descendantfocus:hover, StoreAppPackageGroup:descendantfocus:hover, .StoreAppPackage:descendantfocus:hover
{	
	pre-transform-scale2d: 1.03;
}

StoreAppPackage #HeaderImage, StoreAppPackageGroup #HeaderImage, .StoreAppPackage #HeaderImage
{
	width: 460px;
	height: 215px;
	margin: 8px 16px 12px 16px;
	wash-color: #00000033;
	opacity: 0.9;
	saturation: 0.85;

	transition-property: opacity;
}

StoreAppPackage:descendantfocus #HeaderImage, StoreAppPackageGroup:descendantfocus #HeaderImage, .StoreAppPackage:descendantfocus #HeaderImage
{
	wash-color: none;
	opacity: 1.0;
	saturation: 1.0;
}

StoreAppPackage #PackageName, StoreAppPackageGroup #PackageName, .StoreAppPackage #PackageName
{
	color: applabelsolid;
	width: 100%;
	font-weight: bold;
	font-size: 32px;
	text-overflow: ellipsis;
	line-height: 35px;
	max-height: 70px;
	white-space: normal;
	margin: 0px 12px;
}

StoreAppPackageGroup #SavingsText, .StoreAppPackage #SavingsText
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #537e3c ), to( #689b46 ) );
	color: white;
	font-weight: normal;
	font-size: 24px;
	text-overflow: ellipsis;
	line-height: 34px;
	white-space: normal;
	margin: 2px 12px;
	padding: 0px 4px;
}

StoreAppPackageGroup #ViewPackageSection, .StoreAppPackage #ViewPackageSection
{
	margin-top: 4px;
	width: 100%;
}

.PackagePriceSystemRow
{
	width: 100%;
	flow-children: right;
	margin: 0px 10px 10px 10px;
}

.PackagePriceSystemRow StorePrice
{
	vertical-align: center;
}

#PackagePrice
{
	horizontal-align: right;
}

#ViewPackageSection
{
	width: 100%;
}

StoreAppPackage Button, StoreAppPackageGroup Button, .StoreAppPackage Button
{
	margin: 6px 12px;
	width: 100%;
}

#AddToCartBtn
{
	flow-children: right;
}

#AddToCartBtn #PackagePrice
{
	padding-bottom: 0px;
	padding-top: 2px;
}

#AddToCartBtn #FinalPrice
{
	horizontal-align: right;
	text-align: right;
	width: fit-children;
}

#AppsInPackageHeader
{
	margin: 8px 12px 0px 12px;
	font-size: 24px;
	color: #ffffffa4;
}

#AppNamesInPackage
{
	font-size: 24px;
	color: #ffffff66;
	margin: 0px 12px;
	font-family: platformfont;
}

#RecurringSubscriptionDescription
{
	opacity: 0.0;
	margin: 8px 12px 0px 12px;
	font-size: 24px;
	color: #cfb53fff;
	width: 100%;
}

.Focused #RecurringSubscriptionDescription
{
	opacity: 1.0;
}

.PackageGroupDescription
{
	font-size: 24px;
	color: #a2a2a4;
	margin: 8px 12px;
}

.PackageGroupDescriptionSubscription
{
	font-size: 24px;
	color: #cfb53fff;
	margin: 8px 12px;
}

//
// App DLC
//
StoreAppDLC
{
	height: 948px;
	width: 100%;
	vertical-align: bottom;
}

#PackageCarousel
{
	width: 100%;
	padding: 20px 0px;
	flow-children: right;
}

StoreAppDLC #Loaded
{
	flow-children: down;
	width: 100%;
	height: 100%;
}

#DlcList
{
	width: 100%;
	height: 720px;
	margin-top: 10px;

	padding: 10px 104px 0px 104px;

}


//
// App DLC Item
//
StoreAppDLCItem
{
	flow-children: down;
	opacity: 0.85;

	pre-transform-scale2d: 0.94;

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

StoreAppDLCItem:descendantfocus
{
	pre-transform-scale2d: 1.0;
	opacity: 1.0;
}

StoreAppDLCItem:hover
{
	pre-transform-scale2d: 0.97;
	opacity: 1.0;
}

StoreAppDLCItem:descendantfocus:hover
{
	pre-transform-scale2d: 1.04;
	opacity: 1.0;
}

#DlcTitle
{
	font-size: 28px;
	height: 70px;
	color: applabelsolid;
	font-weight: bold;
	width: fill-parent-flow( 1.0 );
	white-space: normal;
	margin-right: 8px;
	margin-top: -4px;
	text-overflow: ellipsis;
}

StoreAppDLCItem #DlcHeaderImage
{
	width: 546px;
	height: 255px;
	box-shadow: #00000044 -4px -4px 8px 8px;
	saturation: 0.85;
	wash-color: #00000044;

	transition-property: saturation, wash-color;
}

StoreAppDLCItem:hover #DlcHeaderImage
{
	saturation: 1.0;
	opacity: 1.0;
}

StoreAppDLCItem:descendantfocus #DlcHeaderImage
{
	saturation: 1.0;
	wash-color: #00000000;
}


#DlcPrice
{
    margin-right: 6px;
}

#DlcImageWrapper
{
	box-shadow: #00000044 -4px -4px 8px 8px;
	margin: 8px;
}

StoreAppDLCItem:descendantfocus #DlcImageWrapper
{
	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;
}

// Price related
.DLCImageInfo
{
	opacity: 0.0;
	flow-children: right;
	width: 546px;
	height: 70px;
	margin: 0px 10px;
	margin-right: 0px;

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

StoreAppDLCItem:descendantfocus .DLCImageInfo
{
	opacity: 1.0;
}

StoreAppDLCItem:descendantfocus #PlatformSupport
{
	opacity: 1.0;
	margin: 0px;

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

StoreAppDLCItem #PlatformSupport
{
	opacity: 0.0;
	margin: 0px;

}
//
// Movie/Image Slideshow
//
StoreSlideshow
{
	background-color: black;
	transform-origin: 0% 0%;

	transition-property: transform, position;
	transition-duration: SlideshowFocusTransitionDuration;
	transition-delay: 0s, 0s;
	transition-timing-function: ease-out;
}


//
// Package panel styles (looks very similar to apps page)
//
StorePackage
{
	width: 100%;
	height: 100%;
	color: applabel;

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

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

StorePackage:focus, StorePackage:descendantfocus
{
	transform: translate3d( 0px, 0px, 0px );
	opacity: 1.0;
	saturation: 1.0;
}

#AppCarousel
{
	width: 2600px;
	height: 480px;
	position: 0px 98px 0px;

	overflow: noclip clip;
	flow-children: right;

	pre-transform-scale2d: 1.0;
	wash-color: bgcolorwashlight;
	saturation: 0.8;
	opacity: 0.85;

	transition-property: position, pre-transform-scale2d, saturation, wash-color, opacity;
	transition-duration: AppSectionTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;

}

#AppCarousel:hover
{
	pre-transform-scale2d: 1.02;
	saturation: 1.0;
	wash-color: none;
	opacity: 1.0;
}

#AppCarousel:descendantfocus
{
	pre-transform-scale2d: 1.00;
	wash-color: white;
	saturation: 1.0;
	opacity: 1.0;
	position: 0px 140px 0px;
}

#AppCarousel:descendantfocus:hover
{
	pre-transform-scale2d: 1.00;
	wash-color: white;
	saturation: 1.0;
}


//
// Package App Overview
//
StorePackageAppOverview
{
	pre-transform-scale2d: 0.75;
	max-width: 490px;
	height: 420px;
	padding: 10px;
	flow-children: down;

	transform: translateX( -20px ) translateY( -15px );
	transition-property: pre-transform-scale2d, transform, position;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
}




StorePackageAppOverview.Focused:descendantfocus
{
	pre-transform-scale2d: 1.0;
	//transform: translatey( 0px );
	//margin-left: -10px;
	//margin-right: -10px;
	transform: translateX( -20px );
}

#AppCarousel:descendantfocus StorePackageAppOverview:descendantfocus:hover
{
	pre-transform-scale2d: 1.03;
}

StorePackageAppOverview.Focused:descendantfocus #ItemName
{
	visibility: visible;
}

StorePackageAppOverview #CategoryControllerImage
{
	margin-left: 4px;
}

StorePackageAppOverview #CategoryKeyboardImage
{
	margin-left: 8px;
	margin-top: 2px;
}


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


#AppCarousel:descendantfocus .HeaderImageWrapper:hover
{

	pre-transform-scale2d: 1.03;
}

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

#AppCarousel:descendantfocus StorePackageAppOverview: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;
}

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

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

StorePackageAppOverview:descendantfocus #HeaderImage
{
	pre-transform-scale2d: 1.0;
	saturation: 1.0;
	opacity: 1.0;
}

.OnlyVisibleOnCarouselFocus
{
	opacity: 0.0;

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

StorePackageAppOverview:descendantfocus .OnlyVisibleOnCarouselFocus
{
	opacity: 1.0;
	margin-left: 10px;
}

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

#ItemPrice
{
	horizontal-align: right;
}

.ItemDetails
{
	flow-children: down;
	width: 100%;
	margin-top: 8px;
	margin-left: 10px;
}

#ItemName
{
	width: 100%;
	color: applabelsolid;
	font-weight: bold;
	font-size: 36px;
	max-height: 88px;
	text-overflow: clip;
	white-space: normal;
}

.DetailsIconRow
{
	flow-children: right;
	margin-top: 6px;
}


//
// Package purchase section
//
.PriceRow
{
	flow-children: right;
	visibility: collapse;
}

.PriceRowHeader
{
	color: #ffffff66;
	font-size: 22px;
	width: 300px;
	text-align: right;
	margin-right: 30px;
}

.PriceRowValue
{
	color: white;
	font-size: 22px;
}

.ShowSavings .PriceRow
{
	visibility: visible;
}

#AppSections .StoreAppPurchaseSection #PurchaseBtn
{
	margin-bottom: 20px;
}


//
// Age Gate
//
StoreAgeGate
{
	width: 100%;
	margin-top: 300px;
	visibility: collapse;
}

.AgeGate StoreAgeGate
{
	visibility: visible;
}

.AgeGateLoaded
{
	flow-children: down;
	horizontal-align: center;

	opacity: 0.0;

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

StoreAgeGate.Loaded .AgeGateLoaded
{
	opacity: 1.0;
}

#AgeControls
{
	flow-children: down;
}

#AgeGateHeader
{
	horizontal-align: center;
}

.AgeGateInstructions
{
	horizontal-align: center;
	font-size: 32px;
	color: white;
	margin-bottom: 12px;
}

.BirthdayControls
{
	flow-children: right;
}

DropDown#Day
{
	width: 130px;
	margin-right: 16px;
	background-color: transparent_module2;
}

#DayDropDownMenu
{
	width: 130px;
	height: 334px;
	background-color: transparent_module2;
}

DropDown#Month
{
	width: 250px;
	margin-right: 16px;
	background-color: transparent_module2;
}

#MonthDropDownMenu
{
	width: 250px;
	height: 334px;
	background-color: transparent_module2;
}

DropDown#Year
{
	width: 200px;
	margin-right: 0px;
	background-color: transparent_module2;
}

#YearDropDownMenu
{
	width: 200px;
	height: 334px;
	background-color: transparent_module2;
}

StoreAgeGate Button
{
	width: fit-children;
	background-color: transparent_module2;
}

StoreAgeGate Button Label
{
	width: fit-children;
}

DropDownMenu
{
	overflow: squish scroll;
}

#AgeRestricted
{
	horizontal-align: center;
	font-size: 32px;
	color: white;
}

.PackagePlatforms
{
	flow-children: right;
}

.PackagePlatforms #Controller
{
	margin-top: -4px;
	margin-left: 6px;
}

#ContinueBtn
{
	background-color: transparent_module2;
	transition-property: background-color, color, border, box-shadow;
	border-width: 5px;
	border-color: none;
}	

#ContinueBtn:hover
{
	box-shadow: none;
}

#ContinueBtn:focus
{
	background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdff ), to( #bdbfbfff ) );
	box-shadow: fill box_shadow_off_color 0px 0px 0px 0px;
	border-width: 5px;
	border-color: #fdfefef0;

	animation-name: main-button-glow-movement-no-fill, quick-blur;
	animation-duration: 1.7s, 0.45s;
	animation-delay: 0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite, 1;
	animation-direction: normal;
}

DropDown#Day:focus,
DropDown#Month:focus,
DropDown#Year:focus,
DropDown#Day:selected,
DropDown#Month:selected,
DropDown#Year:selected
{
	background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdff ), to( #bdbfbfff ) );
	box-shadow: fill box_shadow_off_color 0px 0px 0px 0px;


	animation-name: main-button-glow-movement-no-fill, quick-blur;
	animation-duration: 1.7s, 0.45s;
	animation-delay: 0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite, 1;
	animation-direction: normal;
}


DropDown.DropDownMenuVisible:focus Label
{
	color: applabelselectedsolid;
}

	
#ContinueBtn Label
{
	font-size: 24px;
	padding-bottom: 2px;
	padding-left: 4px;
	padding-right: 4px;
	transform: translateX( 0px );
}

#ImageCarousel:descendantfocus .LeftMouseScrollRegion
{
	position: 0px 60px 0px;
	width: 80px;
	height: 350px;

	background-image: url( "file://{images}/mouse/arrowLdefault.tga" );
	background-repeat: no-repeat;
	background-position: center;
	background-color: mouse_off_bg_left;
	opacity: 0.0;
	
	transition-property: opacity, background-color;
	transition-duration: 0.23s;
}

#ImageCarousel:descendantfocus .RightMouseScrollRegion
{
	position: -680px 60px 0px;
	width: 80px;
	height: 350px;
	horizontal-align: right;
	background-image: url( "file://{images}/mouse/arrowRdefault.tga" );
	background-repeat: no-repeat;
	background-position: center;
	background-color: mouse_off_bg_right;
	opacity: 0.0;
	
	transition-property: opacity, background-color;
	transition-duration: 0.23s;
}

#ImageCarousel:descendantfocus:hover .RightMouseScrollRegion
{
	opacity: 1.0;
	background-color: mouse_hover_bg_right;
}

#ImageCarousel:descendantfocus:hover .LeftMouseScrollRegion
{
	opacity: 1.0;
	background-color: mouse_hover_bg_left;
}

#PackageCarousel:descendantfocus .LeftMouseScrollRegion
{
	position: 0px 0px 0px;
	width: 80px;
	height: 350px;

	background-image: url( "file://{images}/mouse/arrowLdefault.tga" );
	background-repeat: no-repeat;
	background-position: center;
	background-color: mouse_off_bg_left;
	opacity: 0.0;
	
	transition-property: opacity, background-color;
	transition-duration: 0.23s;
}

#PackageCarousel:descendantfocus .RightMouseScrollRegion
{
	position: 0px 0px 0px;
	width: 80px;
	height: 350px;
	horizontal-align: right;
	background-image: url( "file://{images}/mouse/arrowRdefault.tga" );
	background-repeat: no-repeat;
	background-position: center;
	background-color: mouse_off_bg_right;
	opacity: 0.0;
	
	transition-property: opacity, background-color;
	transition-duration: 0.23s;
}

#PackageCarousel:descendantfocus:hover .RightMouseScrollRegion
{
	opacity: 1.0;
	background-color: mouse_hover_bg_right;
}

#PackageCarousel:descendantfocus:hover .LeftMouseScrollRegion
{
	opacity: 1.0;
	background-color: mouse_hover_bg_left;
}

.FlowDownContainer
{
	flow-children: down;
	width: 100%;
}