/*	footer css style */

TenfootFooterPanel
{
	width: 100%;
	height: 100px;
	vertical-align: bottom;
	opacity: 1.0;

	z-index: footer_zindex;

	background-color: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #06192edd ), color-stop( 1.0, #051424dd ) );
	box-shadow: fill #00000066 -4px -4px 6px 6px;
	padding-top: 15px;

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

TenfootFooterPanel.FooterEmpty, TenfootFooterPanel.Hide
{
	opacity: 0.0;
}

TenfootFooterPanel.WebFooter
{
	background-color: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #06192eff ), color-stop( 1.0, #051424ff ) );
}


#A_btn_s.SemiTransparent,
#B_btn_s.SemiTransparent,
#X_btn_s.SemiTransparent,
#Y_btn_s.SemiTransparent
{
	opacity: 0.6;
}


.Show.Anim_LT_btn #LB_btn, .Show.Anim_LT_txt #LB_txt,
.Show.Anim_RT_btn #RB_btn, .Show.Anim_RT_txt #RB_txt,
.Show.Anim_MID #A_btn, .Show.Anim_MID #A_txt,
.Show.Anim_MID #B_btn, .Show.Anim_MID #B_txt,
.Show.Anim_MID #X_btn, .Show.Anim_MID #X_txt,
.Show.Anim_MID #Y_btn, .Show.Anim_MID #Y_txt,
.Show.Anim_MID #A_btn_s, .Show.Anim_MID #A_txt_s,
.Show.Anim_MID #B_btn_s, .Show.Anim_MID #B_txt_s,
.Show.Anim_MID #X_btn_s, .Show.Anim_MID #X_txt_s,
.Show.Anim_MID #Y_btn_s, .Show.Anim_MID #Y_txt_s,
.Show.Anim_MID #RT_btn, .Show.Anim_MID #RT_txt,
.Show.Anim_MID #LT_btn, .Show.Anim_MID #LT_txt,
.Show.Anim_MID #START_btn, .Show.Anim_MID #START_txt,
.Show.Anim_MID #BACK_btn, .Show.Anim_MID #BACK_txt,
.Show.Anim_RT_txt #RightLegend .FriendsNotifications,
.Show.WebFooter.Anim_MID #MiddleLegend, .Show.WebFooter.Anim_RT_txt #RightLegend,
.FooterDefault
{
	animation-name: footer-fade-in; 
	animation-duration: 0.3s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: 1;
	animation-direction: normal;
}

.Show.Anim_MID #A_btn_s.SemiTransparent,
.Show.Anim_MID #B_btn_s.SemiTransparent,
.Show.Anim_MID #X_btn_s.SemiTransparent,
.Show.Anim_MID #Y_btn_s.SemiTransparent
{
	animation-name: footer-fade-in-semi;
}


@keyframes 'footer-fade-in'
{
	from
	{
		opacity: 0.0;
		pre-transform-scale2d: 1.0, 0.03;
	}

	50%
	{
		opacity: 0.0;
		pre-transform-scale2d: 1.0, 0.03;
	}

	to
	{
		opacity: 1.0;
		pre-transform-scale2d: 1.0;
	}
}

@keyframes 'footer-fade-in-semi'
{
	from
	{
		opacity: 0.0;
		pre-transform-scale2d: 1.0, 0.03;
	}

	50%
	{
		opacity: 0.0;
		pre-transform-scale2d: 1.0, 0.03;
	}

	to
	{
		opacity: 0.6;
		pre-transform-scale2d: 1.0;
	}
}

.Hide #LT_btn, .Hide #LT_txt,
.Hide #RT_btn, .Hide #RT_txt,
.Hide #A_btn, .Hide #A_txt,
.Hide #B_btn, .Hide #B_txt,
.Hide #X_btn, .Hide #X_txt,
.Hide #Y_btn, .Hide #Y_txt,
.Hide #A_btn_s, .Hide #A_txt_s,
.Hide #B_btn_s, .Hide #B_txt_s,
.Hide #X_btn_s, .Hide #X_txt_s,
.Hide #Y_btn_s, .Hide #Y_txt_s,
.Hide #RB_btn, .Hide #RB_txt,
.Hide #LB_btn, .Hide #LB_txt,
.Hide #START_btn, .Hide #START_txt,
.Hide #BACK_btn, .Hide #BACK_txt,
.Hide #RightLegend .FriendsNotifications,
.Hide.WebFooter #MiddleLegend, .Hide.WebFooter #RightLegend,
.FooterVisible
{
	opacity: 0.0;
	pre-transform-scale2d: 1.0, 0.03;
}

.Hide.Anim_LT_btn #LB_btn, .Hide.Anim_LT_txt #LB_txt,
.Hide.Anim_RT_btn #RB_btn, .Hide.Anim_RT_txt #RB_txt,
.Hide.Anim_MID #A_btn, .Hide.Anim_MID #A_txt,
.Hide.Anim_MID #B_btn, .Hide.Anim_MID #B_txt,
.Hide.Anim_MID #X_btn, .Hide.Anim_MID #X_txt,
.Hide.Anim_MID #Y_btn, .Hide.Anim_MID #Y_txt,
.Hide.Anim_MID #A_btn_s, .Hide.Anim_MID #A_txt_s,
.Hide.Anim_MID #B_btn_s, .Hide.Anim_MID #B_txt_s,
.Hide.Anim_MID #X_btn_s, .Hide.Anim_MID #X_txt_s,
.Hide.Anim_MID #Y_btn_s, .Hide.Anim_MID #Y_txt_s,
.Hide.Anim_MID #RT_btn, .Hide.Anim_MID #RT_txt,
.Hide.Anim_MID #LT_btn, .Hide.Anim_MID #LT_txt,
.Hide.Anim_MID #START_btn, .Hide.Anim_MID #START_txt,
.Hide.Anim_MID #BACK_btn, .Hide.Anim_MID #BACK_txt,
.Hide.Anim_RT_txt #RightLegend .FriendsNotifications,
.Hide.WebFooter.Anim_MID #MiddleLegend, .Hide.WebFooter.Anim_RT_txt #RightLegend,
.FooterVisible
{
	animation-name: footer-fade-in; 
	animation-duration: 0.3s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: 1;
	animation-direction: reverse;
}

.Hide.Anim_MID #A_btn_s.SemiTransparent,
.Hide.Anim_MID #B_btn_s.SemiTransparent,
.Hide.Anim_MID #X_btn_s.SemiTransparent,
.Hide.Anim_MID #Y_btn_s.SemiTransparent
{
	animation-name: footer-fade-in-semi;
}


#LegendRow
{
	opacity: 1.0;
	width: 100%;
	height: 123px;
	margin-left: 99px;
	margin-right: 99px;

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

.LegendButton Label
{
	vertical-align: center;
	font-size: 22px;
	margin-left: 20px;
	margin-right: 0px;
	margin-bottom: 2px;
	padding-top: 3px;
	padding-bottom: 2px;
	color: tclegendlabel;
}

.LegendButton Label
{
	vertical-align: center;
	margin-right: 20px;
	margin-top: 2px;
}

.LegendButton Button Label
{
}


#LegendRow Panel
{
	vertical-align: center;
	flow-children: right;
	z-index: 10;
}

#LegendRow Label.LegendButtonBox
{
	horizontal-align: center;
	vertical-align: center;
	color: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #072e47ff ), color-stop( 1.0, #000000ff ) );
	font-family: "Motiva Sans";
}



#LegendRow Label.LegendButtonBox.AButtonBox {
	color: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #072e47ff ), color-stop( 1.0, #000000ff ) );
	background-color: legendbuttongreen;
}
#LegendRow Label.LegendButtonBox.BButtonBox {
	color: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #072e47ff ), color-stop( 1.0, #000000ff ) );
	background-color: legendbuttonred;
}
#LegendRow Label.LegendButtonBox.XButtonBox {
	color: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #072e47ff ), color-stop( 1.0, #000000ff ) );
	background-color: legendbuttonblue;
}
#LegendRow Label.LegendButtonBox.YButtonBox {
	color: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #072e47ff ), color-stop( 1.0, #000000ff ) );
	background-color: legendbuttonyellow;
}

