/* Styles for system im background on main menu */

.StoreBlocked #SystemIMBackground
{
	visibility: collapse;
}

#SystemIMBackground.SystemIMBackgroundBaseInvisible
{
	opacity: 0.0;
}


#SystemIMBackground.SystemIMBackgroundBaseInvisible #CarouselTitle
{
	max-width: 0px;
	opacity: 0.0;
}

#SystemIMBackground:descendantfocus #CarouselTitle
{
	opacity: 1.0;
	max-width: 600px;
}


#SystemIMBackground:descendantfocus
{
	animation-name: none;
	opacity-mask: none;
	flow-children: right;
	overflow: clip;
}

#SystemIMBackground:descendantfocus .SystemIMImage.DismissedMessage:descendantfocus,#SystemIMBackground:descendantfocus .SystemIMImage.DismissedMessage
{
	opacity: 0.0;
}

.SystemIMImage
{
	horizontal-align: left;
	vertical-align: center;
	box-shadow: dark_box_shadow_color fill 2px 2px 12px -4px;
	max-width: 800px;
	flow-children: down;

	// Trick to add transpaency around images which will get composition layers and then
	// interpolate edges alpha, stops texture crawl as they transform as the effect is like
	// antialiased edges even on a transform of the parent due to the fuzzy edges.
	margin: -4px -8px;

	transition-property: transform, position, opacity, blur, box-shadow, wash-color, saturation, opacity-mask !immediate;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;

	animation-delay: 0.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: 1;
	animation-direction: normal;
}


#SystemIMBackground:descendantfocus .SystemIMImage:descendantfocus
{
	blur: none;
	visibility: visible;
	opacity: 1.0;
	saturation: 1.0;
}

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

#SystemIMBackground:descendantfocus .SystemIMImage.PreviouslyLeft
{
	opacity-mask: url( "file://{images}/focus_shadow_left.png" ) 0.0;
}


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

#SystemIMBackground:descendantfocus .SystemIMImage.LeftOfFocus1
{
	opacity-mask: url( "file://{images}/focus_shadow_left.png" ) 1.0;
}

.SystemIMImage Button, .SystemIMImage Label
{
	opacity: 0.0;
}

#SystemIMBackground .SystemIMImage #SystemIMImage
{
	margin: 10px;
	width: 741px; // 570*1.3 to scale up a little
	height: fit-children;
}

#SystemIMBackground:descendantfocus .SystemIMImage:focus #SystemIMImage
{
	border-style: solid;
	border-width: 5px;
	border-radius: 0px;
	border-color: #b6e1faff;
	background-color: #2A5D7C ;

	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
}

.SystemIMImage:focus Label
{
	opacity: 1.0;
}

.SystemIMImage #SystemIMButtonLabel
{
	margin-top: 8px;
	margin-bottom: 6px;
	horizontal-align: center;
	font-size: 36px;
}

#SystemIMDisclaimer
{	
	color: applabelsolid;
	margin-left: 10px;
	margin-top: 8px;
	margin-bottom: 8px;
	font-family: platformfont;
	font-size: 11px;
	opacity: 0.0;
	transition-property: opacity;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
}

.SystemIMImage:focus #SystemIMDisclaimer
{
	opacity: 1.0;
}


#PlatformSupport
{
	margin: 10px;
	padding-left: 40px;
	padding-right: 5px;
	padding-top: 0px;
	width: fit-children;
	height: 80px;

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

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

#SystemIMImage:descendantfocus #PlatformSupport
{
	opacity: 1.0;
}

#IMContents
{
}

#GamePadControllerIcon, #WindowsIcon, #OSXIcon, #LinuxIcon
{
	width: 50px;
	height: 50px;

	horizontal-align: right;
	vertical-align: bottom;

	visibility: collapse;

	transition-property: opacity;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
	background-size: contain;
	background-repeat: no-repeat;

}

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

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


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

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

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

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


.SteamPad.GamepadControllerIcon #GamePadControllerIcon
{
	visibility: visible;
	background-image: url( "file://{images}/store/icon_steamcontroller_storefront.png" );
}

#SystemIMBackground:descendantfocus .SystemIMImage
{
	blur: gaussian( 0.8 );
	saturation: 0.75;
	opacity: 0.8;

	transform: none;
	//margin: 10px;
	wash-color: none;
	box-shadow: none;
	animation-name: none;

	transition-duration: 0.3s;
	transition-delay: 0.0s !immediate;
	transition-property: opacity, opacity-mask, z-index, position, box-shadow, z-index, wash-color, saturation, blur;
}


#SystemIMBackground:descendantfocus 
{
	opacity: 1.0;
	blur: none;
	saturation: 1.0;
	//	transform-origin: 0% 0% parent-relative;
	//	transform: scalex( 1.5 ) scaley( 1.5 );
	wash-color: none;

}