/* styles related to screenshots */

@define longduration: 1.7s;
@define box_shadow_on_color: #52d1ebaa;

ScreenshotBrowser
{
	width: 100%;
	height: 100%;
	z-index: 4;
}

ScreenshotBrowser #Contents
{
	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.4s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

ScreenshotBrowser:descendantfocus #Contents
{
	//transform: translate3d( 0px, 0px, 0px );
	//opacity: 1.0;
	//saturation: 1.0;

}

ScreenshotBrowser .TitleRow
{
	x: 100px;
	y: 30px;
	height: 70px;
	font-size: 56px;
	margin-top: 11px;
	font-weight: light;
	white-space: nowrap;
	color: carousel_title;
	z-index: 100;
}

.FilterRow
{
	font-size: 30px;
	margin-top: 62px;
	flow-children: right;
	horizontal-align: center;
	color: carousel_title;
	z-index: 100;
}

.FilterRowViewing
{
	align: left center;
}

.FilterRow DropDown
{
	width: 400px;
	height: 50px;
	box-shadow: #00000066 0px 0px 10px 0px;
}

#AppFilterDropDownMenu
{
	width: 400px;
	max-height: 780px;
}

#SortOrderDropDownMenu
{
	width: 400px;
	height: 400px;
}

#ContentGrid
{
	//	width: 100%;
	//	height: fill-parent-flow(1.0);
	width: 1920px;
	height: 848px;
	padding-left: 100px;
	padding-right: 360px;
	padding-top: 81px;
	padding-bottom: 189px;
}

ScreenshotBrowser.NoScreenshots #ContentGrid
{
	visibility: collapse;
}

ScreenshotBrowserItem
{
	flow-children: down;
	pre-transform-scale2d: 0.83;
	margin: -52px -26px;
	margin: -140px, -82px;

	padding: 82px;
	background-size: 110% 110%;
	background-repeat: no-repeat no-repeat;
	background-position: 40% 20%;

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

ScreenshotBrowserItem:descendantfocus
{
	z-index: 100;
	pre-transform-scale2d: 1.0;
	background-image: url( "file://{images}/library/screenshot_grid_shadow.png");
}

ScreenshotBrowserItem.LastFocused
{
	z-index: 50;
}

ScreenshotBrowserItem #Screenshot
{
	width: 547px;
	opacity: 0.85;
	saturation: 0.8;
	height: 308px;
	z-index: 100;
	margin: 10px;
	background-color: black;
	box-shadow: fill #000000aa -2px -2px 4px 4px;
}


ScreenshotBrowserItem:descendantfocus #Screenshot
{
	box-shadow: box_shadow_on_color 0px 0px 16px 0px;
	opacity: 1.0;
	saturation: 1.0;
	animation-name: main-button-glow-movement-no-fill;
	animation-duration: longduration;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

.ScreenshotItemDescRow
{
	width: 547px;
	color: white;
	font-size: 20px;
	flow-children: down;
	margin: 0px 10px;

	opacity: 0.0;

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

ScreenshotBrowserItem:descendantfocus .ScreenshotItemDescRow
{
	opacity: 1.0;
}

.ScreenshotItemDescRow #Caption
{
	font-size: 22px;
	font-weight: bold;
	white-space: nowrap;
}

.ScreenshotItemDescInnerRow
{
	width: 100%;
	margin-top: 4px;
	flow-children: right;
}

.ImageSize
{
	align: right center;
	opacity: 0.0;
}

#NoScreenshots
{
	width: 60%;
	color: detailsdatalabel;
	horizontal-align: center;
	font-size: 30px;
	align: center top;
	flow-children: down;
	margin-top: 320px;

	visibility: collapse;
}

.NoScreenshots #NoScreenshots
{
	visibility: visible;
}

.HotkeyHeader
{
	color: tcstatictext;
	font-size: 30px;
	horizontal-align: center;
}

.HotkeySection
{
	align: center top;
	margin-top: 50px;
}

#KeyboardHotkeySection
{
	flow-children: down;
	visibility: collapse;
}

.CursorVisible #KeyboardHotkeySection
{
	visibility: visible;
}

.VR #KeyboardHotkeySection
{
	visibility: collapse;
}

#GamepadHotkeySection
{
	flow-children: down;
	visibility: visible;
}

.CursorVisible #GamepadHotkeySection
{
	visibility: collapse;
}

// Show screenshot shortcut when in VR with motion controllers
.VR #GamepadHotkeySection
{
	visibility: visible;
}

// Don't show screenshot shortcut when in VR with gamepad
.VR.ControllerPresent #GamepadHotkeySection
{
	visibility: collapse;
}

.GamepadHotkeyRow
{
	flow-children: right;
	horizontal-align: center;
}


.GamepadHotkeyRow Label, .GamepadHotkeyRow KeyboardShortcut
{
	horizontal-align: center;
	vertical-align: center;
	margin-left: 4px;
}

#KeyboardBtn 
{
	horizontal-align: center;	
	vertical-align: center;
}

.VR #GamepadHotkeySection #InGameControllerScreenshot
{
	visibility: collapse;
}

.VR #GamepadHotkeySection #GamepadBtn
{
	visibility: collapse;
}

.VR #GamepadHotkeySection .Plus
{
	font-size: 38px;
	line-height: 40px;
	margin-top: 10px;	
}

#GamepadHotkeySection .MiddleButton
{
	background-image: url( "file://{images}/settings/icon_middle.tga" );
}

.VR #GamepadHotkeySection .MiddleButton
{
	background-image: url( "file://{images}/library/icon_steamvr_system.png" );
	width: 78px;
	height: 112px;
	margin-right: 20px;
	margin-top: 8px;
}

#GamepadHotkeySection .TriggerButton
{
	visibility: collapse;
}

.VR #GamepadHotkeySection .TriggerButton
{
	visibility: visible;
	background-image: url( "file://{images}/library/icon_steamvr_trigger.png" );
	width: 78px;
	height: 112px;
	margin-right: 0px;
	margin-left: 20px;
	margin-top: 8px;
}
	
.LeftMouseScrollRegion, .RightMouseScrollRegion
{
	opacity: 0.0;
	transition-property: opacity, background-color;
	transition-duration: 0.4s;
	transition-delay: 0.2s;
	transition-timing-function: bigpicture-ease-in-out;
	transform: translateY( -80px );
}


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


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

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

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


#ContentGrid.CursorVisible:descendantfocus:hover .RightMouseScrollRegion:hover, 
#ContentGrid.CursorVisible:descendantfocus:hover .RightMouseScrollRegion:active
{
	background-color: mouse_active_bg_right;

}

.LeftMouseScrollRegion
{
	position: 0px -10px 0px;
	background-color: mouse_hover_bg_left;


	z-index: 100;
}

.RightMouseScrollRegion
{
	position: 0px -10px 0px;
	background-color: mouse_hover_bg_right;
	z-index: 100;
}

.SingleGameMode .FilterRow
{
	visibility: collapse;
}

#AppDetailsClose
{
	position: 0px 0px 0px;
	height: 139px;
	width: 100%;
	visibility: visible;
	z-index: 1;
}