#LegendRow Label.LegendButtonBox.SwitchButtonBox,
#LegendRow Label.LegendButtonBox.MinusButtonBox,
#LegendRow Label.LegendButtonBox.PlusButtonBox
{
	border: 2px solid #606060ff;
	color: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #ccccccff ), color-stop( 1.0, #606060ff ) );
	background-color: #222222;
}


#RB_btn_ps4,
#LB_btn_ps4,
#A_btn_nintendo,  
#B_btn_nintendo, 
#X_btn_nintendo,
#Y_btn_nintendo,
#START_btn_nintendo,
#BACK_btn_nintendo,
{
    visibility: collapse;
}

.PS4Origin #LegendRow Label.LegendButtonBox.AButtonBox,  
.PS4Origin #LegendRow Label.LegendButtonBox.BButtonBox,
.PS4Origin #LegendRow Label.LegendButtonBox.XButtonBox,
.PS4Origin #LegendRow Label.LegendButtonBox.YButtonBox,
.PS4Origin #RB_btn_std,
.PS4Origin #LB_btn_std,
.NintendoOrigin #A_btn_std,  
.NintendoOrigin #B_btn_std, 
.NintendoOrigin #X_btn_std,
.NintendoOrigin #Y_btn_std,
.NintendoOrigin #START_btn_std,
.NintendoOrigin #BACK_btn_std,
{
    visibility: collapse;
}

