"resource/layout/gamespage_details_subheader.layout"
{
	controls
	{
		subheaderlabels { controlname="CDetailsSubHeaderLabelsPanel" }
		launchbutton { controlname="Button" labeltext="#Steam_LaunchGame" style="detailsLaunchButton" tabposition=1 command="RunGameAction" }
		clientlist { controlname="ClientListButton" labeltext="" style="ClientListButton" tabposition=2 zpos=100 }
	}

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

	styles
	{
		CDetailsGameSubHeaderPanel
		{
		render_bg
		{
			0="gradient( x0 + 1, y0 + 1, x1 - 1, y1, launch1, launch2  )"

		
			// lines around
		1="fill( x0 + 1, y0 + 1, x1 - 1, y0 + 2, launch1 )"  // top
		2="fill( x0 + 1, y1 - 2, x1 - 1, y1 - 1, none )"  // bottom
		3="gradient( x0 + 1, y0 + 1, x0 + 2, y1 - 1, launch1, none )"  // left
		4="gradient( x1 - 2, y0 + 1, x1 - 1, y1 - 1, launch1, none )"  // right
		}
		}
		
		
		ClientListButton
		{
			inset="-6 0 0 0"
			// minimum-width=20
			// minimum-height set by code to match actual height of Launch button
			// Do not set either minimum-width or -height here or it will override the code and the layout will break
			bgcolor=none

			render_bg
			{
				// background fill
				0="gradient( x0 , y0 + 1, x1 - 1, y1 - 1, buttonface2, almostblack )"
				
				2="fill( x0 - 2, y0, x1 - 2, y0 + 1, ButtonBorderSubtle )"  // top
				3="fill( x0 - 2, y1 - 1, x1 - 2, y1, ButtonBorderSubtle )"  // bottom
				4="fill( x0 - 1, y0 + 4, x0, y1 - 4, text )"  // left
				5="fill( x1 - 1, y0 + 2, x1, y1 - 2, ButtonBorderSubtle )"  // right
				
				6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorderSubtle )"
				7="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorderSubtle )"
				8="fill( x1 - 1, y0 + 1, x1, y0 + 2, ButtonFace2 )"
				9="fill( x1 - 1, y1 - 2, x1, y1 - 1, ButtonFace2 )"
				10="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonFace2 )"
				11="fill( x1 - 2, y1 - 1, x1 - 1, y1, ButtonFace2 )"
				
				12="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonBorderSubtle )"
				13="fill( x0 - 1, y1 - 2, x0, y1 - 1, almostblack )"
				14="fill( x0, y0 + 1, x0 + 1, y0 + 2, ButtonBorderSubtle )"
				15="fill( x0 - 1, y1 - 2, x0, y1 - 1, almostblack )"
				16="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonBorderSubtle )"
				17="fill( x0 -1, y1 - 1, x0, y1, ButtonBorderSubtle	 )"
				18="fill( x0 - 2, y1 - 2, x0 - 1, y1 - 1, almostblack )"
				19="fill( x0 - 1, y1 - 4, x0, y1 - 2, almostblack )"
			}
		}
		
		ClientListButton:hover
		{
			inset="-6 0 0 0"
			bgcolor=none

			render_bg
			{
				// background fill
				0="gradient( x0 , y0 + 1, x1 - 1, y1 - 1, buttonface2, almostblack )"
				
				2="gradient_horizontal( x0 - 2, y0, x1 - 2, y0 + 1, ButtonBorderSubtle, ButtonBorderFocus )"  // top
				3="gradient_horizontal( x0 - 2, y1 - 1, x1 - 2, y1, ButtonBorderSubtle, ButtonBorderFocus )"  // bottom
				
				4="fill( x0 - 1, y0 + 4, x0, y1 - 4, text )"  // left
				5="fill( x1 - 1, y0 + 2, x1, y1 - 2, ButtonBorderFocus )"  // right
				
				6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorderFocus )"
				7="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorderFocus )"
				8="fill( x1 - 1, y0 + 1, x1, y0 + 2, ButtonBorderSubtle )"
				9="fill( x1 - 1, y1 - 2, x1, y1 - 1, ButtonBorderSubtle )"
				10="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonBorderSubtle )"
				11="fill( x1 - 2, y1 - 1, x1 - 1, y1, ButtonBorderSubtle )"
				
				12="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonBorderSubtle )"
				13="fill( x0 - 1, y1 - 2, x0, y1 - 1, almostblack )"
				14="fill( x0, y0 + 1, x0 + 1, y0 + 2, ButtonBorderSubtle )"
				15="fill( x0 - 1, y1 - 2, x0, y1 - 1, almostblack )"
				16="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonBorderSubtle )"
				17="fill( x0 -1, y1 - 1, x0, y1, ButtonBorderSubtle	 )"
				18="fill( x0 - 2, y1 - 2, x0 - 1, y1 - 1, almostblack )"
				19="fill( x0 - 1, y1 - 4, x0, y1 - 2, almostblack )"
			}
		}	
		

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

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

			}	
		}
		
		DetailsButton:hover
		{
			inset="-3 0 0 0"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="255 255 255 255"
			font-style=uppercase
			bgcolor=none
			
			render_bg
			{
				// background fill
				0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, launch1, launch2 )"


			}	
		}
		
		DetailsButton:active
		{
			inset="-3 0 0 0"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="White"
			font-style=uppercase
			bgcolor=none
			
			render_bg
			{
				// background fill
				0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, launch1, launch2 )"


			}	
		}
				DetailsLaunchButton
		{   
			inset="23 2 0 1"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="white"
			font-style=uppercase
			bgcolor=none

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


			}	
		}
	
		DetailsLaunchButton:Hover
		{   
			inset="23 2 0 1"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="White"
			font-style=uppercase
			bgcolor=none   

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


			}	
		}
		
		DetailsLaunchButton:Selected
		{
			inset="23 2 0 1"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="White"
			font-style=uppercase
			bgcolor=none  
			render
			{
				1="image( x0 + 6, y0 + 6, x1, y1, graphics/icon_play )"
			}
			render_bg
			{
        // background fill
				0="gradient( x0, y0+1, x1, y1-1, focus, launch2 )"
			}
		}
		
		
		DetailsLaunchButton:Active
		{
			inset="23 2 0 1"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="White"
			font-style=uppercase
			bgcolor=none  
			render
			{
				1="image( x0 + 6, y0 + 6, x1, y1, graphics/icon_play )"
			}
			
			render_bg
			{
       				 // background fill
				0="gradient( x0, y0+1, x1, y1-1, focus, launch2 )"
			}	
		}
				
		DetailsInstallButton
		{  
			
			inset="23 2 0 1"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="White"
			font-style=uppercase
			bgcolor=none   
			render
			{
				1="image( x0 + 6, y0 + 5, x1, y1, graphics/icon_install)"
			}
			render_bg
			{
				// background fill
				0="gradient( x0, y0+1, x1, y1-1, launch1, launch2 )"


			}	
		}
		
		DetailsInstallButton:Hover
		{  
			inset="23 2 0 1"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="White"
			font-style=uppercase
			bgcolor=none   

			render
			{
				1="image( x0 + 6, y0 + 5, x1, y1, graphics/icon_install )"
			}
			render_bg
			{
				// background fill
				0="gradient( x0, y0+1, x1, y1-1, launch0, launch2 )"
			}	
		}
		
		DetailsInstallButton:Selected
		{
			inset="23 2 0 1"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="White"
			font-style=uppercase
			bgcolor=none   
			
			render
			{
				1="image( x0 + 6, y0 + 5, x1, y1, graphics/icon_install )"
			}
			render_bg
			{
       				// background fill
				0="gradient( x0, y0+1, x1, y1-1, focus, launch2 )"           
			}
		}
		
		
		DetailsInstallButton:Active
		{
			inset="23 2 0 1"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="White"
			font-style=uppercase
			bgcolor=none  
			render
			{
				1="image( x0 + 6, y0 + 5, x1, y1, graphics/icon_install )"
			}
			
			render_bg
			{
				// background fill
				0="gradient( x0, y0+1, x1, y1-1, focus, launch2 )"
			}	
		}
		
		
		DetailsBuyButton
		{   
			inset="23 2 0 1"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="White"
			font-style=uppercase
			bgcolor=none

			render
			{
				1="image( x0 + 6, y0 + 5, x1, y1, graphics/icon_buy )"
			}
			render_bg
			{
				// background fill
				0="gradient( x0, y0+1, x1, y1-1, launch1, launch2 )"

			}	
		}
		
		DetailsBuyButton:hover
		{   
			inset="23 2 0 1"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="White"
			font-style=uppercase
			bgcolor=none   

			render
			{
				1="image( x0 + 6, y0 + 5, x1, y1, graphics/icon_buy )"
			}
			render_bg
			{
				// background fill
				0="gradient( x0, y0+1, x1, y1-1, launch0, launch2 )"


			}	
		}
		
		DetailsBuyButton:active
		{
			inset="23 2 0 1"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="White"
			font-style=uppercase
			bgcolor=none  
			render
			{
				1="image( x0 + 6, y0 + 5, x1, y1, graphics/icon_buy )"
			}
			
			render_bg
			{
        			// background fill
				0="gradient( x0, y0+1, x1, y1-1, focus, launch2 )"
			}	
		}
		
		
		DetailsBuyButton:Selected
		{
			inset="23 2 0 1"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor="White"
			font-style=uppercase
			bgcolor=none  
			render
			{
				1="image( x0 + 6, y0 + 5, x1, y1, graphics/icon_buy )"
			}
			render_bg
			{     
        			// background fill
				0="gradient( x0, y0+1, x1, y1-1, focus, launch2 )"
			}
		}
	}

	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
			region=header
			dir=right
			align=middle
			margin-left=10
			margin-right=0
			margin-top=10
			margin-bottom=10
			spacing=0
		}
		place { 
			start=launchbutton
			control=clientlist
			region=header
			dir=right
			align=middle
			margin-left=0
			margin-right=0
			spacing=0
		}
		place { 
			start=clientlist
			control=subheaderlabels
			region=header
			dir=right
			align=middle
			margin-left=10
			margin-right=0
			spacing=10
		}
	}
}
