SteamControllerHUD
{
	width: 100%;
	height: 100%;
	background-color: #00000000;
	
	overflow: clip clip;
}

#ImageRefCountKeeper
{
	visibility: collapse;
}

#DPadBackground
{
	opacity: 0.0;
	
	x: 720px;
	y: 785px;
	
	width: 165px;
	height: 165px;
	
	border-radius: 50%;
	
	background-color: daisy_petal_color;
	
	transition-property: opacity;
	transition-duration: 0.5s;
	transition-timing-function: bigpicture-ease-in-out;
	
	border: 7px;
	border-style: solid;
	border-color: ui_primary_color;
}

.DPadVisible #DPadBackground
{
	opacity: 0.75;
}

#DPadContainer
{
	width: 100%;
	height: 100%;
	
	background-size: 105% 105%;
	background-repeat: no-repeat;
	background-position: center;
	
	background-image: url( "file://{images}/library/controller/hud/dpad_n.png" );
	
	wash-color: daisy_petal_color;
}

.North #DPadContainer
{
	background-image: url( "file://{images}/library/controller/hud/dpad_n.png" );
}

.South #DPadContainer
{
	background-image: url( "file://{images}/library/controller/hud/dpad_s.png" );
}

.East #DPadContainer
{
	background-image: url( "file://{images}/library/controller/hud/dpad_e.png" );
}

.West #DPadContainer
{
	background-image: url( "file://{images}/library/controller/hud/dpad_w.png" );
}

.North.West #DPadContainer
{
	background-image: url( "file://{images}/library/controller/hud/dpad_nw.png" );
}

.North.East #DPadContainer
{
	background-image: url( "file://{images}/library/controller/hud/dpad_ne.png" );
}

.South.West #DPadContainer
{
	background-image: url( "file://{images}/library/controller/hud/dpad_sw.png" );
}

.South.East #DPadContainer
{
	background-image: url( "file://{images}/library/controller/hud/dpad_se.png" );
}

#DPadContainer.Hover
{
	wash-color: daisy_petal_selection_color;
}

#DPadDeadZone
{
	vertical-align: center;
	horizontal-align: center;

	width: 100%;
	height: 100%;

	border-radius: 50%;
	background-color: daisy_petal_color;
	
	border: 2px;
	border-style: solid;
	border-color: black;
}

#DPadDeadZone.Hover
{
	background-color: daisy_petal_selection_color;
}

#DPadCrossHair
{
	width: 12px;
	height: 12px;
	
	visibility: collapse;
	
	border-radius: 50%;
	background-color: ui_primary_color;
	
	vertical-align: center;
	horizontal-align: center;
}

.DPadVisible #DPadCrossHair
{
	visibility: visible;
}

#SquareDPadContainer
{
	visibility: collapse;
	
	width: 100%;
	height: 100%;
	
	flow-children: down;
}

.SquareDPad #SquareDPadContainer
{
	visibility: visible;
}

#RadialDPadContainer
{
	visibility: visible;
	
	width: 100%;
	height: 100%;
}

.SquareDPad #RadialDPadContainer
{
	visibility: collapse;
}

.SquareDPadRow
{
	flow-children: right;
	
	width: 100%;
	height: fill-parent-flow( 1.0 );
}

#SquareDPadN
{
	border-top-width: 0px;
}

#SquareDPadW
{
	border-left-width: 0px;
}
#SquareDPadE
{
	border-right-width: 0px;
}
#SquareDPadS
{
	border-bottom-width: 0px;
}

#SquareDPadCenterRow
{
	height: 20%;
}

.SquareDPadSection
{
	
	width: fill-parent-flow( 1.0 );
	height: 100%;
	
	background-color: daisy_petal_color;
	
	border: 2px;
	border-style: solid;
	border-color: black;
}

.North #SquareDPadN,
.South #SquareDPadS,
.West #SquareDPadW,
.East #SquareDPadE,
.North.West #SquareDPadNW,
.North.East #SquareDPadNE,
.South.West #SquareDPadSW,
.South.East #SquareDPadSE,
.Center #SquareDPadCenter
{
	background-color: daisy_petal_selection_color;
}

.North.West #SquareDPadN,
.North.West #SquareDPadW,
.North.East #SquareDPadN,
.North.East #SquareDPadE,
.South.West #SquareDPadS,
.South.West #SquareDPadW,
.South.East #SquareDPadS,
.South.East #SquareDPadE,
{
	background-color: daisy_petal_color;
}