.PS4Origin #LegendRow Label.LegendButtonBox.CrossButtonBox,  
.PS4Origin #LegendRow Label.LegendButtonBox.CircleButtonBox,
.PS4Origin #LegendRow Label.LegendButtonBox.SquareButtonBox,
.PS4Origin #LegendRow Label.LegendButtonBox.TriangleButtonBox,
.PS4Origin #RB_btn_ps4,
.PS4Origin #LB_btn_ps4,
{
    visibility: visible;
	font-family: "Noto Sans CJK JP Regular";
}

.NintendoOrigin #A_btn_nintendo,  
.NintendoOrigin #B_btn_nintendo, 
.NintendoOrigin #X_btn_nintendo,
.NintendoOrigin #Y_btn_nintendo,
.NintendoOrigin #RB_btn_nintendo,
.NintendoOrigin #LB_btn_nintendo,
.NintendoOrigin #START_btn_nintendo,
.NintendoOrigin #BACK_btn_nintendo,
{
    visibility: visible;
}

#LegendRow Label.LegendButtonBox.CrossButtonBox,  
#LegendRow Label.LegendButtonBox.CircleButtonBox,
#LegendRow Label.LegendButtonBox.SquareButtonBox,
#LegendRow Label.LegendButtonBox.TriangleButtonBox
{
	background-color: #111111;
    font-weight: bold;
    font-size: 28px;
    padding-top: -3px;
    color: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #072e47ff ), color-stop( 1.0, #000000ff ) );
    visibility: collapse;
    padding-left: 0.5px;
}


#LegendRow Label.LegendButtonBox.CrossButtonBox {
    border: 2px solid #4ca2ff95;
 //   border: 2px solid #a2b9ef77;
    font-size: 21px;
    color: #a2b9efee;
    padding-top: -0.5px;
}
#LegendRow Label.LegendButtonBox.CircleButtonBox {
    border: 2px solid #4ca2ff95;
 //   border: 2px solid #f8738277;
    color: #f87382ee;
    font-size: 32px;
    padding-top: -6.75px;
}
#LegendRow Label.LegendButtonBox.SquareButtonBox {
    border: 2px solid #4ca2ff95;
