@define reticlesetupanimationtime: 0.5s;
@define mousepanningcursorsize: 99px;
@define topbarheight: 74px;

WebBrowser
{
	width : 100%;
	height : 100%;
	position: 0px 0px 0px;
	visibility: visible;
	transform: translatex( 0px );
	opacity: 1.0;
	transition-property: opacity, transform;
	transition-duration: 0.4s;
	transition-timing-function: bigpicture-ease-in-out;
}

WebBrowser.Hidden
{
	transform-origin: 0% 0% parent-relative;
	transform: translatex( 1920px ) rotateX( 45deg ) translateZ( -1000px );
	opacity: 0.0;
}

HTMLVerticalScrollBar, VerticalScrollBar
{
	width: 6px;
	margin: 14px, 0px, 14px 24px;
	margin-top: 18px;
	border-radius: 2px;
	height: 955px;
	background-color: #aeaeae66;
	box-shadow: #00000033 -3px -3px 6px 6px;
	horizontal-align: right;
	vertical-align: top;
	opacity: 1.0;

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

HTMLHorizontalScrollBar, HorizontalScrollBar 
{
	height: 6px;
	width: 100%;
	horizontal-align: left;
	vertical-align: bottom;

	transition-property: transform;

	background-color: #aeaeae66;
	border-radius: 2px;
	box-shadow: #00000033 -3px -3px 6px 6px;
	margin: 14px;
	margin-right: 34px;	
}

HTMLVerticalScrollBar .ScrollThumb, VerticalScrollBar .ScrollThumb
{
	background-color: #ffffffff;
	transition-property: position;
	transition-duration: 0.05s;
	transition-timing-function: bigpicture-ease-in-out;
}

HTMLHorizontalScrollBar .ScrollThumb, HorizontalScrollBar .ScrollThumb
{
	background-color: #ffffffff;
	transition-property: position;
	transition-duration: 0.05s;
	transition-timing-function: bigpicture-ease-in-out;
}

HTMLHorizontalScrollBar, HTMLVerticalScrollBar, HorizontalScrollBar, VerticalScrollBar
{
	opacity : 0.0;
}

.FooterVisible HTMLHorizontalScrollBar, .FooterVisible HTMLVerticalScrollBar, .FooterVisible HorizontalScrollBar, .FooterVisible VerticalScrollBar
{
	opacity : 1.0;
}



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



#HtmlContainer
{
	height: fill-parent-flow( 100 );
	width: 100%;
	background-color: web_bg_color;
}

WebController.UrlBarTextEntry .Html
{
	opacity: 0.2;
}


.HTML
{
	opacity-mask: url( "file://{images}/browser/browser_mask.png" );

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


.HTML.IncrementalZoom
{
	transition-duration: 0.15s;
	transition-timing-function: linear;
}

.HTML:descendantfocus
{
	opacity-mask: none;
}

.ContextMenuVisible .HTML
{
	opacity-mask: url( "file://{images}/browser/browser_mask.png" );
	color: gradient( linear, 0% 0%, 0% 100%, from( #68686880 ), to( #686868ff ) );
	opacity: 0.4;
}

.ContextMenuVisible .TopBar
{
	blur: gaussian( 1.5 );	
}

.HTML.HTMLContentLoaded:descendantfocus
{
	color: gradient( linear, 0% 0%, 0% 100%, from( #68686880 ), to( #686868ff ) );

}

.URLEdit .HTML
{
	color: gradient( linear, 0% 0%, 0% 100%, from( #68686880 ), to( #686868ff ) );
	opacity: 0.4;
}

SlideShow
{
	width: 100%;
	height: 100%;
}

.HTML.SlideshowPanel
{
	width: 100%;
	height: 100%;
	position: 0px 0px 0px; // use position so it doesn't interfere with the programatic zoom transforms
}

.HTML.SlideshowPanel.SlideShowLeftOfFocus
{
	position: -1920px 0px 0px;
}

.HTML.SlideshowPanel.SlideShowRightOfFocus
{
	position: 1920px 0px 0px;
}

#HTML
{
	transform-origin: 0% 0% parent-relative;
}

// this class supports the smooth scroll of the html panel
#HTMLTexture
{
	transform-origin: 0% 0% parent-relative;
	transition-property: position, transform;
	transition-duration: 0.15s;
	transition-timing-function: linear;
}


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

#ReticuleOuter
{
	transition-duration: 0.2s;
}

.ReticuleVisible
{
	opacity : 0.8;
}

#ReticuleOuter.ReticuleHidden
{
	transition-duration: 0.2s;
	opacity : 0.0;
}

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

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

.CursorVisible #ReticuleOuter, .FullScreen #ReticuleOuter
{
	opacity : 0.0;
}


.TopBar
{
	background-color: topbarbackground;
	height: topbarheight;
	width: 100%;
	visibility: visible;
	padding: 5px;
	vertical-align: center;
	box-shadow: fill #00000033 -2px -2px 4px 4px;

	transition-property: opacity, transform, blur;
	transition-duration: 0.25s;
	transition-timing-function: bigpicture-ease-in-out;
}

.FullScreen .TopBar
{
	visibility: collapse;
}

#ControlBar
{
	horizontal-align: left;
	flow-children: right;
	height: 100%;
	visibility: visible;
	margin: 5px;
	background-color: none;
	z-index: -100;
}


#ControlBar_Buttons
{
	horizontal-align: left;
	flow-children: right;
	margin: 0px;
	margin-left: 74px;
	margin-top: 0px;
	opacity: 1.0;
}

#TabBar
{
	horizontal-align: left;
	flow-children: right;
	height: 100%;
	width: 290px;
	visibility: visible;
	margin: 5px;
	margin-left: 1450px;
	background-color: none;
	z-index: -100;
}

.TopBar:descendantfocus #ControlBar_Buttons
{
	opacity: 0.0;	
}

.TopBar:descendantfocus #ControlBar_Buttons:descendantfocus
{
	opacity: 1.0;	
}

.ControlBarButton,
.ControlBarButtonMouse
{
	flow-children: right;
	horizontal-align: left;
	border-radius: 4px;
	margin-top: 0px;
	margin-left: 4px;
	margin-right: 4px;
	border-width: 2px;
	border-style: solid;
	vertical-align: center;

	transition-duration: 0.23s;
	transition-property: border, background-color, color, wash-color, transform, opacity, box-shadow;
	transition-timing-function: ease-out;
}

#XInputPadNavButtons,
#SteamPadNavButtons,
#MouseNavButtons,
{
	visibility: collapse;
	flow-children: right;
	margin-top: 4px;
	margin-bottom: 4px;
}

.XInputPad #XInputPadNavButtons
{
	visibility: visible;
}

.SteamPad #SteamPadNavButtons
{
	visibility: visible;
}

.CursorVisible .SteamPad  #MouseNavButtons
{
	visibility: collapse;
}

.CursorVisible .XInputPad #MouseNavButtons
{
	visibility: collapse;
}

.CursorVisible #MouseNavButtons
{
	visibility: visible;
}


.ControlBarButton Image,
.ControlBarButtonMouse Image
{
	vertical-align: center;
	wash-color: ui_primary_color;
}

.ControlBarButton:disabled Image
.ControlBarButton:disabled:hover Image
{
	opacity: 0.3;
}

.ControlBarButtonMouse:hover,
.ControlBarButton:hover
{
	transition-duration: 0.23s !immediate;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #1d2122ff ), to( #121313ff ) );
	box-shadow: #eeeeee60 -2.5px -2.5px 3px 5px;
}

.ControlBarButtonMouse:hover:disabled,
.ControlBarButton:hover:disabled
{
	box-shadow: none;
	background-color: none;
}

@keyframes 'control-button-glow-movement'
{
	0%
	{
		box-shadow: fill box_shadow_on_color -2.5px -2.5px 9px 4px;
	}

	8%
	{
		box-shadow: fill box_shadow_on_color -2.5px -2.5px 9px 4px;
	}

	48%
	{
		box-shadow: fill box_shadow_on_color -1.5px -1.5px 3px 1px;
	}

	52%
	{
		box-shadow: fill box_shadow_on_color -1.5px -1.5px 3px 1px;
	}

	100%
	{
		box-shadow: fill box_shadow_on_color -2.5px -2.5px 9px 4px;
	}
}

#ControlBar .ControlBarButton:focus
{
	border-color: #fdfefef0;

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

	box-shadow: box_shadow_on_color -2.5px -2.5px 9px 4px;

	animation-name: control-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;
}

#ControlBar .ControlBarButton:active
{
}

#ControlBar ParentalButton.Locked Image
{
	wash-color: #000000aa;
}


#UrlBar
{
	border-width: 4px;
	border-color: url_bar_border;
	border-style: solid;
	flow-children: right;

	horizontal-align: center;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-top: 4px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
	width: 980px;
	background-color: url_bar_bg;

	box-shadow: inset #00000040 2px 2px 8px 2px;
}

#UrlBar:descendantfocus
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #dbdcdd ), to( #fdfdfd ) );
	border-color: #ffffff;
	color: #333333;
	box-shadow: inset #00000040 4px 4px 4px 4px;
}

#BrowserFavoriteAdded
{
	opacity: 0.0;
	margin-left: 670px;
	vertical-align: center;
}

@keyframes 'ThrobFavoriteAdded'
{
	0%
	{
		opacity: 0.0;
		transform: translatey( 800px ) translatez( -40px );

		pre-transform-scale2d: 0.1;

	}
	
	40%
	{
		opacity: 0.5;
		pre-transform-scale2d: 0.4;
	}
	
	85%
	{
		opacity: 1.0;
		transform: translatey( -100px ) translatez( 40px );
		pre-transform-scale2d: 0.8;
	}
	
	100%
	{
		opacity: 0.0;
		transform: translatey( 200px );
		pre-transform-scale2d: 2.0;
	}
}


.FavoriteAdded #BrowserFavoriteAdded
{
	animation-name: ThrobFavoriteAdded;
	animation-duration: 1.5s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: 1;
	animation-direction: normal;
}

#UrlBar TextEntry,
#UrlBar Label,
#TabBar Label,
#ControlBar Label
{
	font-size: 21.0;
	horizontal-align: center;
	text-overflow: clip;
	overflow: clip;
	white-space: nowrap;
	vertical-align: center;
	font-family: platformfont;
}

#TabBar Label,
#ControlBar Label
{
	color: #019fdeff;
	opacity: 1.0;
	transition-property: opacity;
	transition-duration: 0.23s;
}

#LT_btn, #RT_btn
{
	margin-top: 6px;
	horizontal-align: center;
}

.CursorVisible #LT_btn,
.CursorVisible #RT_btn
{
	opacity: 0.0;
}

.SteamPad #LT_btn,
.SteamPad #RT_btn
{
	opacity: 0.0;
}

#MouseTabLt, #MouseTabRt,
{
	opacity: 0.0;
}

.CursorVisible #MouseTabLt,
.CursorVisible #MouseTabRt
{
	opacity: 1.0;
}

.CursorVisible .SteamPad #MouseTabLt,
.CursorVisible .SteamPad #MouseTabRt
{
	opacity: 0.0;
}

#UrlBar TextEntry
{
	color: applabelnofade;
	padding: 8px 0px 0px 8px;
	height: 41px;
	border-color: none;
	background-color: none;
	box-shadow: none;
	width: 100%;
}

#UrlBar TextEntry:descendantfocus
{
	color: applabelselectedsolid;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #dbdcdd ), to( #fdfdfd ) );
	animation-name: none;

}

#UrlBar TextEntry:disabled
{
	wash-color: parental_locked_wash;
}

.HtmlEVCert #UrlBar TextEntry, .HtmlSecure #UrlBar TextEntry, .HtmlCertError #UrlBar TextEntry
{
	padding: 8px 0px 0px 0px;
}

#UrlBar Label
{
	horizontal-align: left;
	visibility: collapse;
	color: #82ba38ff;
	background-color: gradient( linear, -15% 0%, 100% 0%, from( #84ba3c30 ), to( #84ba3c60 ) );

}

.HtmlEVCert #UrlBar Label
{
	visibility: visible;
	color: #84ba3cff;
}

.HtmlEVCert #EVCertName
{
	margin-right: 5px;
}

#UrlBar Image
{
	padding-right: -10px;
	padding-left: -10px;
	vertical-align: center;
	horizontal-align: left;
	visibility: collapse;

}

.HtmlSecure #UrlBar .Secure
{
	visibility: visible;
	wash-color: #82ba38;
}

.HtmlCertError #UrlBar .Insecure
{
	visibility: visible;
	wash-color: #ff0000ff; 
}

#MousePanningImage
{
	wash-color: #ffffffff; 
	visibility: visible;
	width: mousepanningcursorsize;
	height: mousepanningcursorsize;
	z-index: 10;
	opacity: 0.0;
	transition-property: opacity;
	transition-duration: 0.4s;
	transition-timing-function: bigpicture-ease-in-out;
}

.MousePanning #MousePanningImage
{
	opacity: 1.0;
}

// 
//
// Reticule animation
//
//
#ReticuleLoadingContainer
{
	visibility: visible;
	width: 66px;
	height: 66px;
	background-color: #000000ff;
	opacity-mask: url( "file://{images}/browser/reticle_mask.png" ) 1.0;
	background-repeat: no-repeat;
	opacity: 0.0;
	background-size: 66px 66px;
}

.ShowControllerLoadingSpinner #ReticuleLoadingContainer
{
	opacity: 1.0;
}

#Spinner
{
	width: 54px;
	height: 54px;
	background-color: #000000ff;
	opacity-mask: url( "file://{images}/browser/reticle_mask.png" ) 1.0;
	background-repeat: no-repeat;
	opacity: 0.0;
	background-size: 54px 54px;
	transform: translateY( -2px );
	margin-right: 10px;

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

.SpinnerMovie.ShowControllerLoadingSpinner #ReticuleLoadingContainer, .SpinnerMovie.ShowMouseLoadingSpinner #Spinner
{
	background-image: url( "file://{images}/browser/reticle.webm" );
}

.ShowMouseLoadingSpinner #Spinner
{
	opacity: 1.0;
}

Tooltip
{
	border-radius: 5px;
	font-size: 20px;

}

.LegendButtonBox Label
{
	horizontal-align: center;
	vertical-align: center;
	color: tclegendlabel; 
	font-family: "Motiva Sans";
}

.TriggerButtonBox
{
	border-radius: 6px;
	border: 2px solid #00000000;
	width: 42px;
	height: 30px;
	text-align: center;
	margin-left: 8px;
	margin-right: 8px;
	margin-top: 1px;
	margin-bottom: 3px;
	box-shadow: #EEEEEE60 -5px -5px 6px 10px;
}

#LBInnerWrapper, #RBInnerWrapper
{
	margin-left: 0px;
	margin-right: 0px;
	vertical-align: center;
	horizontal-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	wash-color: #878c8eff;
}

.LeftTabAvailable #LBInnerWrapper
{
		wash-color: none;
}

.RightTabAvailable #RBInnerWrapper
{
		wash-color: none;
}

#TabBar
{
	opacity: 0;
}

.MultipleTabs #TabBar
{
	opacity: 1.0;
}

#TabPosition
{
	width: 120px;
	text-align: center;
	margin-right: 5px;
	margin-left: 5px;
}

WebBrowser MouseScrollRegion
{
	visibility: collapse;
}

.VR MouseScrollRegion.BrowserScroller
{
	visibility: visible;
}


.TopMouseScrollRegion
{
	transform: none;
}