.StickContainer
{
	width: 250px;
	height: 250px;
	
	opacity: 0.0;
	
	background-image: url( "file://{images}/library/controller/api/joy_stick_well.png" );
	background-size: 65% 65%;
	background-repeat: no-repeat;
	background-position: center;
	
	transition-property: opacity;
	transition-duration: 0.5s;
	transition-timing-function: bigpicture-ease-in-out;
}

.StickCap
{
	width: 64%;
	height: 64%;
	
	vertical-align: center;
	horizontal-align: center;
	
	background-image: url( "file://{images}/library/controller/api/joy_stick_float.png" );
	background-size: 100% 100%;
}

#RightStickContainer
{
	x: 1000px;
	y: 745px;
}

#KeyboardContainer
{
	width: 500px;
	height: 800px;
	
	x: 160px;
	y: 150px;
}

#KeyDownRow
{
	width: 100%;
	height: 100%;
	
	vertical-align: bottom;
	flow-children: down;
}

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

.KeyContainer
{
	width: 500px;
	height: 100px;
	border-radius: 10px;
	
	margin-top: 15px;
	
	background-color: #072135bb;
	
	flow-children: right;
	vertical-align: bottom;
	
	opacity: 0.0;
	
	transition-property: opacity, position, transform;
	transition-duration: 0.1s;
	transition-timing-function: bigpicture-ease-in-out;
	
	transform: translatey( 100px );
}

.KeyContainer.KeyContainerSettled
{
	opacity: 0.75;

	transform: translatey( 0px );
	
	transition-property: position;
	transition-duration: 0.15s;
	transition-timing-function: bigpicture-ease-in-out;
}

.KeyContainer.KeyContainerDestructing
{
	opacity: 0.0;
	
	transition-property: opacity, position, transform !immediate;
	transition-duration: 0.4s;
	
	transform: translatey( -100px );
}

.Key
{
	width: 75px;
	height: 75px;
	margin: 15px;
	
	background-image: url( "file://{images}/library/controller/api/button_kb.png" );
	background-size: 100% 100%;
}

.KeyCap
{
	color: ui_primary_color;
	font-size: 38px;
	font-family: platformfont;
	
	vertical-align: center;
	horizontal-align: center;
}

.KeyDescription
{
	margin-left: 15px;
	vertical-align: center;
	
	color: tclegendlabel;
	font-size: 38px;
	font-family: platformfont;
}

#HUDHelpTextContainer
{
	x: 200px;
	y: 900px;
	
	width: fit-children;
	height: fit-children;
	
	border-radius: 10px;
	
	background-color: #072135bb;
}

#HUDHelpText
{
	color: tclegendlabel;
	font-size: 25px;
	font-family: platformfont;
	
	vertical-align: center;
	horizontal-align: center;
	
	margin: 15px;
	
	opacity: 0.75;
}

.MouseRegion
{
	visibility: visible;
	opacity: 0.75;
	background-color: #07213588;
	border-radius: 50%;
	
	border: 7px;
	border-style: solid;
	border-color: ui_primary_color;
}

.MouseRegion.MouseRegionRectangle
{
    visibility: visible;
    opacity: 0.75;
    background-color: #07213588;
    border-radius: 2%;
    border: 7px;
    border-style: solid;
    border-color: ui_primary_color;
}

.MouseRegion.MouseRegionEdgeBinding
{
	border: 5px;
	border-color: daisy_petal_selection_color;
	background-color: #00000000;
}

// Action set indicator styles

#ActionSetFadeMask
{
	background-color: #072135bb;
	
	width: 500px;
	height: 200px;
	
	x: 710px;
	y: 800px;
	
	opacity-mask: url( "file://{images}/overlay/actionset_fademask.png" );
	
	opacity: 0.95;
	
	transition-property: opacity;
	transition-duration: 0.1s;
	transition-timing-function: bigpicture-ease-in-out;
}

#ActionSetFadeMask.FadeOut
{
	opacity: 0.0;
}

#ActionSetLabelsContainer
{
	width: fit-children;
	height: fit-children;
	
	y: -20px;
	
	horizontal-align: center;
	
	flow-children: down;
	
	transition-property: position;
	transition-duration: 0.1s;
	transition-timing-function: bigpicture-ease-in-out;
	
	overflow: noclip;
}

.ActionSetLabel
{
	margin-left: 15px;
	vertical-align: center;
    padding-left: 25px;
    padding-right: 25px;
	
	color: tclegendlabel;
	font-size: 38px;
	font-family: platformfont;
    text-overflow: ellipsis;
	
	horizontal-align: center;
}