//    border: 2px solid #eba1e677;
    font-size: 44px;
    color: #eba1e6ee;
    padding-top: -20.5px;
}
#LegendRow Label.LegendButtonBox.TriangleButtonBox {
    border: 2px solid #4ca2ff95;
 //   border: 2px solid #30ffff77;
    color: #30ffffee;
    font-size: 30px;
    padding-top: -7.5px;
}

.OSX #LegendRow Label.LegendButtonBox.CrossButtonBox {
	font-size: 21px;
	padding-top: 2.6px;
	padding-left: 0.2px;
}
.OSX #LegendRow Label.LegendButtonBox.CircleButtonBox {
	font-size: 26px;
	padding-top: -2.2px;
	padding-left: -0.5px;
}
.OSX #LegendRow Label.LegendButtonBox.SquareButtonBox {
	font-size: 24px;
	padding-top: -0.2px;
	padding-left: -0.8px;
}
.OSX #LegendRow Label.LegendButtonBox.TriangleButtonBox {
	font-size: 26px;
	padding-top: -3.9px;
	padding-left: -.9px;
}

.Linux #LegendRow Label.LegendButtonBox.CrossButtonBox {
	font-size: 21px;
	padding-top: .5px;
	padding-left: -0.5px;
}
.Linux #LegendRow Label.LegendButtonBox.CircleButtonBox {
	font-size: 26px;
	padding-top: -2px;
	padding-left: -0.3px;
}
.Linux #LegendRow Label.LegendButtonBox.SquareButtonBox {
	font-size: 24px;
	padding-top: -0.8px;
	padding-left: -0.3px;
}
.Linux #LegendRow Label.LegendButtonBox.TriangleButtonBox {
	font-size: 26px;
	padding-top: -4px;
	padding-left: -0.3px;
}

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


#FriendsNotificationsCursor
{
	visibility: collapse;
}
.CursorVisible #FriendsNotificationsCursor
{
	visibility: visible;
}

#FriendsNotificationsGamepad
{
	visibility: visible;
}
.CursorVisible #FriendsNotificationsGamepad
{
	visibility: collapse;
}

#UnreadChatItems
{
	visibility: collapse;
}
.UnreadChatItems #UnreadChatItems
{
	visibility: visible;
}

#OngoingVoiceChatOnHold
{
	visibility: collapse;
}
.OngoingVoiceChatOnHold #OngoingVoiceChatOnHold
{
	visibility: visible;
}

#OngoingVoiceChat
{
	visibility: collapse;
}
.OngoingVoiceChat #OngoingVoiceChat
{
	visibility: visible;
}

#FriendsNotificationsCursor Image, #FriendsNotificationsGamepad Image
{
	width: 48px;
	height: 48px;
}

#LegendRow .TriggerButtonText
{
}

#LegendRow .RBButtonBox,
{
	border-radius: 4px;
	border: 2px solid #00000000;
	height: 34px;
	text-align: center;
	margin: 0px;
	margin-left: 8px;
	padding-right: 20px;
	width: 63px;
	border-top-right-radius: 35px 18px;

	color: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #072e47ff ), color-stop( 1.0, #000000ff ) );
	background-color: legendbuttongrey;

	box-shadow: #00000022 -3px -3px 4px 6px;
}

.PS4Origin #LegendRow .RBButtonBox
{
    border-top-left-radius: 20px 12px;
}

#LegendRow .LBButtonBox,
{
	border-radius: 4px;
	border: 2px solid #00000000;
	height: 34px;
	text-align: center;
	margin: 0px;
	margin-left: 8px;
	padding-left: 20px;
	width: 63px;
	border-top-left-radius: 35px 18px;

	color: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #072e47ff ), color-stop( 1.0, #000000ff ) );
	background-color: legendbuttongrey;

	box-shadow: #00000022 -3px -3px 4px 6px;
}

.PS4Origin #LegendRow .LBButtonBox
{
    border-top-right-radius: 20px 12px;
}

