/* styles for the movie player */

// This is really used in intromovie.css, but something is broken in finding animation keyframes in parent css files
@keyframes 'intro-fade-in'
{
	0%
	{
		opacity: 0.0;
	}

	100%
	{
		opacity: 1.0;
	}
}

@keyframes 'movie-button-focus'
{
	from
	{
		background-color: gradient( linear, -0% 0%, 0% 100%, from( #f0f0f0 ), to( #c2c2c2 ) ); 
	}

	50%
	{
		background-color: gradient( linear, -0% 0%, 0% 100%, from( #f0f0f0 ), to( #c2c2c2 ) ); 
	}

	to
	{
		background-color: gradient( linear, -0% 0%, 0% 100%, from( #f0f0f0 ), to( #c2c2c2 ) ); 
	}
}

@keyframes 'control-outer-glow'
{
	0%
	{
		box-shadow: box_shadow_on_color -2.0px -2.0px 8px 4px;
	}

	8%
	{
		box-shadow: box_shadow_on_color -2.0px -2.0px 8px 4px;
	}

	48%
	{
		box-shadow: box_shadow_on_color -1.0px -1.0px 4px 2px;
	}

	52%
	{
		box-shadow: box_shadow_on_color -1.0px -1.0px 4px 2px;
	}

	100%
	{
		box-shadow: box_shadow_on_color -2.0px -2.0px 8px 4px;
	}
}


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

MoviePanel
{
	width: 100%;
	height: 100%;
	background-color: black;
}

#PlayIndicator
{
	width: 40%;
	height: 40%;
	align: center center;

	opacity: 0.0;

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


.MoviePaused #PlayIndicator
{
	background-image: url( "file://{images}/library/library_play_button.png" );
	background-position: center;
	background-repeat: no-repeat;

	opacity: 1.0;
}

@keyframes 'throbber-appear-delay'
{
	from
	{
		opacity: 0.0;
	}

	50%
	{
		opacity: 0.0;
	}

	to
	{
		opacity: 1.0;
	}
}

LoadingThrobber
{
	opacity: 0.0;
	align: center center;
}

.MovieBuffering LoadingThrobber,
.BroadcastLoading 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;
}

.MovieBuffering #PlayIndicator
{
	opacity: 0.0;
}

#ErrorMessage
{
	width: 80%;
	font-size: 32px;
	color: white;
	align: center center;
	text-align: center;

	opacity: 0.0;

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

.MovieError #ErrorMessage
{
	opacity: 1.0;
}

.MovieError #PlayIndicator
{
	opacity: 0.0;
}

//
// Title section
//
#PlaybackTitleAndControls
{
	width: 100%;
	flow-children: down;
	vertical-align: bottom;

	transform: translatey( 327px );

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

.ShowTitle #PlaybackTitleAndControls
{
	transform: translatey( 0px );
}

.TitleImmediatelyVisible #PlaybackTitleAndControls
{
	transform: translatey( 0px );
	transition-property: transform !immediate;
	transition-duration: 0.0s;
}

.PlaybackTitleGlow
{
	width: 100%;
	height: 77px;
	vertical-align: top;
	background-image: url( "file://{images}/store/slideshow_glow.png" );
	background-color: none;
}

.PlaybackTitleBackground
{
	width: 100%;
	height: 250px;
	vertical-align: bottom;
	background-color: slideshow_bg;
	flow-children: down;
}

#PlaybackTitle
{
	font-size: 58px;
	color: applabel;
	font-weight: light;
	width: 100%;
	height: 80px;
	margin: 20px 104px 10px 104px;
}


//
// Playback controls
//
#PlaybackControls
{
	align: center top;
	flow-children: down;
}

.PlaybackControl
{
	opacity: 0.0;

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

.PlaybackControl.Visible
{
	opacity: 1.0;
}

#Timeline
{
	width: 547px;
	height: 20px;

	border: 2px solid black;
	padding: 2px;
	margin: 0px 6px 0px 6px;
	background-color: black;
	border-radius: 4px;
}

.ProgressBarWrapper
{
	width: 100%;
	height: 100%;
}

#PlaybackProgress
{
	width: 100%;
	height: 100%;

	transform-origin: 0% 0% parent-relative;
	background-color: ui_common_control_bright;
}

#ControlBarRow
{
	// padding to allow glow & scaling of buttons
	margin-top: 3px;
	padding: 6px;
	flow-children: right;
	align: center top;
}

#ControlBar
{
//	padding: 6px;
}

.ControlBarBackground
{
	width: 300px;
	height: 50px;
	background-color: black;
	border-radius: 6px;
}

.ControlBarButtons
{
	flow-children: right;
}

.ControlBarButton
{
	width: 60px;
	height: 50px;
	border: 2px solid #00000000;

	transition-property: pre-transform-scale2d;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

.ControlBarButton:focus
{
	background-color: gradient( linear, -0% 0%, 0% 100%, from( #f0f0f0 ), to( #c2c2c2 ) );
	pre-transform-scale2d: 1.0;
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
	border-color: #fdfefef0;

	animation-name: movie-button-focus, 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;
}

.ControlBarButton Image,
#VolumeControl .VolumeImage
{
	width: 37px;
	height: 37px;
	align: center center;
	pre-transform-scale2d: 0.8;
}

.ControlBarButton:focus Image,
#VolumeControl:focus .VolumeImage
{
	wash-color: #000000ff;
}

#VolumeControl .VolumeImage
{
	background-image: url( "file://{images}/transport_controls/icon_volume_04.png" );
}

#VolumeControl.AudioVolumeMuted .VolumeImage
{
	background-image: url( "file://{images}/transport_controls/icon_volume_01.png" );
}

#VolumeControl.AudioVolumeUnder33 .VolumeImage
{
	background-image: url( "file://{images}/transport_controls/icon_volume_02.png" );
}

#VolumeControl.AudioVolumeUnder66 .VolumeImage
{
	background-image: url( "file://{images}/transport_controls/icon_volume_03.png" );
}

#PlayPause .TickBox
{
	width: 37px;
	height: 37px;
	pre-transform-scale2d: 0.8;
	align: center center;
	border-color: none;
	box-shadow: none;
	margin: 0px;
	background-color: none;
	background-image: url( "file://{images}/transport_controls/icon_pause.png" );
}

#PlayPause:selected .TickBox
{
	background-image: url( "file://{images}/transport_controls/icon_play.png" );
}

#PlayPause:descendantfocus .TickBox
{
	wash-color: #000000ff;
	background-color: none;
}

#JumpBack
{
	border-radius: 6px 0px 0px 6px;
}

#VolumeControl
{
	border-radius: 0px 6px 6px 0px;
}

#PlaybackSpeed
{
	align: center center;
	font-size: 26px;
	margin-bottom: 4px;
	color: gradient( linear, 0% 0%, 0% 100%, from( #ffffffff ), to( #999999ff ) );
}

#VideoQualityCurrent
{
	align: center center;
	font-size: 18px;
	margin-bottom: 4px;
	color: gradient( linear, 0% 0%, 0% 100%, from( #ffffffff ), to( #999999ff ) );
}

#VideoQualityBtn:focus #VideoQualityCurrent
{
	color: black;
}

#FullscreenControl
{
	visibility: collapse;
}


//
// VolumeSliderPopup
//
VolumeSliderPopup
{
	width: 100%;
	height: 100%;
}

VolumeSliderPopup .PopupWrapper
{
	width: 60px;
	height: 150px;

	background-color: gradient( linear, -0% 0%, 0% 100%, from( #f0f0f0 ), to( #c2c2c2 ) );
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
	border: 2px solid #fdfefef0;
	border-radius: 4px;

	transform: translatey( -10px );
}

VolumeSliderPopup Slider
{
	align: center center;
}

//
// VideoQualityPopup
//
VideoQualityPopup
{
	width: 100%;
	height: 100%;
	transform: translatex( -10px );
}

VideoQualityPopup .PopupWrapper
{
	min-width: 80px;
	flow-children: down;
	padding: 0px 6px;

	background-color: gradient( linear, -0% 0%, 0% 100%, from( #f0f0f0 ), to( #c2c2c2 ) );
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
	border: 2px solid #fdfefef0;
	border-radius: 4px;

	transform: translatey( -10px );
}

VideoQualityPopup #CenterColumn
{
	horizontal-align: center;
	flow-children: down;
}


//
// Video Quality Popup Buttons
//
VideoQualityPopup Label
{
	font-size: 24px;
	font-weight: bold;
	color: #2a3d4b;
}

VideoQualityPopup Button:focus Label
{
	color: #5490ac;
}

VideoQualityPopup Button:hover Label
{
	color: #78cdf5;
}


VideoQualityPopup Button
{
	horizontal-align: right;
	margin: 2px 0px 2px 0px;
}

//
// Debug
//
MovieDebug
{
	width: 100%;
	height: 100%;
}

MovieDebug Label
{
	font-size: 24px;
	color: white;
}

.DebugBackground
{
	padding: 10px;
	background-color: #000000a0;
	flow-children: right;
}

.DebugColumn
{
	flow-children: down;
	margin-right: 10px;
}


//
// Broadcast
//
BroadcastViewer .ChatVisible MoviePanel
{
	width: fill-parent-flow( 1.0 );
	height: width-percentage ( 56.25% );
	align: center center;	
}

BroadcastViewer .ControlBarBackground
{
	width: 180px;
	background-color: #222222;
}

BroadcastViewer #JumpBack,
BroadcastViewer #PlayPause,
BroadcastViewer #FastForward
{
	visibility: collapse;
}

BroadcastViewer #VideoQualityBtn
{
	border-radius: 6px 0px 0px 6px;
}

BroadcastViewer #VolumeControl
{
	border-radius: 0px;
}

BroadcastViewer #FullscreenControl
{
	visibility: visible;
	border-radius: 0px 6px 6px 0px;
}

BroadcastViewer .PlaybackTitleGlow
{
	visibility: collapse;
}

BroadcastViewer .PlaybackTitleBackground
{
	height: 144px;
	background-color: none;
	flow-children: none;
}

BroadcastViewer .Fullscreen .PlaybackTitleBackground
{
	background-color: slideshow_bg;
}

BroadcastViewer #PlaybackSpeed
{
	visibility: collapse;
}

BroadcastViewer #Timeline
{
	visibility: collapse;
}

BroadcastViewer #PlaybackControls
{
	align: right top;
	margin-top: 24px;
}

BroadcastViewer #PlaybackTitle
{
	margin: 10px 200px 0px 20px;
	font-size: 30px;
	height: 40px;	
}

BroadcastViewer .ChatVisible #PlaybackTitleAndControls
{
	transform: none;
}

BroadcastViewer .ChatVisible .ShowTitle #PlaybackTitleAndControls
{
	opacity: 1.0;
}

BroadcastViewer #PlaybackTitleAndControls
{
	transform: translatey( 327px );
	opacity: 1.0;
}

BroadcastViewer .PlaybackControl
{
	opacity: 1.0;
}

BroadcastViewer .PlaybackError LoadingThrobber
{
	opacity: 0.0;
}

BroadcastViewer #ErrorMessage
{
	visibility: collapse;
}

/* Styles for broadcast view panel */

#BroadcastMovieAndChat
{
	width: 100%;
	height: 100%;
	flow-children: right;

	animation-name: particle-system-anim;
	animation-duration: 15.0s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

#BroadcastMoviePlayer
{
	width: fill-parent-flow( 1.0 );
	height: 100%;
}

#BroadcastMoviePlayer .AppTitle
{
	color: #72899e;
}


#BroadcasterPanel
{
	flow-children: right;
	margin: 60px 0px 0px 20px;
}

#BroadcasterPanel .AppHubCardAvatar
{
	height: 90px;
	width: 90px;
	border-width: 4px;
	border-style: solid;
}

.online .AppHubCardAvatar
{
	border-color: friendsonline_solid;
}

.offline .AppHubCardAvatar
{
	border-color: friendsoffline_solid;
}

.in-game .AppHubCardAvatar
{
	border-color: friendsingame_solid;
}

#BroadcasterPanel .AppHubCardBroadcaster
{
	padding-left: 10px;
	vertical-align: center;
	font-size: 32px;
}

.online .AppHubCardBroadcaster
{
	color: friendsonline_darkbg;
}

.offline .AppHubCardBroadcaster
{
	color: friendsoffline_darkbg;
}

.in-game .AppHubCardBroadcaster
{
	color: friendsingame_darkbg;
}

#BroadcastStatusPanel
{
	opacity: 0.0;
	align: center center;
	font-size: 30px;
	color: ui_primary_color;
	width: 100%;
	height: 100%;
}

.ChatVisible #BroadcastStatusPanel
{
	width: 1400px;
	height: width-percentage ( 56.25% );
	align: center center;
}

.PlaybackError #BroadcastStatusPanel
{
	opacity: 1.0;
	transform: none;
	background-color: #000000c0;
	font-style: italics;
}

.BroadcastLoading #BroadcastStatusPanel
{
	opacity: 1.0;
}

#BroadcastStatusText
{
	align: center center;
	transform: translatey( 110px );
}

.Unstarted #BroadcastStatusText
{
	transform: translatey( 0px );
}

.PlaybackError #BroadcastStatusText
{
	transform: none;
}

#ChatPanel
{
	width: 0%;
	padding: 6px;
}

.ChatVisible #ChatPanel
{
	horizontal-align: right;
	vertical-align: top;
	z-index: 100;
	width: 520px;
	height: 100%;
}

#BroadcasterPanel .AppHubCardAvatar
{
	width: 50px;
	height: 50px;
}

#ViewersIcon
{
	width: 40px;
	height: 36px;
	align: left top;
	margin-left: 20px;
	margin-top: 10px;
}

#ViewerCount
{
	margin-left: 3px;
	margin-right: 10px;
	color: foregroundgray;
	font-size: 36px;
	align: left center;
}


#LoadingThrobber,
.Unstarted #LoadingThrobber.Visible
{
	visibility: collapse;
}

#LoadingThrobber.Visible
{
	visibility: visible;
}