"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
		{
			bgcolor=backgroundstartsubtle
		}
		
		
		ClientListButton
		{
			inset="20 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+2, y0+1, x1, y1-1, launch1, launch2 )"
			}
			render
			{
				1="image( x0 + 6, y0 + 11, x1, y1, graphics/icon_down_hover )"
			}
		}
		
		ClientListButton:hover
		{
		  inset="20 0 0 0"
			bgcolor=none
			render_bg
			{
				// background fill
				0="gradient( x0+2, y0+1, x1, y1-1, launch0, launch2 )"
			}
			render
			{
				1="image( x0 + 6, y0 + 11, x1, y1, graphics/icon_down_hover )"
			}
		}	
		
		ClientListButton:active
		{
			inset="20 0 0 0"
			bgcolor=none
			render_bg
			{
				// background fill
				0="gradient( x0+2, y0+1, x1, y1-1, focus, launch2 )"
			}
			render
			{
				1="image( x0 + 6, y0 + 11, x1, y1, graphics/icon_down_hover )"
			}
		}	
				
		ClientListButton:selected
		{
			inset="20 0 0 0"
			bgcolor=none
			render_bg
			{
				// background fill
				0="gradient( x0+2, y0+1, x1, y1-1, focus, launch2 )"
			}
			render
			{
				1="image( x0 + 6, y0 + 11, x1, y1, graphics/icon_down_hover )"
			}
		}	
		

		DetailsButton
		{   
			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, y0+1, x1, y1-1, parental_lock_active1, none )"


			}	
		}
		
		DetailsButton:hover
		{
			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, y0+1, x1, y1-1, parental_lock_active1, almostblack )"

			}	
		}
		
		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, y0+1, x1, y1-1, DialogBG, propertysheetbg )"
			}	
		}
		
		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 )"
			}
			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 )"
			}	
		}
				
		DetailsLaunchButton:Disabled
		{
			inset="23 2 0 1"
			font-family=basefont
			font-size=16
			font-weight=400
			textcolor=TextDisabled
			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, buttonfacedisabled, buttonfacedisabled )"
			}	
		}
				
		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-top=-3
			margin-left=10
			margin-right=0
			spacing=10
		}
	}
}