#LegendRow .AButtonBox,
#LegendRow .BButtonBox,
#LegendRow .XButtonBox,
#LegendRow .YButtonBox,
#LegendRow .CrossButtonBox,
#LegendRow .CircleButtonBox,
#LegendRow .SquareButtonBox,
#LegendRow .TriangleButtonBox,
#LegendRow .SwitchButtonBox,
#LegendRow .MinusButtonBox,
#LegendRow .PlusButtonBox
{
	border-radius: 50%;
	border: 2px solid #000000ff;
	width: 38px;
	height: 38px;
	text-align: center;
	margin: 0px;
	margin-left: 16px;
	margin-right: 2px;
	margin-top: 3px;
	box-shadow: #00000022 -3px -3px 4px 6px;
}

.OSX #LegendRow .AButtonBox,
.OSX #LegendRow .BButtonBox,
.OSX #LegendRow .XButtonBox,
.OSX #LegendRow .YButtonBox,
.OSX #LegendRow .CrossButtonBox,
.OSX #LegendRow .CircleButtonBox,
.OSX #LegendRow .SquareButtonBox,
.OSX #LegendRow .TriangleButtonBox,
.OSX #LegendRow .LBButtonBox,
.OSX #LegendRow .RBButtonText,
.OSX #LegendRow .TriggerButtonBox,
.OSX #LegendRow .SwitchButtonBox,
.Linux #LegendRow .AButtonBox,
.Linux #LegendRow .BButtonBox,
.Linux #LegendRow .XButtonBox,
.Linux #LegendRow .YButtonBox,
.Linux #LegendRow .LBButtonBox,
.Linux #LegendRow .RBButtonText,
.Linux #LegendRow .SwitchButtonBox
.Linux #LegendRow .TriggerButtonBox
{
	padding-top: 3px;
}

#LegendRow .STARTButtonBox,
#LegendRow .BACKButtonBox,
{
	border-radius: 16px;
	border: 2px solid #EEEEEEf0;
	width: 56px;
	height: 32px;
	text-align: center;
	wash-color: #878c8eff;
	margin: 6px;
	margin-left: 16px;
	margin-right: 2px;

	background-repeat: no-repeat;
	background-position: 55% 50%;
	padding: 0px;
   
	background-image: url( "file://{images}/footer/start.png" );
}


#LegendRow Label.LegendButtonBox.MinusButtonBox
{
	padding-top: -12px;
    font-size: 44px;
}

#LegendRow Label.LegendButtonBox.PlusButtonBox
{
	padding-top: -5px;
    font-size: 36px;
}


.PS4Origin #LegendRow .STARTButtonBox,
.PS4Origin #LegendRow .BACKButtonBox
{
	width: 20px;
	height: 34px;
    border-radius: 8px;
    background-size: 14px;
}
#LegendRow .BACKButtonBox
{
	background-position: 40% 50%;
	background-image: url( "file://{images}/footer/back_xinput.png" );
}

.OSX #LegendRow .STARTButtonBox,
.OSX #LegendRow .BACKButtonBox,
{
	font-size: 26px;
	padding-top: 0px;
	white-space: nowrap;
	
}


#LegendRow .BACKButtonBox
{
	padding-left: -3px;
}

#LegendRow .LBButtonText,
#LegendRow .AButtonText,
#LegendRow .BButtonText,
#LegendRow .XButtonText,
#LegendRow .YButtonText
#LegendRow .RBButtonText,
#LegendRow .STARTButtonText,
#LegendRow .BACKButtonText,
{
}

#LegendRow .LegendText
{
	margin-left: 8px;
	margin-right: 8px;
	vertical-align: center;
	font-size: 20;
	font-family: "Motiva Sans";
	color: tclegendlabel; 
}

#LegendRow #LeftLegend
{
	padding-top: 10px;
	padding-bottom: 10px;
	horizontal-align: left;
	vertical-align: top;
}

