#webinlinepanel
{
	width: 100%;
	height: 870px;
	z-index: 5000;
	transition-property: opacity;
	transition-duration: 0.40s;
	transition-timing-function: bigpicture-ease-in-out;
	background-color: #000000ff;

	background-image: url( "file://{images}/store/store_app_bg.png" );
	opacity-mask: url( "file://{images}/background_alpha_mask.png" ) 0;

	box-shadow: #000000aa -4px -4px 8px 8px;
}

#webinlinepanel.Visible
{
	opacity: 1.0;
}

ContentFrame #webinlinepanel.Visible
{
}

.Deleting
{
	opacity: 0.0;
}

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

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

Button Label
{
	opacity: 1.0;
	color: white;
	margin-left: 4px;
	vertical-align: center;
	text-align: center;
	font-size: 30px;
	line-height: 38px;
	font-family: platformfont;
	width: 100%;
	height: 100%;

	white-space: nowrap;
	text-overflow: clip;
	transition-property: opacity;
	transition-duration: 0.15s;
	transition-timing-function: bigpicture-ease-in-out;
}

Button:focus Label
{
	color: black;
}

Button:hover Label
{
	color: tcexitrowhover;
}

Button
{
	padding: 8px 8px;
	box-shadow: #eeeeee00 -5px -5px 6px 10px;
	border: 5px solid #0d1c2200;
	color: tcexitrow;
	background-color: #0d192100;

	transition-property: border, blur, background-color, color, transform, box-shadow;
	transition-duration: 0.4s;
	transition-timing-function: ease-out;

	flow-children: right;
	horizontal-align: right;

}

Button:hover
{
	transition-duration: 0.3s !immediate;

	color: tcexitrowhover;
	box-shadow: #eeeeee60 -5px -5px 6px 10px;
}

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

	border-width: 5px;
	border-style: solid;
	border-color: #fdfefef0;

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

	// Remove border, so we dont transition border out on focus lost, that looks weird.
	transition-property: blur, background-color, color, transform;

	transform: translatez( 0px );
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;

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

HTML #MousePanningImage
{
	visibility: collapse;
}

.Reticule
{
	vertical-align: center; 
	horizontal-align: center;
	transition-property: opacity, wash-color;
	transition-duration: 1.0s;
	transition-timing-function: bigpicture-ease-in-out;
	wash-color: reticule_color;
	opacity : 0.0;

	width: 66px;
	height: 66px;
}

.ReticuleVisible .Reticule
{
	opacity : 0.4;
	//wash-color: reticule_color_dim;
}

#ReticuleMiddle.ReticuleHidden
{
	opacity : 0.4;
	wash-color: reticule_color_dim;
}

.CursorVisible #ReticuleMiddle, .FullScreen #ReticuleMiddle, .LoadingPage #ReticuleMiddle
{
	opacity : 0.0;
}

#Throbber
{
	vertical-align: center; 
	horizontal-align: center;
	width: 54px;
	height: 54px;
	opacity: 0.0;
	//background-color: #000000aa;

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


.LoadingPage #Throbber
{
	opacity: 1.0;
}

HTML MouseScrollRegion
{
	visibility: collapse;
}

HTML.HasVerticalScrollbar .TopMouseScrollRegion,
HTML.HasVerticalScrollbar .BottomMouseScrollRegion
{
	visibility: visible;
}

HTML .BottomMouseScrollRegion
{
	transform: translatex( 0px );
}

HTML.HasHorizontalScrollbar .LeftMouseScrollRegion,
HTML.HasHorizontalScrollbar .RightMouseScrollRegion
{
	visibility: visible;
}