"resource/layout/gamespage_details_friends_list.layout"
{
	controls
	{
		infolabelplural	{ controlname="Label" style="infolabel" }
		infolabelsingular { controlname="Label" style="infolabel" }
		friendlabelmore { controlname="Label" style="friendlabelmore" labeltext="#Steam_MoreFriends" textAlignment="center" tooltiptext="#Steam_ViewAllFriends" }
	}

	colors
	{
		// Note the margin/spacing/width values here must match what is used in placement below 
		// for the image region.  The margin value should be computed by adding the margin of all containing
		// regions for the images.  All these values also must be positive integers.
		GameDetailsFriends.ImageAreaMargin "14"
		GameDetailsFriends.ImageAreaSpacing "10"
		GameDetailsFriends.ImageWidth "42"
		
		Tooltip.Anchor=Parent
	}

	styles
	{
		friendlabelmore
		{
			inset="-3 0 0 0"
			font-size=13 [$LINUX]
			font-size=15
			textcolor=Button.Text
			font-family=basefont
		     	render_bg
		     	{
			        // background fill
			        0="fill( x0 + 1, y0 + 2, x1 - 4, y1 - 1, Button.Back)"        
    			}
    		}
  
		friendlabelmore:hover
		{
			textcolor=Button.Hover.Text
		    	 render_bg
		    	 {
		      	  // background fill
					0="fill( x0 + 1, y0 + 2, x1 - 4, y1 - 1, Button.Back )"
					1="fill( x0 + 1, y0 + 2, x0 + 3, y1 - 1, Button.Hover )"
					2="fill( x1 - 6, y0 + 2, x1 - 4, y1 - 1, Button.Hover )"
					3="fill( x0 + 1, y0 + 2, x1 - 4, y0 + 4, Button.Hover )"
					4="fill( x0 + 1, y1 - 3, x1 - 4, y1 - 1, Button.Hover )"

    			}
    		}     
	     
		
		infolabel
		{
			font-size=13 [$LINUX]
			font-size=15
		}	
	}

	layout
	{
		region { name=body margin=0 width=max height=max }
		region { name=images region=body x=0 y=20 margin=2 width=max }


		place 
		{ 
			region=images 
			control=*friendimage,friendlabelmore
			dir=right
			width=42
			height=40
			spacing=10

		}

		// Only one of the next two will be visible at once		
		place { region=body control=infolabelplural y=0 width=max }
		place { region=body control=infolabelsingular y=0 width=max }
	}
}