#LegendRow #MiddleLegend
{
	horizontal-align: center;
	vertical-align: top;
	flow-children: right;
	padding-top: 10px;
	padding-bottom: 10px;
}

#LegendRow #MiddleLegend #ABXY_Footer_Wrapper
{
	visibility: visible;
	flow-children: right;
}

.HideCenterGrid #A_btn_s,
.HideCenterGrid #B_btn_s,
.HideCenterGrid #X_btn_s,
.HideCenterGrid #Y_btn_s
{
	visibility: collapse;
	opacity: 0.0;
}


#LegendRow #RightLegend
{
	padding-top: 10px;
	padding-bottom: 10px;
	horizontal-align: right;
	vertical-align: top;
}

//
// Cursor visible section
//

.CursorVisible #LegendRow .TriggerButtonBox,
.CursorVisible #LegendRow .RBButtonBox,
.CursorVisible #LegendRow .LBButtonBox,
.CursorVisible #LegendRow .AButtonBox,
.CursorVisible #LegendRow .BButtonBox,
.CursorVisible #LegendRow .XButtonBox,
.CursorVisible #LegendRow .YButtonBox,
.CursorVisible #LegendRow .CrossButtonBox,
.CursorVisible #LegendRow .CircleButtonBox,
.CursorVisible #LegendRow .SquareButtonBox,
.CursorVisible #LegendRow .TriangleButtonBox,
.CursorVisible #LegendRow .SwitchButtonBox,
.CursorVisible.PS4Origin #LegendRow Label.LegendButtonBox.CrossButtonBox,
.CursorVisible.PS4Origin #LegendRow Label.LegendButtonBox.CircleButtonBox,
.CursorVisible.PS4Origin #LegendRow Label.LegendButtonBox.SquareButtonBox,
.CursorVisible.PS4Origin #LegendRow Label.LegendButtonBox.TriangleButtonBox,
.CursorVisible #LegendRow .STARTButtonBox,
.CursorVisible #LegendRow .BACKButtonBox,
{
	visibility: collapse;
}

.CursorVisible #LegendRow .TriggerButtonText,
.CursorVisible #LegendRow .RBButtonText,
.CursorVisible #LegendRow .LBButtonText,
.CursorVisible #LegendRow .AButtonText,
.CursorVisible #LegendRow .BButtonText,
.CursorVisible #LegendRow .XButtonText,
.CursorVisible #LegendRow .YButtonText,
.CursorVisible #LegendRow .STARTButtonText,
.CursorVisible #LegendRow .BACKButtonText,
{
	background-color: gradient( linear, 0% 0%, 0% 80%, from( #EEEEEE30 ), to( #EEEEEE00 ) );
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-radius: 5px;
	border: 2px solid #4F647200;
	box-shadow: none;
	
	transition-property: color, background-color, border, box-shadow;
	transition-timing-function: bigpicture-ease-in-out;
	transition-duration: 0.3s;
}

.CursorVisible #LegendRow .TriggerButtonText:hover,
.CursorVisible #LegendRow .RBButtonText:hover,
.CursorVisible #LegendRow .LBButtonText:hover,
.CursorVisible #LegendRow .AButtonText:hover,
.CursorVisible #LegendRow .BButtonText:hover,
.CursorVisible #LegendRow .XButtonText:hover,
.CursorVisible #LegendRow .YButtonText:hover,
.CursorVisible #LegendRow .STARTButtonText:hover,
.CursorVisible #LegendRow .BACKButtonText:hover,
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #6B869900 ), to( #30303000 ) );
	border: 2px solid #6B869900;
	color: #FFFFFFFF;
	box-shadow: #EEEEEE60 -5px -5px 6px 10px;
}


//
// Web Footer section
//

.WebFooter #MiddleLegend, .WebFooter #RightLegend, .WebFooterMenu #MiddleLegend
{

	padding: 20px;
	margin: -20px;
	margin-top: 0px;
	border-radius: 4px;
}