"resource/layout/gamespage_details_subheader.layout"
{
	controls
	{
		subheaderlabels { controlname="CDetailsSubHeaderLabelsPanel" }

		launchbutton { controlname="Button" labeltext="#Steam_LaunchGame" style="detailsLaunchButton" tabposition=2 command="RunGameAction" }
		installbutton { controlname="Button" labeltext="#Steam_Install" style="detailsInstallButton" tabposition=3 command="RunGameAction" }
		preloadbutton { controlname="Button" labeltext="#Steam_Preload" style="detailsInstallbutton" tabposition=4 command="RunGameAction" }
		activateguestpassbutton { controlname="Button" labeltext="#Steam_ActivateGuestPass" style="detailsbutton" tabposition=5 command="RunGameAction" }
		purchasebutton { controlname="Button" labeltext="#Steam_Purchase" style="detailsBuyButton" tabposition=6 command="RunGameAction" }
	}

	colors
	{
		GameDetailsSubHeader.HorizontalSpacing=10
		GameDetailsSubHeader.VerticalMargin=0
	}

	styles
	{
		CDetailsGameSubHeaderPanel
		{
			bgcolor=DarkDialogBGTransparent
		}

		DetailsButton
		{   
			inset="-3 0 0 0"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="Text"
			font-style=uppercase
			bgcolor=none

			render_bg
			{
				// background fill
				0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonface2, almostblack )"

				1="fill( x0 + 2, y0, x1 - 2, y0 + 1, ButtonBorder )"  // top
				2="fill( x0 + 2, y1 - 1, x1 - 2, y1, ButtonBorder )"  // bottom
				3="fill( x0, y0 + 2, x0 + 1, y1 - 2, ButtonBorder )"  // left
				4="fill( x1 - 1, y0 + 2, x1, y1 - 2, ButtonBorder )"  // right
				
				5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonBorder )"
				6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorder )"
				7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonBorder )"
				8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorder )"
				9="fill( x0, y0 + 1, x0 + 1, y0 + 2, ButtonFace2 )"
				10="fill( x1 - 1, y0 + 1, x1, y0 + 2, ButtonFace2 )"
				11="fill( x0, y1 - 2, x0 + 1, y1 - 1, ButtonFace2 )"
				12="fill( x1 - 1, y1 - 2, x1, y1 - 1, ButtonFace2 )"
				13="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonFace2 )"
				14="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonFace2 )"
				15="fill( x0 + 1, y1 - 1, x0 + 2, y1, ButtonFace2 )"
				16="fill( x1 - 2, y1 - 1, x1 - 1, y1, ButtonFace2 )"
			}	
		}
		
		DetailsButton:hover
		{
			textcolor="TextHover"
			bgcolor=none
			render_bg
			{
				// background fill
				0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonfaceactive, almostblack )"

				// lines around
				1="fill( x0 + 2, y0, x1 - 2, y0 + 1, ButtonBorderFocus )"  // top
				2="fill( x0 + 2, y1 - 1, x1 - 2, y1, ButtonBorderFocus )"  // bottom
				3="fill( x0, y0 + 2, x0 + 1, y1 - 2, ButtonBorderFocus )"  // left
				4="fill( x1 - 1, y0 + 2, x1, y1 - 2, ButtonBorderFocus )"  // right
				
				5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonBorderFocus )"
				6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorderFocus )"
				7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonBorderFocus )"
				8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorderFocus )"
				9="fill( x0, y0 + 1, x0 + 1, y0 + 2, ButtonFace2 )"
				10="fill( x1 - 1, y0 + 1, x1, y0 + 2, ButtonFace2 )"
				11="fill( x0, y1 - 2, x0 + 1, y1 - 1, ButtonFace2 )"
				12="fill( x1 - 1, y1 - 2, x1, y1 - 1, ButtonFace2 )"
				13="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonFace2 )"
				14="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonFace2 )"
				15="fill( x0 + 1, y1 - 1, x0 + 2, y1, ButtonFace2 )"
				16="fill( x1 - 2, y1 - 1, x1 - 1, y1, ButtonFace2 )"
			}	
		}
		
		DetailsButton:selected
		{
			textcolor="texthover"
		}
		
		DetailsLaunchButton
		{   
			inset="23 0 0 0"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="Text"
			font-style=uppercase
			bgcolor=none

			render
			{
				1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_play )"
			}
			render_bg
			{
				// background fill
				0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonface2, almostblack )"

				// lines around
				1="fill( x0 + 2, y0, x1 - 2, y0 + 1, ButtonBorder )"  // top
				2="fill( x0 + 2, y1 - 1, x1 - 2, y1, ButtonBorder )"  // bottom
				3="fill( x0, y0 + 2, x0 + 1, y1 - 2, ButtonBorder )"  // left
				4="fill( x1 - 1, y0 + 2, x1, y1 - 2, ButtonBorder )"  // right
				
				5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonBorder )"
				6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorder )"
				7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonBorder )"
				8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorder )"
				9="fill( x0, y0 + 1, x0 + 1, y0 + 2, ButtonFace2 )"
				10="fill( x1 - 1, y0 + 1, x1, y0 + 2, ButtonFace2 )"
				11="fill( x0, y1 - 2, x0 + 1, y1 - 1, ButtonFace2 )"
				12="fill( x1 - 1, y1 - 2, x1, y1 - 1, ButtonFace2 )"
				13="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonFace2 )"
				14="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonFace2 )"
				15="fill( x0 + 1, y1 - 1, x0 + 2, y1, ButtonFace2 )"
				16="fill( x1 - 2, y1 - 1, x1 - 1, y1, ButtonFace2 )"
			}	
		}
	
		DetailsLaunchButton:Hover
		{   
			inset="23 0 0 0"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="TextHover"
			font-style=uppercase
			bgcolor=none   

			render
			{
				1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_play_hover )"
			}
			render_bg
			{
				// background fill
				0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonfaceactive, almostblack )"

				// lines around
				1="fill( x0 + 2, y0, x1 - 2, y0 + 1, ButtonBorderFocus )"  // top
				2="fill( x0 + 2, y1 - 1, x1 - 2, y1, ButtonBorderFocus )"  // bottom
				3="fill( x0, y0 + 2, x0 + 1, y1 - 2, ButtonBorderFocus )"  // left
				4="fill( x1 - 1, y0 + 2, x1, y1 - 2, ButtonBorderFocus )"  // right
				
				5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonBorderFocus )"
				6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorderFocus )"
				7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonBorderFocus )"
				8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorderFocus )"
				9="fill( x0, y0 + 1, x0 + 1, y0 + 2, ButtonFace2 )"
				10="fill( x1 - 1, y0 + 1, x1, y0 + 2, ButtonFace2 )"
				11="fill( x0, y1 - 2, x0 + 1, y1 - 1, ButtonFace2 )"
				12="fill( x1 - 1, y1 - 2, x1, y1 - 1, ButtonFace2 )"
				13="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonFace2 )"
				14="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonFace2 )"
				15="fill( x0 + 1, y1 - 1, x0 + 2, y1, ButtonFace2 )"
				16="fill( x1 - 2, y1 - 1, x1 - 1, y1, ButtonFace2 )"
			}	
		}
		
		DetailsInstallButton
		{  
			
			inset="23 0 0 0"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="Text"
			font-style=uppercase
			bgcolor=none   
			render
			{
				1="image( x0 + 6, y0 + 3, x1, y1, graphics/icon_install)"
			}
			render_bg
			{
				// background fill
				0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonface2, almostblack )"

				// lines around
				1="fill( x0 + 2, y0, x1 - 2, y0 + 1, ButtonBorder )"  // top
				2="fill( x0 + 2, y1 - 1, x1 - 2, y1, ButtonBorder )"  // bottom
				3="fill( x0, y0 + 2, x0 + 1, y1 - 2, ButtonBorder )"  // left
				4="fill( x1 - 1, y0 + 2, x1, y1 - 2, ButtonBorder )"  // right
				
				5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonBorder )"
				6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorder )"
				7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonBorder )"
				8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorder )"
				9="fill( x0, y0 + 1, x0 + 1, y0 + 2, ButtonFace2 )"
				10="fill( x1 - 1, y0 + 1, x1, y0 + 2, ButtonFace2 )"
				11="fill( x0, y1 - 2, x0 + 1, y1 - 1, ButtonFace2 )"
				12="fill( x1 - 1, y1 - 2, x1, y1 - 1, ButtonFace2 )"
				13="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonFace2 )"
				14="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonFace2 )"
				15="fill( x0 + 1, y1 - 1, x0 + 2, y1, ButtonFace2 )"
				16="fill( x1 - 2, y1 - 1, x1 - 1, y1, ButtonFace2 )"
			}	
		}
		
		DetailsInstallButton:hover
		{  
			inset="23 0 0 0"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="TextHover"
			font-style=uppercase
			bgcolor=none   

			render
			{
				1="image( x0 + 6, y0 + 3, x1, y1, graphics/icon_install_hover )"
			}
			render_bg
			{
				// background fill
				0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonfaceactive, almostblack )"

				// lines around
				1="fill( x0 + 2, y0, x1 - 2, y0 + 1, ButtonBorderFocus )"  // top
				2="fill( x0 + 2, y1 - 1, x1 - 2, y1, ButtonBorderFocus )"  // bottom
				3="fill( x0, y0 + 2, x0 + 1, y1 - 2, ButtonBorderFocus )"  // left
				4="fill( x1 - 1, y0 + 2, x1, y1 - 2, ButtonBorderFocus )"  // right
				
				5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonBorderFocus )"
				6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorderFocus )"
				7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonBorderFocus )"
				8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorderFocus )"
				9="fill( x0, y0 + 1, x0 + 1, y0 + 2, ButtonFace2 )"
				10="fill( x1 - 1, y0 + 1, x1, y0 + 2, ButtonFace2 )"
				11="fill( x0, y1 - 2, x0 + 1, y1 - 1, ButtonFace2 )"
				12="fill( x1 - 1, y1 - 2, x1, y1 - 1, ButtonFace2 )"
				13="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonFace2 )"
				14="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonFace2 )"
				15="fill( x0 + 1, y1 - 1, x0 + 2, y1, ButtonFace2 )"
				16="fill( x1 - 2, y1 - 1, x1 - 1, y1, ButtonFace2 )"
			}	
		}

		DetailsBuyButton
		{   
			inset="23 0 0 0"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="Text"
			font-style=uppercase
			bgcolor=none

			render
			{
				1="image( x0 + 6, y0 + 3, x1, y1, graphics/icon_buy )"
			}
			render_bg
			{
				// background fill
				0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonface2, almostblack )"
				
				1="fill( x0 + 2, y0, x1 - 2, y0 + 1, ButtonBorder )"  // top
				2="fill( x0 + 2, y1 - 1, x1 - 2, y1, ButtonBorder )"  // bottom
				3="fill( x0, y0 + 2, x0 + 1, y1 - 2, ButtonBorder )"  // left
				4="fill( x1 - 1, y0 + 2, x1, y1 - 2, ButtonBorder )"  // right
				
				5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonBorder )"
				6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorder )"
				7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonBorder )"
				8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorder )"
				9="fill( x0, y0 + 1, x0 + 1, y0 + 2, ButtonFace2 )"
				10="fill( x1 - 1, y0 + 1, x1, y0 + 2, ButtonFace2 )"
				11="fill( x0, y1 - 2, x0 + 1, y1 - 1, ButtonFace2 )"
				12="fill( x1 - 1, y1 - 2, x1, y1 - 1, ButtonFace2 )"
				13="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonFace2 )"
				14="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonFace2 )"
				15="fill( x0 + 1, y1 - 1, x0 + 2, y1, ButtonFace2 )"
				16="fill( x1 - 2, y1 - 1, x1 - 1, y1, ButtonFace2 )"
			}	
		}
		
		DetailsBuyButton:hover
		{   
			inset="23 0 0 0"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="TextHover"
			font-style=uppercase
			bgcolor=none   

			render
			{
				1="image( x0 + 6, y0 + 3, x1, y1, graphics/icon_buy_hover )"
			}
			render_bg
			{
				// background fill
				0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonfaceactive, almostblack )"

				// lines around
				1="fill( x0 + 2, y0, x1 - 2, y0 + 1, ButtonBorderFocus )"  // top
				2="fill( x0 + 2, y1 - 1, x1 - 2, y1, ButtonBorderFocus )"  // bottom
				3="fill( x0, y0 + 2, x0 + 1, y1 - 2, ButtonBorderFocus )"  // left
				4="fill( x1 - 1, y0 + 2, x1, y1 - 2, ButtonBorderFocus )"  // right
								
			   	5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonBorderFocus )"
			   	6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorderFocus )"
				7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonBorderFocus )"
				8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorderFocus )"
				9="fill( x0, y0 + 1, x0 + 1, y0 + 2, ButtonFace2 )"
				10="fill( x1 - 1, y0 + 1, x1, y0 + 2, ButtonFace2 )"
				11="fill( x0, y1 - 2, x0 + 1, y1 - 1, ButtonFace2 )"
				12="fill( x1 - 1, y1 - 2, x1, y1 - 1, ButtonFace2 )"
				13="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonFace2 )"
				14="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonFace2 )"
				15="fill( x0 + 1, y1 - 1, x0 + 2, y1, ButtonFace2 )"
				16="fill( x1 - 2, y1 - 1, x1 - 1, y1, ButtonFace2 )"
			}	
		}
	}

	layout
	{
		// Y offset here should match the vertical padding value above in the colors section
		region { name="header" y=0 x=0 width=max height=max }

		place { 
			control=launchbutton,installbutton,preloadbutton,purchasebutton,activateguestpassbutton,subheaderlabels
			region=header
			dir=right
			align=left-center
			margin-left=10
			margin-right=10
			spacing=10
		}
	}
}
