steam.styles
{
  colors
  {
    // colors section can include colors in "R G B A" form, or references to already defined colors;
    // it can also include just general settings controls can pull from for extra customization
  
    black="0 0 0 255"
    almostBlack="17 24 33 255"
    white="255 255 255 255"
    grey="158 153 149 255"
    none="0 0 0 0"
    yellow="255 255 0 255"
    offwhite="166 164 159 255"
    dullgreen="216 222 211 255"
    maize="203 191 87 255"
    red="255 51 51 255"
    darkblue="59 84 129 255"
    blue="54 106 179 255"
    darkred="128 0 0 255"
    darkpurple="64 0 64 255"
    notifcolor1="45 78 122 180"
    scrollguttercolor="36 57 84 255"
    scrollguttercolorweak="53 67 84 200"
    plexblue="51 64 85 255"
    launch1="33 54 81 200"
    launch2="10 20 36 150"
    notifglass="146 187 94 150"
    notifgreen="119 186 31 200"
    notifsolid="104 183 0 255"
    textentry="57 76 104 200"
    colorofprogress="104 154 177 255"
    AeroWindow="27 36 49 200"
    inactivescrollbar1="plexblue"
    inactivescrollbar2="65 88 119 255"
    ActiveWindowBorder="51 64 85 255"
    WeakWhite="255 255 255 200"
    GamesBGColor="29 41 56 255"
    SolidLaunch1="33 54 81 255"
    SolidLaunch2="10 20 36 255"
    settingsfix="26 34 47 255"
    gridchrome="27 36 49 220"
    zoomhover="82 102 135 255"
    lighterbluegrad="72 96 130 255"
    notifgrad1="27 36 49 200"
    notifgrad2="72 96 130 200"
    scrollgrad2="60 75 99 255"
    hoverscrollgrad="50 79 114 255"
    pushscroll1="48 64 86 255"
    pushscroll2="37 57 81 255"
    inactivebutton1="27 36 49 255"
    inactivebutton2="40 54 73 255"
    borderforbuttons="inactivebutton1"
    launch1stronger="33 54 81 255"
    normalbutton1="14 23 37 255"
    normalbutton2="30 48 71 255"
    pagegradcolor="38 52 68 255"
    solidnotifcolor="45 78 122 255"
    hovertaskbar="57 85 130 255"
    
    dark_blue "2 11 23 255"
		med_blue "15 50 77 255"
		bg_blue "10 34 55 255"
    
    // control colors
    bordercolor="133 130 113 255"
    darkcorner="77 73 71 255"
    buttontext=Text
    buttontextactive=Text
    
    // cool we can define font-families here as well
    basefont="Segoe UI"
    basefont="Helvetica" [$OSX]
    
    // new control colors
    ButtonFace="27 36 49 200"
    ButtonFace2="27 36 49 255" // for use in main client list panel column header, some button states
    ButtonFace3="255 255 255 255" // button cornering pixels
    ButtonFaceDisabled="none"
    ButtonFaceHover="37 76 128  240"   /// hover!
    ButtonFaceActive="65 88 119  240"  // not sure what this state is...
    ButtonFaceFocus="65 88 119  240"  //  keyboard focus
    ButtonFaceActiveFocus="65 88 119  255"  // this is the default choice
    
    ButtonBorder="250 250 250 200"
    ButtonBorderSubtle="250 250 250 240"
    ButtonBorderPage="250 250 250 255"
    ButtonBorderDisabled="51 64 85 255"
    ButtonBorderDisabled2="67 65 63 255"  //cornering pixels
    ButtonBorderActive="255 255 255 255"
    ButtonBorderFocus="255 255 255 255"
    ButtonBorderFocusSubtle="128 122 117 255"
    
    Text="255 255 255 255"
    Text2="255 255 255 255"
    TextDisabled="102 99 96 255"
    TextHover="229 226 223 255"
    TextSelected="242 239 235 255"
    TextentrySelected="240 237 235 235" // color of any selected text
    TextSelectedBG="0 72 181 255" // background color of any selected text 
    TextGlowHover="128 124 120 255"
    TextGlowSelected="171 169 166 255"
    TextGlowHoverSm="128 123 120 255"
    TextGlowSelectedSm="145 142 140 255"
    
    NavLabel="0 36 91 255"
    Label="255 255 255 255"
    Label2="115 111 108 255"
    LabelDisabled="138 135 132 255"
    LabelFocus="199 196 194 255"
    LabelFocusTransparent="199 196 194 220"
    
    ScrollGlyph="255 255 255 255"  // the color of the scroll bar arrows
    ScrollGlyphDisabled="77 74 72 255"
    ScrollGlyphFocus="255 255 255 255"
    
    ScrollBG="255 255 255" // the color of the scroll bar gutter
    
    HeaderClient="255 255 255 255" // the color of the List box header in the main client window
    HeaderDialog="255 255 255 255" // the color of the list box header in other windows
    
    TitleBar="100 100 100 50"
    TitleBarFocus="200 200 200 50"
    
    Focus="39 87 150 200"  		// background color of any selected menu or list item
    Focus2="39 87 150 255"		// background color of view buttons and anything else in focus that needs more 'punch'
    Focus3="39 87 150 255"		// background color of highlighted friends 
    FocusGrid="39 87 150 240"  	// background color of any grid item
    Highlight="39 87 150 120" 	// same as focus
    Highlight1="204 185 88 255"    // installing hover color
    Highlight2="181 164 78 255" 	// installing color 
    Highlight3="173 69 71 255"    	// red for errors, blocked, etc.
    Highlight5="39 87 150 255" 	// blue 
    Highlight5a="39 87 150 255" 	// lighter version of highlight5
    Highlight5b="39 87 150 255" 	// as highlight5 but darker, for non-focused window borders

    BackgroundStartSubtle="28 41 56 175" 
    BackgroundStartSubtle="28 41 56 45" [$OSX]
    BackgroundStartSubtlest="28 41 56 150"
    BackgroundStart="28 41 56 170"
    BackgroundStartOpaque="28 41 56 255"
    
    ClientBG="27 36 49 255"
    DialogBG="27 36 49 255"

    DarkClientBG="27 36 49 255"
    DarkDialogBG="27 36 49 255"
    DarkClientBGTransparent="36 35 34 19"
    DarkDialogBGTransparent="56 55 53 170"

    GameDetailsBlueTransparent="0 58 145 255"
    GameDetailsGreenTransparent="0 58 145 255"
    GameDetailsRedTransparent="0 58 145 255"

    GameDetailsBlue="255 255 255 255"
    GameDetailsGreen="255 255 255 255"
    GameDetailsRed="255 255 255 255"

    PropertySheetBG="59 79 107 255"
    InteriorColor="59 79 107 255"
    
    DialogBorder="51 64 85 255" // border color around any dialog
    
    FillBG1="64 62 60 255" //gradient colors
    FillBG2="27 36 49 255"
    
    MenuBG1="27 36 49 255" //gradient colors
    MenuBG2="27 36 49 255"
    
    Divider="49 62 81 0"
    SuperDivider="49 62 81 0"
    DarkImageBorder="47 48 43 255"
    DarkImageOverlay="0 0 0 80"

    // colors pulled from steamscheme.res
    "ClayBG"      "70 70 70 255"
    "ClayButtonBG"      "87 88 88 255"        
    "ClayEnabled"     "85 88 82 255"
    "ClayKeyFocus"      "89 92 77 255"
    "ClayMouseDown"     "85 85 85 255"
    "ClayDisabledText"    "128 134 126 255"
    "ClayLightGreen"    "173 181 168 255" // frame button (close X) etc
    "ClayDimLightGreen"   "166 172 162 255" // frame button and title without focus etc
    "LightClayBG"     "104 106 101 255" // property sheet interior, active tab
    "LightClayButtonBG"   "125 128 120 255" // buttons on property sheet interior, active tab
    "DarkClayBG"      "47 49 45 255"    // shadow
    "p_ClayMouseDown"   "94 94 94 255"
    "ClaySheetBottom"   "92 90 87 255"
    "MaizeBG"     "145 134 60 255"  // background color of any selected text or menu item
    "GreenBG"     "76 88 68 255"
    "LightGreenBG"      "90 106 80 255"   // darker background color
    "DarkGreenBG"     "62 70 55 255"    // background color of text edit panes (chat, text Entries, etc.)
    "LightGrayBG"     "121 126 121 255"
    "GrayBG"      "77 73 71 255"
    "GrayBG2"     "39 37 35 255"
    "TempGradientTop" "53 52 51 255"
    
    
    DragDrop.DragFrame        "255 255 255 192"
    DragDrop.DropFrame        "150 255 150 255"

    Frame.ClientInsetX        10
    Frame.ClientInsetY        35
    Frame.FocusTransitionEffectTime   "0"     // time it takes for a window to fade in/out on focus/out of focus
    Frame.TransitionEffectTime      "0.25"      // time it takes for a window to fade in/out on open/close
    Frame.OnDragAlphaDelayTime      "0.15"      // time it takes after clicking the title bar of a window before the alpha multiplier kicks in
    Frame.OnDragAlphaMultiplier     "1.0"     // multiplier applied to alpha while dragging a frame
    Frame.AutoSnapRange         "6"
    Frame.UsesAlphaBlending       1
    FrameSystemButton.Icon        ""
    FrameSystemButton.DisabledIcon    ""

    Notifications.PanelPosition     "BottomRight"   // Can be "BottomRight", "BottomLeft", "TopRight", "TopLeft"
    Notifications.PanelPosition     "TopRight" [$OSX]  // the dock is on the bottom for OSX, so instead pop top right like other apps do
    Notifications.SlideDirection    "Horizontal"    // Can be "Vertical", "Horizontal", "None" and controls slide effect
    Notifications.FadeInTime      "0.25"    // Controls the time it takes to slide/fade into view
    Notifications.FadeOutTime     "0.25"    // Controls the time it takes to slide/fade out of view
    Notifications.DisplayTime     "6.0"     // Controls the length of time at steady state after fade in and before fade out
    Notifications.StackSize       "5"     // Controls how many panels we will stack before background queuing

    ListPanel.TextColor       Text
    ListPanel.BgColor       none  
    ListPanel.SelectedTextColor     TextentrySelected
    ListPanel.SelectedBgColor     TextSelectedBG
    ListPanel.SelectedOutOfFocusBgColor   ClientBG
    ListPanel.DisabledTextColor     TextDisabled
    ListPanel.DisabledSelectedTextColor   ClientBG
    ListPanel.EmptyListInfoTextColor    Label
    ListPanel.PerPixelScrolling     1
    ListPanel.PostSectionLeading	10

	// Default tooltip delay pops fast, but lets the mouse pass through without popping
	// Anchor=Cursor makes it stick to initial pop location like windows implementation.
	// Anchor can also be 'Float' to move with the mouse, or 'Parent' to stick just outside
	// the parent panel (useful for icon sized items)
	Tooltip.Delay=75
	Tooltip.Anchor=Cursor

	
    WizardPanel.HeaderBGColor     HeaderDialog

    Menu.TextInset          "6"
    
    PropertySheet.TransitionEffectTime    "0"     // time to change from one tab to another
    PropertySheet.TabGap        0
    PropertySheet.FlashTabColor	"255 114 76 255"

    RichText.InsetX         8
    RichText.InsetY         7

    ScrollBar.Wide          19
    
    SectionedListPanel.CollapserWidth   16
    
    HTML.SearchInsetY 5
    HTML.SearchInsetX 10
    HTML.SearchWide 348
    HTML.SearchTall 38
    HTML.SearchAnimationTime 0.25

    HTML.IMEInsetY 5
    HTML.IMEInsetX 10
    HTML.IMEWide 348
    HTML.IMETall 38
    HTML.IMEAnimationTime 0.25

    html.secureurl "126 166 75 255"
    html.insecureurl "173 69 72 255"
    
    MessageBox.ButtonHeight		24
    
    TextEntry.IMEBGColor        "225 225 225 255"
    TextEntry.IMEFGColor        "black"
    

    // Friends List colors
    Friends.InGameColor       "140 179 89 255"
    Friends.OnlineColor       "134 181 217 255"
    Friends.OfflineColor      "Label"
    Friends.PanelDefault      "Label"
    Friends.PanelOver       "Text"
    Friends.PanelSelected     "ClientBG"
    Friends.SectionHeader     "Label"
    Friends.NoAvatarOver      "Text"
    Friends.IgnoredColor      "Highlight3"
  
    ChatDialog.URLColor       "text"
    ChatOwnTextColor        "Label"
	ChatDialog.HistoryColor	"124 124 124 255"
    ChatGradientTop         "39 39 39 255"
    ChatGradientBottom        "102 104 99 255"
    
    AchievementPopup.TitleColor   "Text"
    AchievementPopup.DescriptionColor "180 180 180 255"
    
    GiftOnlyInfo.ImagePanelColor  "GrayBG"    
 }
  
  styles
  {
	downarrow
	{
      image="graphics/icon_down_default"    
	}

	downarrow:hover
	{
      image="graphics/icon_down_hover"

	
			render_bg {
			
			//background
			0="fill( x0 + 5, y0 + 4, x1 - 2, y1 - 4, buttonfaceactive )"
			//lines around
			1="fill(x0 + 4, y0 + 5, x0 + 5, y1 - 5, buttonfaceactive )"  //left
			2="fill(x1 - 2, y0 + 5, x1 - 1, y1 - 5, buttonfaceactive )"  //right
			}
	}

	uparrow
	{
      image="graphics/icon_up_default"    
	}
	
	rightarrow
	{
      image="graphics/icon_right_default"   
	}


	
	rightarrow:hover
	{
      image="graphics/icon_right_hover"    
	}
	
    Button
    {     
		font-family=basefont
		font-size=13
		font-weight=400
		textcolor="Text"
		font-style=uppercase,outerglow
		font-outerglow-color="normalbutton2"
		font-outerglow-offset=0
		bgcolor=none
		render_bg
		{
			// background fill
			0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, inactivescrollbar1,normalbutton2 )"

                
		}
    }
 
    "Page Button"
    {     
		render_bg
		{
			// background fill
			0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, inactivescrollbar1,normalbutton2 )"
					
		}
    }
    
	Button:hover
    {   
      		textcolor="TextHover"
      		render_bg
      {     
        // background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, inactivescrollbar2,hoverscrollgrad )"
                

      }
    }

    "Page Button:hover"
    {   
      textcolor="TextHover"
      render_bg
      {     
               // background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, inactivescrollbar2,hoverscrollgrad )"
          
      }
    }
    
    Button:focus
    {
        
	textcolor="TextHover"
	render_bg
        {
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonfacefocus, propertysheetbg )"			
                
        // lines around
      }
    }
    
    "Page Button:focus"
    {
      textcolor="TextHover"
      render_bg
      {     
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonfacefocus, propertysheetbg )"
                
      }
    }
    
    	Button:active // this is the left-mouse-currently-pressed state
	{
       textcolor="TextHover"
       render_bg
      {     
        // background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, normalbutton1, normalbutton2 )"
      }
    }
    
    "Page Button:active"
    {
       textcolor="TextHover"
       render_bg
      {     
        // background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, normalbutton1, normalbutton2 )"
                
      }
    }
    

    
    Button:selected
    {
      textcolor="TextHover"
      render_bg
      {     
                // background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonfaceactivefocus, propertysheetbg )"
      }
    }

    "Page Button:selected"
    {
      textcolor="TextHover"
      render_bg
      {     
                // background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonfaceactivefocus, propertysheetbg )"
                
      }
    }
    
    Button:disabled
    {
      textcolor="LabelDisabled"
      render_bg
      {     
        // background fill
        0="fill( x0 + 1, y0 + 1, x1 - 1, y1 - 1, none )"
                
      }
    }   
    
    "Page Button:disabled"
    {     
	textcolor="LabelDisabled"
      render_bg
      {
				// background fill
        0="fill( x0 + 1, y0 + 1, x1 - 1, y1 - 1, none )"
                
      }
      
    }
    
         
    CFriendsListSectionAffordance
    {     
      inset="0 0 0 0"
      font-size=14
      font-weight=400
      textcolor="Label"
    }
    
    CFriendsListSectionHeader
    {
      bgcolor=none
      font-family=basefont
      font-size=14
      font-size=13 [$OSX]
      font-weight=400
      textcolor="texthover"
      inset="0 2 0 0"
      render_bg
		{
			0="gradient_horizontal( x0-29, y0-4, x0+230, y1+1, launch1, none )"
		}
    }
            
    CFriendPanel
    {
      inset="0 2 0 0"
      bgcolor=none
      font-family=basefont
      font-size=14
      font-size=13 [$OSX]
      font-weight=400
      textcolor="label"
    }

    
    CheckButton
    {
      font-family=basefont
      font-size=14
      font-weight=400
      textcolor="Label"
      image="graphics/chkUnselStd"
    }
  
    CheckButton:selected
    {
      image="graphics/chkSelStd"    
    }

    CheckButton:focus
    {
      textcolor="Text"
      bgcolor=none
      image="graphics/chkUnselFocus"  
    }

    CheckButton:selected:focus
    {
      textcolor="Text"
      render_bg {}
      bgcolor=none
      image="graphics/chkSelFocus"
    }
    
    CheckButton:disabled
    {
      textcolor="TextDisabled"
      bgcolor=none
      image="graphics/chkUnselDis"
    }
    
    CheckButton:selected:disabled
    {
      textcolor="TextDisabled"
      bgcolor=none
      //!! bug - this needs to look disabled
      image="graphics/chkSelDis"
    }
    
    CheckButtonList
    {
        inset="1 1 1 1"
        textcolor="text2"
        bgcolor=none
        render_bg
        {     
				// background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y0 +80, dialogbg, BackgroundStartOpaque )"
        1="fill( x0 + 1, y0 + 80, x1 - 1, y1 - 1, BackgroundStartOpaque )"
        2="gradient( x0 + 1, y0 + 1, x1 - 1, y0 + 30, backgroundstartsubtle, none )"
          
      }
  
    } 
    
    CheckButtonList:scrollbar
    {
        inset="1 1 1 1"
        textcolor="text2"
        bgcolor=none
				render
							{
								//gradient to obscure content at top of scrolling region 
								0="gradient( x0+1, y0, x1+1, y0 + 6, none, none  )"
								
								//gradient to obscure content at bottom of scrolling region 
								1="gradient( x0, y1 - 9, x1+1, y1-1, none, none )"
							}        
        render_bg
        {     
				// background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y0 +80, dialogbg, BackgroundStartOpaque )"
        1="fill( x0 + 1, y0 + 80, x1 - 1, y1 - 1, BackgroundStartOpaque )"
        2="gradient( x0 + 1, y0 + 1, x1 - 1, y0 + 30, backgroundstartsubtle, none )"
      }
  
    } 
    
    "Page CheckButtonList"
    {
        inset="1 1 1 1"
        textcolor="text2"
        bgcolor=none
        render_bg
        {     
				// background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y0 +80, dialogbg, BackgroundStartOpaque )"
        1="fill( x0 + 1, y0 + 80, x1 - 1, y1 - 1, BackgroundStartOpaque )"
        2="gradient( x0 + 1, y0 + 1, x1 - 1, y0 + 30, backgroundstartsubtle, none )"
          
      }
  
    }
    
        "Page CheckButtonList:scrollbar"
    {
        inset="1 1 1 1"
        textcolor="text2"
        bgcolor=none
        render
							{
								//gradient to obscure content at top of scrolling region 
								0="gradient( x0+1, y0, x1+1, y0 + 6, none, none  )"
								
								//gradient to obscure content at bottom of scrolling region 
								1="gradient( x0, y1 - 9, x1+1, y1-1, none, none )"
							}   
        render_bg
        {     
				// background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y0 +80, dialogbg, BackgroundStartOpaque )"
        1="fill( x0 + 1, y0 + 80, x1 - 1, y1 - 1, BackgroundStartOpaque )"
        2="gradient( x0 + 1, y0 + 1, x1 - 1, y0 + 30, backgroundstartsubtle, none )"
          
      }
  
    }
    
    "CheckbuttonList Checkbutton"
    {textcolor="text2"}
    
    
    ComboBox
    {
      inset="3 0 0 0"
      textcolor="Text"
      font-family=basefont
      font-size="14"
      selectedtextcolor="TextEntrySelected"
      selectedbgcolor="TextSelectedBG"
      render_bg
      {     
        // background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, inactivescrollbar1,normalbutton2 )"
  
      }
    }
    
    ComboBox:hover
    {
    selectedbgcolor="none"
    selectedtextcolor="Text"
    render_bg
      {     
        // background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, inactivescrollbar2,hoverscrollgrad )"
  
      }
    }
    
    ComboBox:focus
    {
    selectedbgcolor="none"
    selectedtextcolor="Text"
    render_bg
      {     
        // background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonfaceactive, propertysheetbg )"
      }
    }
    
    ComboBox:focus:hover
    {
    selectedbgcolor="none"
    selectedtextcolor="Text"
    render_bg
      {     
        // background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonfaceactive, propertysheetbg )"
  
      }
    }
    
    "Page ComboBox"
    {
      render_bg
      {     
        // background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, inactivescrollbar1, normalbutton2 )"
      }
    }
    
    "Page ComboBox:focus"
    {
      render_bg
      {     
        // background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonfaceactive, propertysheetbg )"
  
      }
    }
    
    "Page ComboBox:hover"
    {
      render_bg
      {     
        // background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, inactivescrollbar2, hoverscrollgrad )"
  
      }
    }
    
    "Page ComboBox:focus:hover"
    {
      render_bg
      {     
        // background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonfaceactive, propertysheetbg )"
      }
    }
    
    
    ComboBoxButton
    {      

      bgcolor=none
      padding-left=2
      image="graphics/icon_down_default"
      // just draw a single line to divide it from the text
      render_bg 
      {
        0="fill( x0, y0 + 2, x0 + 1, y1 - 4, normalbutton2 )"
      }
    }
    
    ComboBoxButton:hover
    {
      image="graphics/icon_down_hover"
            // just draw a single line to divide it from the text
      render_bg 
      {
        0="fill( x0, y0 + 2, x0 + 1, y1 - 4, normalbutton2 )"
      }
    }
    
    ComboBoxButton:focus
    {

      bgcolor=none
      image="graphics/icon_down_focus"
      // just draw a single line to divide it from the text
      render_bg 
      {
        0="fill( x0, y0 + 2, x0 + 1, y1 - 4, normalbutton2 )"
      }
    }
    
    ComboBoxButton:focus:hover
    {

      bgcolor=none
      image="graphics/icon_down_default"
      // just draw a single line to divide it from the text
      render_bg 
      {
        0="fill( x0, y0 + 2, x0 + 1, y1 - 4, normalbutton2  )"
      }
    }
    
    
    "Page ComboBoxButton"
    {
      bgcolor=none
      image="graphics/icon_down_default"
      // just draw a single line to divide it from the text
      render_bg 
      {
        0="fill( x0, y0 + 2, x0 + 1, y1 - 4, ButtonBorderPage )"
      }
    }
    
    "Page ComboBoxButton:hover"
    {
      image="graphics/icon_down_hover"
       // just draw a single line to divide it from the text
      render_bg 
      {
        0="fill( x0, y0 + 2, x0 + 1, y1 - 4, ButtonBorderActive  )"
      }
    }
    
    "Page ComboBoxButton:focus"
    {

      bgcolor=none
      image="graphics/icon_down_focus"
      // just draw a single line to divide it from the text
      render_bg 
      {
        0="fill( x0, y0 + 2, x0 + 1, y1 - 4, ButtonBorderActive  )"
      }
    }
    
    "Page ComboBoxButton:focus:hover"
    {

      bgcolor=none
      image="graphics/icon_down_focus"
      // just draw a single line to divide it from the text
      render_bg 
      {
        0="fill( x0, y0 + 2, x0 + 1, y1 - 4, ButtonBorderActive )"
      }
    }
    
    Divider
    {
      bgcolor="none"
      render
      {
       0="gradient_horizontal( x0, y1 - 1, x1 + 1, y1, divider, plexblue )"     
      }

    }
    
    Frame
    {
    bgcolor="DialogBG"
      render
      {
        0="gradient_horizontal( x0, y1 - 1, x1 + 1, y1, ClientBG, ClientBG )"     
        1="gradient( x1 - 1, y0, x1, y1, ClientBG, ClientBG )" 
        2="fill( x0, y0, x1, y0 + 1, ClientBG )"
        3="gradient( x0, y0, x0 + 1, y1, ClientBG, ClientBG )"
      }
    } 
    
    Frame:FrameFocus
    {
    bgcolor="DialogBG"
      render
      {
        0="gradient_horizontal( x0, y1 - 1, x1 + 1, y1, ActiveWindowBorder, ActiveWindowBorder )"     
        1="gradient( x1 - 1, y0, x1, y1, ClientBG, ActiveWindowBorder )" 
        2="fill( x0, y0, x1, y0 + 1, ClientBG )"
        3="gradient( x0, y0, x0 + 1, y1, ClientBG, ActiveWindowBorder )"
      }
    } 
    
    
    FrameBRGripPanel
    {
      image=graphics/0

    }
    
    FrameBRGripPanel:hover
    {
      image=graphics/0

    }
    
    FrameMinimizeButton
    {
		render_bg {}
		image="graphics/win32_win_min"
		image="graphics/osx_win_dis" [$OSX]
    }
    
    FrameMinimizeButton:hover
    {  
		render_bg {}
		bgcolor="none"
		image="graphics/win32_win_min_hover"
		image="graphics/osx_min_hov" [$OSX]
    }

	FrameMinimizeButton:framefocus [$OSX]
    {
		render_bg {}
		bgcolor="none"
		image="graphics/osx_min_def"
    }
 
	FrameMinimizeButton:framefocus:hover [$OSX]
    {
		render_bg {}
		bgcolor="none"
		image="graphics/osx_min_hov"
    }
	
	FrameMinimizeButton:active 
    {
		render_bg {}
		bgcolor="none"
		image="graphics/win32_win_min_active"
		image="graphics/osx_min_down" [$OSX]
    }

	// need the maximize button to have different styles for OSX & win32
   	   	FrameMaximizeButton
    {
		render_bg {}
		image="graphics/win32_win_max"
		image="graphics/osx_win_dis" [$OSX]
    }

	FrameMaximizeButton:hover
    {
		render_bg {}
		bgcolor="none"
		image="graphics/win32_win_max_hover"
		image="graphics/osx_max_hov" [$OSX]
    }

	FrameMaximizeButton:framefocus
    {
		render_bg {}
		bgcolor="none"
		image="graphics/win32_win_max"
		image="graphics/osx_max_def" [$OSX]
    }

	FrameMaximizeButton:framefocus:hover
    {
		render_bg {}
		bgcolor="none"
		image="graphics/win32_win_max_hover"
		image="graphics/osx_max_hov" [$OSX]
    }

	FrameMaximizeButton:active
    {
		render_bg {}
		bgcolor="none"
		image="graphics/win32_win_max_active"
		image="graphics/osx_max_down" [$OSX]
    }

	// these are for when the maximize button becomes the restore button
   	FrameRestoreButton
    {
		render_bg {}
		image="graphics/win32_win_restore"
		image="graphics/osx_win_dis" [$OSX]
    }

	FrameRestoreButton:hover
    {
		render_bg {}
		bgcolor="none"
		image="graphics/win32_win_restore_hover"
		image="graphics/osx_max_hov" [$OSX]
    }

	FrameRestoreButton:framefocus
    {
		render_bg {}
		bgcolor="none"
		image="graphics/win32_win_restore"
    		image="graphics/osx_max_def" [$OSX]
    }

	FrameRestoreButton:framefocus:hover
    {
		render_bg {}
		bgcolor="none"
		image="graphics/win32_win_restore_hover"
		image="graphics/osx_max_hov" [$OSX]
    }

	FrameRestoreButton:active
    {
		render_bg {}
		bgcolor="none"
		image="graphics/win32_win_restore_active"
		image="graphics/osx_max_down" [$OSX]
    }

	FrameCloseButton
    {
		render_bg {}
		image="graphics/win32_win_close"
		image="graphics/osx_win_dis" [$OSX]
    }

	FrameCloseButton:hover
    {
		render_bg {}
		image="graphics/win32_win_close_hover"
		image="graphics/osx_close_hov" [$OSX]
    }
    
	FrameCloseButton:framefocus [$OSX]
    {
		render_bg {}
		bgcolor="none"
		image="graphics/osx_close_def"
    }

	FrameCloseButton:framefocus:hover [$OSX]
    {
		render_bg {}
		bgcolor="none"
		image="graphics/osx_close_hov"
    }

	FrameCloseButton:active 
    {
		render_bg {}
		bgcolor="none"
		image="graphics/win32_win_close_active"
		image="graphics/osx_close_down" [$OSX]
    }
    
	FrameCloseButton:disabled
    {
		render_bg {}
		bgcolor="none"
		image="graphics/win32_win_close_disabled" 
		image="graphics/osx_win_dis" [$OSX]
    }


    FrameTitle
    {
		font-family=basefont
		inset="5 2 0 0"
		inset="0 4 0 0" [$OSX]
		padding-left="0"
		padding-right="64"
		padding-right="0" [$OSX]
		font-size=14
		font-weight=400
		textcolor="buttonborderfocus"
		bgcolor="none"
		render_bg
		{
			1="gradient( x0, y0, x1, y1 + 18, TitleBar, none )"
		}
    }

    
    FrameTitle:framefocus
    {
		font-family=basefont
		inset="0 4 0 0" [$OSX]
		font-size=14
		font-weight=400
		bgcolor="none"
		textcolor="texthover"
		textcolor="texthover" [$OSX]
	    render_bg
	      {
	        1="gradient( x0, y0, x1, y1 + 18, titlebarfocus, none )"
	      }
    }
    
   
	"CFriendsDialog SectionedListPanelInterior"
	{
		bgcolor=none
		font-family=basefont
		font-size=14
		font-weight=400
		textcolor="Text"
		selectedtextcolor="TextSelected"
		selectedbgcolor="Focus"
		shadowtextcolor="TextDisabled"	// the color of disabled line items		
		render
		{
			//gradient to obscure content at top of scrolling region 
			
			//gradient to obscure content at bottom of scrolling region 
		}
		render_bg 
		{	
			// background gradient
			0="gradient( x0, y0, x1, y0 + 149, almostblack, almostblack )"
			1="fill( x0, y0 + 149, x1, y1 + 1, almostblack )" 
		}
	}
	
        		
    GraphPanel
    {
		textcolor=Highlight5
		bgcolor=none
		inset="0 -3 0 0"
		render_bg 
		{
				// lines around
				0="fill( x0, y0, x0 + 1, y1, ButtonBorderDisabled )"
				1="fill(  x1 - 1, y0 + 1, x1, y1 - 1, ButtonBorderDisabled )"
				2="fill( x0 + 1, y0, x1, y0 + 1, ButtonBorderDisabled )"
				3="fill( x0, y1 - 1, x1, y1, ButtonBorderDisabled )"	
        }
    }
    
    HTML
    {
		bgcolor="none"
		render_bg 
		{
		0="fill( x0, y0, x1 - 1, y1- 1, almostblack )" // bg
				// lines around
				//0="fill( x0, y0, x0 + 1, y1, ButtonBorderDisabled )"
				//1="fill(  x1 - 1, y0 + 1, x1, y1 - 1, ButtonBorderDisabled )"
				//2="fill( x0 + 1, y0, x1, y0 + 1, ButtonBorderDisabled )"
				//3="fill( x0, y1 - 1, x1, y1, ButtonBorderDisabled )"	
        }
        inset="0 0 0 0" 
    }
    
    
    Label
	{
		textcolor="label"
		selectedtextcolor="Text"
		bgcolor="none"
		font-family=basefont
		font-size=14
		font-weight=400
    }
   
    ListPanel
    {
		bgcolor=none
		font-family=basefont
		font-size=14
		font-weight=400
		textcolor="text2"
		selectedtextcolor="TextSelected"
		selectedbgcolor="Focus"
		shadowtextcolor="TextDisabled"	// the color of disabled line items
		inset="0 -1 1 1"
		render
		{		}       
		render_bg 
		{
			// background gradient        
			0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, dialogbg, almostblack )"
			1="gradient( x0 + 1, y0 + 1, x1 - 1, y0 + 31, launch1, none )"

		}
	}
      
    "Page ListPanel"
	{
		
		font-family=basefont
		font-size=14
		font-weight=400
		textcolor="Text2"
		selectedtextcolor="TextSelected"
		selectedbgcolor="Focus"
		inset="0 -1 1 1"
		bgcolor=none
	        render_bg
	        {     
		   // background fill
	        0="gradient( x0 + 1, y0 + 1, x1 - 1, y0 + 80, almostblack, almostblack )"
	        1="fill( x0 + 1, y0 + 80, x1 - 1, y1 - 1, almostblack )"
	        2="gradient( x0 + 1, y0 + 1, x1 - 1, y0 + 30, almostblack, almostblack )"
	      }
	}
    
    "CGamesListPanel"
	{
      font-family=basefont
	  bgcolor="none"
      font-size=15
      font-weight=400
      textcolor="Text"
      selectedtextcolor="textselected"
      selectedbgcolor="Focus"
      shadowtextcolor="TextDisabled"
      inset="0 -1 1 1"
      render_bg {

        // background gradient        
        0="gradient( x0+1, y0+1, x1-1, y0 + 432, dialogbg, almostblack )"
        1="fill( x0+1, y0+ 432, x1-1, y1 - 1, almostblack )"
        2="gradient( x0+1, y0+1, x1-1, y0 + 31, BackgroundStartsubtle, none )"
        
        
        }
    }
  
    "GameItem_Uninstalled"
    {
      textcolor="labeldisabled"
      selectedtextcolor="label"
    }
    "GameItem_Uninstalled:hover"
    {
        textcolor="label"
        selectedtextcolor="label"
    }
 
    "GameItem_Installed"
    {
      textcolor="text"
      selectedtextcolor="white"
      }
      
    "GameItem_Installed:hover"
    {
        textcolor="white"
        selectedtextcolor="white"
    }
    
        "GameItem_Shortcut"
    {
      textcolor="text"
      selectedtextcolor="white"
      }
      
    "GameItem_Shortcut:hover"
    {
        textcolor="white"
        selectedtextcolor="white"
    }
    
    "GameItem_Mod"
    {
      textcolor="text"
      selectedtextcolor="white"
      }
      
    "GameItem_Mod:hover"
    {
        textcolor="white"
        selectedtextcolor="white"
    }


    "GameItem_Updating"
    {
    	textcolor="highlight2"
    	selectedtextcolor="highlight1"
    }
    
    "GameItem_Updating:hover"
    {
    	textcolor="highlight1"
    	selectedtextcolor="highlight1"
    }
    
    "GameItem_Updating:selected"
    {
    	textcolor="highlight1"
    	selectedtextcolor="highlight1"
    }
    
    "GameItem_Decrypting"
    {
    	textcolor="highlight2"
    	selectedtextcolor="highlight1"
    }
    
    "GameItem_Decrypting:hover"
    {
    	textcolor="highlight1"
    	selectedtextcolor="highlight1"
    }
    
    "GameItem_Decrypting:selected"
    {
    	textcolor="highlight1"
    	selectedtextcolor="highlight1"
    }
    
        "GameItem_Syncing"
    {
    	textcolor="highlight2"
    	selectedtextcolor="highlight1"
    }
    
    "GameItem_Syncing:hover"
    {
    	textcolor="highlight1"
    	selectedtextcolor="highlight1"
    }
    
    "GameItem_Syncing:selected"
    {
    	textcolor="highlight1"
    	selectedtextcolor="highlight1"
    }
    
   
    "GameColumn_BigText"
	{
		font-family=basefont
		font-size=17
		font-weight=400
		textcolor="text"
    }
    
    ListPanelCheckBox
    {
		font-family=basefont
		font-size=14
		font-weight=400
		textcolor="Label"
		image="graphics/chkUnselStd_Sm"
		inset="0 5 0 0"
    }   

    
    ListPanelCheckBox:selected
    {
		image="graphics/chkSelStd_Sm"    
    }

	ListPanelCheckBox:focus
    {
		textcolor="Text"
		bgcolor=none
		image="graphics/chkUnselFocus_Sm"  
    }

    ListPanelCheckBox:selected:focus
    {
		textcolor="Text"
		render_bg {}
		bgcolor=none
		image="graphics/chkSelFocus_Sm"
    }
    
    ListPanelCheckBox:disabled
    {
		textcolor="TextDisabled"
		bgcolor=none
		image="graphics/chkUnselDis_Sm"
    }
    
    ListPanelCheckBox:disabled:select
    {
		textcolor="TextDisabled"
		bgcolor=none
		//!! bug - this needs to look disabled
		image="graphics/chkUnselDis"
    }
    
    "ListPanelColumnheader ListPanelCheckBox"
    {
		font-family=basefont
		font-size=14
		font-weight=400
		textcolor="Label"
		image="graphics/chkUnSelFocus_Sm"
		inset="4 0 0 0"  
	}

     
	"ListPanelColumnHeader ListPanelCheckBox:selected"
    {
		inset="4 0 0 0"
		image="graphics/chkUnSelStd_Sm"    
    }
	
	"ListPanelColumnheader ListPanelCheckBox:focus"
    {
      font-family=basefont
      font-size=14
      font-weight=400
      textcolor="TextHover"
      image="graphics/chkUnSelFocus_Sm"
      inset="4 0 0 0"  
	}

	"ListPanelColumnheader ListPanelCheckBox:selected:focus"
    {
      textcolor="TextHover"
      render_bg {}
      bgcolor=none
      image="graphics/chkSelFocus_Sm"
      inset="4 0 0 0"  
    }
    
    
    ListPanelColumnheader
    {
		font-family=basefont
		font-size=14
		font-size=13 [$OSX]
		font-weight=400
		textcolor="label"
		font-style="uppercase"
		bgcolor="none"
		inset="1 3 0 0"

		render_bg    
		{
			// fill
			0="fill (x0, y0 + 3, x1, y1 + 1, normalbutton2 )" // bg fill
			1="fill (x0 + 1, y0 + 2, x1, y0 + 3, normalbutton2)" // bg fill2
		}   
	}
    
    ListPanelColumnHeader:hover
    {
		textcolor="Texthover"
    }
      
	"Csteamrootdialog ListPanelColumnheader"
    {
		font-family=basefont
		font-size=14
		font-size=13 [$OSX]
		font-weight=400
		textcolor="label"
		font-style="uppercase"
		bgcolor="none"
		inset="0 0 0 0"
		inset="0 1 0 0" [$OSX]
		padding-top=1

		render_bg    
		{
			// fill
			0="fill (x0, y0 + 1, x1, y1, normalbutton2 )" // bg fill

			// lines around
			2="fill ( x1 - 1, y0 + 3, x1, y1-1, normalbutton2 )" // right
		}   
	}

   
    "Csteamrootdialog ListPanelColumnHeader:hover"
    {
		textcolor="TextHover"
    }
    
   	"Csteamrootdialog ListPanelSectionCollapser"
	{
		inset = "0 1 0 1"
		bgcolor=none
		render_bg
		{
			1="fill( x0 , y0, x1-1, y1 - 1, normalbutton2  )"
		}    
	}
	
	  "CGamesPage_Mini ListPanelSectionCollapser"
	{
		inset = "0 1 0 1"
		bgcolor=none
		render_bg
		{
			1="fill( x0 , y0, x1, y1 - 1, buttonface2  )"
		}    
	}
    

 
	ListPanelColumnSelectButton // the games list column chooser  
    {
        inset="-3 3 0 0"
        render
        {
          // background fill
          1="fill( x0, y0 + 1, x1 - 1, y1, normalbutton2 )"  
          
          // lines around
          5="image( x0 + 3, y0 + 3, x1, y1, graphics/icon_collapse )"
        }   
        render_bg {}
	}
    
    ListPanelColumnSelectButton:hover
     {
        inset="-3 3 0 0"
        render
        {
          // lines around
          1="fill( x0, y0 + 1, x1 - 1, y1, normalbutton2)"
          5="image( x0 + 3, y0 + 3, x1, y1, graphics/icon_collapse_over )"
        }   
        render_bg {}
	}
      
    ListPanelColumnSelectButton:selected
    {
        inset="-3 3 0 0"
        render
        {
          // lines around
          1="fill( x0, y0 + 1, x1 - 1, y1, normalbutton2)"
          5="image( x0 + 3, y0 + 3, x1, y1, graphics/icon_collapse_over )"
        }   
        render_bg {}
	}


	
	"CGamesListPanel ListPanelColumnSelectButton"   
	{
        inset="-3 3 0 0"
        render
        {
          5="image( x0 + 3, y0 + 3, x1, y1, graphics/icon_gearoptions )"
        }   
        render_bg {
        1="fill( x0 + 1, y0, x1 - 1, y1, normalbutton2 )"
        }
	}
	"CGamesListPanel ListPanelColumnSelectButton:hover"   
	{
        inset="-3 3 0 0"
        render
        {
          5="image( x0 + 3, y0 + 3, x1, y1, graphics/icon_gearoptions_hover )"
        }   

	}
	"CGamesListPanel ListPanelColumnSelectButton:selected"   
	{
        inset="-3 3 0 0"
        render
        {
          5="image( x0 + 3, y0 + 3, x1, y1, graphics/icon_gearoptions_active )"
        }   

	}
   
    ListPanelDragger
	{
		bgcolor="none"
		render 
		{
			//fill makes dragger visible
			0="fill( x0, y0 + 2, x0 + 1, y1 - 3, dialogbg )" // left
			1="fill (x0, y0, x0+1, y0+3, none )" //dot
		}
    }
    
    ListPanelInterior
    {     
		inset="3 1 0 0"
		font-size=15
		textcolor="text2"
		bgcolor="almostblack" 
      	render
			{
				//gradient to obscure content at top of scrolling region 
				1="gradient( x0+1, y0+0, x1-1, y0 + 3, none, none  )"
				
				//gradient to obscure content at bottom of scrolling region 
				2="gradient( x0, y1 - 12, x1, y1-0, none, none )"
			}
		
		render_bg {}
    } 
    
    ListPanelInterior:scrollbar
    {     
		bgcolor=none
		inset="3 1 -1 0"
		textcolor="text2"
		render
			{
				//gradient to obscure content at top of scrolling region 
				1="gradient( x0+1, y0-1, x1+1, y0 + 6, none, none  )"
				
				//gradient to obscure content at bottom of scrolling region 
				2="gradient( x0+1, y1 - 9, x1+1, y1-1, none, none )"
			}
		render_bg {}
    } 

	"CSteamRootDialog ListPanel"
	{
		padding-left=2
		padding-right=2
	}
    
     "Csteamrootdialog ListPanelInterior"
    {     
       	inset="3 0 3 0"
		bgcolor=none
		render_bg {}
	}
	
	"Csteamrootdialog ListPanelInterior:scrollbar"
    {     
       	inset="3 0 -1 0"
		bgcolor=none
		render
							{
								//gradient to obscure content at top of scrolling region 
								0="gradient( x0+1, y0-1, x1+1, y0 + 6, none, none  )"
								
								//gradient to obscure content at bottom of scrolling region 
								1="gradient( x0+1, y1 - 9, x1+1, y1-1, none, none )"
							}   
		render_bg {}
	}
	
	"Page ListPanelInterior"
	{
		inset="3 1 -1 0"
		font-size=15
		bgcolor=none
		render_bg {}
	}
	
	"Page ListPanelInterior:scrollbar"
	{
		inset="3 1 -1 0"
		bgcolor=none
		render
			{
				//gradient to obscure content at top of scrolling region 
				1="gradient( x0+1, y0, x1+2, y0 + 6, none, none  )"
				
				//gradient to obscure content at bottom of scrolling region 
				2="gradient( x0+2, y1 - 9, x1+2, y1-1, none, none )"
			}
		render_bg {}
	}
      
    ListPanelSectionHeader
    {     
		inset="2 0 0 0"
		textcolor=label
		font-style="uppercase"
		render_bg
		{
			0="gradient_horizontal( x0 - 1, y0, x0 + 250, y1 - 1, launch1, none  )"
		}    
    } 
    
    ListPanelSectionHeader:hover
    {     
        textcolor=texthover
    } 
    
    
    
	"ListPanel RichText"
	{
		textcolor="Text"
		font-family=basefont
		font-size=15
		bgcolor=none
		render_bg {} 
	}


	"ListPanel RichText url" 
	{
		font-size=15
		textcolor="Text"
		font-style=underline
	}

    "ListPanel RichTextInterior"
    {
      bgcolor=DarkDialogBG
      render_bg {} 
      bgcolor=none
    }
    
    ListPanelSectionCollapser [!$OSX]
    {
      
      bgcolor=none
      render_bg {}
      image="graphics/icon_collapse" 
      inset="-4 0 0 0"
      padding-top=-2
      padding-bottom=-2
    }
    
    ListPanelSectionCollapser [$OSX]
    {
      
      bgcolor=none
      render_bg {}   
      image="graphics/icon_collapse_osx" 
      inset="-4 0 0 0"
      padding-top=-2
      padding-bottom=-2
    }
    
    ListPanelSectionCollapser:hover [!$OSX]
    {
      image="graphics/icon_collapse_over" 
    }
    
    ListPanelSectionCollapser:hover [$OSX]
    {
      image="graphics/icon_collapse_over_osx" 
    }
    
    ListPanelSectionCollapser:selected [!$OSX]
    {
      image="graphics/icon_expand" 
    }
    
    ListPanelSectionCollapser:selected [$OSX]
    {
      image="graphics/icon_expand_osx" 
    }
    
    ListPanelSectionCollapser:selected:hover [!$OSX]
    {
      image="graphics/icon_expand_over" 
    }
    
     ListPanelSectionCollapser:selected:hover [$OSX]
    {
      image="graphics/icon_expand_over_osx" 
    }
    
	MainNav
    {
		textcolor="Label"
		selectedtextcolor="Text"
		bgcolor="none"
		font-family=basefont
		font-size=21
		font-weight=400
		font-style="uppercase"
    }

	Menu
    {
		bgcolor="dialogbg"
		padding-right=4
		inset="2 2 2 2"
      
		render_bg
		{
			0="gradient( x0 + 1, y0 + 1, x1 - 1, y0+140, MenuBG1, MenuBG2  )"
			1="fill( x0 + 1 , y0 + 140, x1 - 1, y1 - 1, MenuBG2  )"
		
				// lines around
				0="fill( x0, y0, x0 + 1, y1, ButtonBorderDisabled )"
				1="fill(  x1 - 1, y0 + 1, x1, y1 - 1, ButtonBorderDisabled )"
				2="fill( x0 + 1, y0, x1, y0 + 1, ButtonBorderDisabled )"
				3="fill( x0, y1 - 1, x1, y1, ButtonBorderDisabled )"	
		}
      
		render {}
		corner_rounding=1
    }
    
    
    MenuBar
    {
		bgcolor=dialogbg
		padding-right=1
		padding-left=6
		padding-top=2
		padding-bottom=-2
    }
    
    "Page MenuBar"
    {
		bgcolor=none
    }
    
    
	"MenuBar MenuButton" 
	{
		textcolor="buttonborder"
		padding-right=-2
		inset="-2 0 2 0"
	}
	
 	"MenuBar MenuButton:frameFocus" 
	{
		textcolor="250 250 250 255"
	}
	
	"MenuBar MenuButton:frameFocus:hover" 
	{
		textcolor="255 255 255 255"
		bgcolor=none
		
        render_bg
   		{    
			// background 
		    0="gradient( x0 + 1, y0 + 3, x1 - 5, y1 - 3, focus, focus )"
		        	
		    // lines around
		    1="fill( x0 + 2, y0 + 2, x1 - 6, y0 + 3, focus )"  // top
		    2="fill( x0 + 2, y1 - 3, x1 - 6, y1 - 2, focus )"  // bottom
		    3="gradient( x0, y0 + 4, x0 + 1, y1 - 4, focus, focus )"  // left
		    4="gradient( x1 - 5, y0 + 4, x1 - 4, y1 - 4, focus, focus )"  // right
   		}
	}
	
	"MenuBar MenuButton:frameFocus:selected" 
	{
		textcolor="texthover"
		bgcolor=none
		
        render_bg
   		{    
		    // background 
		    0="gradient( x0 + 1, y0 + 3, x1 - 5, y1 - 3, focus, focus )"
		        	
		    // lines around
		    1="fill( x0 + 2, y0 + 2, x1 - 6, y0 + 3, focus )"  // top
		    2="fill( x0 + 2, y1 - 3, x1 - 6, y1 - 2, focus )"  // bottom
		    3="gradient( x0, y0 + 4, x0 + 1, y1 - 4, focus, focus )"  // left
		    4="gradient( x1 - 5, y0 + 4, x1 - 4, y1 - 4, focus, focus )"  // right
   		}
	}
	
	MenuButton
    {
      font-family=basefont
      font-size=14
      font-weight=400
      textcolor="scrollglyph"
      bgcolor="none"
      render_bg {}
       
    }  
   
    MenuButton:hover
    {
      textcolor="white"
    }
    
   
    MenuButton:selected
    {
		textcolor="white"
    }
        
	MenuItem
    {
		font-family=basefont
		textcolor="Text"
		font-size=16
		font-weight=400
		inset="0 0 0 0"
		padding-right=6
		bgcolor="none"
		render_bg {}
    }
   
    MenuItem:selected
    {
		textcolor="TextHover"
		bgcolor="Focus"
    }
	
    MenuItem:hover
    {
		textcolor="TextHover"
		bgcolor="Focus"
    }
    
    MenuItem:disabled
    {
		textcolor="labeldisabled"
		shadowtextcolor=none
    }
    
    MenuItem:disabled:hover
    {
		textcolor="labeldisabled"
		shadowtextcolor=none
    }
   
   
    MenuSeparator
    {
		inset="2 0 6 0"
		textcolor="Divider"
		bgcolor=none
    }

    Notification
    {
		font-family=basefont
		font-size=15
		font-weight=400
		bgcolor=none
		render_bg
		{
			0="gradient( x0, y0, x1, y0+80, dialogbg, solidnotifcolor )"
        
			1="gradient_horizontal( x0, y1-1, x1, y1, ClientBG, Highlight5 )"    // bottom
			2="gradient( x1-1, y0, x1, y1 , ClientBG, Highlight5 )" // right
			3="fill( x0, y0, x1, y0+1, ClientBG )"  // top
			4="fill( x0, y0, x0+1, y1, ClientBG )" // left
		}
		render {}
    }
    
    Page
    {
		bgcolor="none"
		render_bg
		{
			// background gradient
			0="gradient( x0, y0 + 18, x1, y1, DialogBG, pagegradcolor )"
		}
    }

    "CSteamRootDialog Page"
    {
		bgcolor="none"
		render_bg {}
    }
    
    "Page RadioButtonList"
    {
		bgcolor="DialogBG"
    }
      
	PageTab
    {
		textcolor="Label"
		font-family=basefont
		font-size=13
		font-style=Uppercase
		font-weight=400
		inset="0 -2 0 0"
        render_bg
		{
			// background gradient
			0="fill( x0, y0 , x1, y1 - 4, launch1 )"
			1="fill(x0, y1, x1, y1, dialogbg )"
			
		}
    }

    
    PageTab:selected
    {
		textcolor="texthover"
		font-family=basefont
		font-size=13
		font-style=Uppercase
		font-weight=400
		inset="0 -2 0 0"
		bgcolor="none"
	    render_bg
			{
				// background gradient
				0="gradient( x0, y0 , x1, y1, launch1, dialogbg )"
		    1="fill(x1, y1, x1, y1, dialogbg )"
			}
    }

    
 	PageTab:hover
    {
		textcolor="texthover"
		font-family=basefont
		font-size=13
		font-style=Uppercase
		font-weight=400
		inset="0 -2 0 0"
		render_bg
			{
				// background gradient
				0="fill( x0, y0 , x1, y1 - 4, buttonfacehover )"
				1="fill(x0, y1, x1, y1, dialogbg )"
			}
    }
  
    PageTab:selected:hover
    {
		textcolor="texthover"
		font-family=basefont
		font-size=13
		font-style=Uppercase
		font-weight=400
		inset="0 -2 0 0"
		bgcolor="none"
	    render_bg
			{
				// background gradient
				0="gradient( x0, y0 , x1, y1, launch1, dialogbg )"
		    1="fill(x1, y1, x1, y1, dialogbg )"
			}
    }
      
  PageTab:Focus
	  {
		textcolor="Texthover"
    }

	"PageDragFrame PageTab"
	{
		font-size=14
		font-style=""
	}

  TabCloseButton
    {
		render_bg {}
		image="graphics/tiny_x_default"
    }

	TabCloseButton:hover
    {
		image="graphics/tiny_x_hover"
    }
    
    Panel
	{ 
		font-family=basefont
		font-size=14
		font-weight=400
		textcolor="Text"
		bgcolor="none"
    }
         	
    ProgressBar
    {
		textcolor="Colorofprogress"
		bgcolor="none"
		render
		{
			// lines around
		1="fill( x0 + 1, y0 + 1, x1 - 1, y0 + 2, ButtonBorder )"  // top
		2="fill( x0 + 1, y1 - 2, x1 - 1, y1 - 1, ButtonBorder )"  // bottom
		3="fill( x0 + 1, y0 + 1, x0 + 2, y1 - 1, ButtonBorder )"  // left
		4="fill( x1 - 2, y0 + 1, x1 - 1, y1 - 1, ButtonBorder )"  // right
		}   
	}
    
	"Page ProgressBar"
    {
		textcolor="Highlight5"
		bgcolor="none"
		render
		{
			// lines around
		1="fill( x0 + 1, y0 + 1, x1 - 1, y0 + 2, ButtonBorder )"  // top
		2="fill( x0 + 1, y1 - 2, x1 - 1, y1 - 1, ButtonBorder )"  // bottom
		3="fill( x0 + 1, y0 + 1, x0 + 2, y1 - 1, ButtonBorder )"  // left
		4="fill( x1 - 2, y0 + 1, x1 - 1, y1 - 1, ButtonBorder )"  // right
		}   
    }
	
    PropertyPage
    {
		bgcolor="propertysheetbg"
    }
    
    "CFriendsDialog PropertySheet"
    {
		bgcolor="none"
    }
    
    RadioButton
    {
		font-family=basefont
		font-size=14
		font-weight=400
		textcolor="Label"
		render_bg {}
		image="graphics/RadUnselStd"
		bgcolor=none
    }     
  
    RadioButton:selected
    {
		render_bg {}
		image="graphics/radSelStd"  
    }
    
    RadioButton:focus
    {
		textcolor="Texthover"
		bgcolor=none
		image="graphics/radSelDown"
    }

    RadioButton:selected:focus
    {
		textcolor="Texthover"  
		bgcolor=none
		image="graphics/radSelFocus"
    }
    
    RadioButtonList
    {
		bgcolor="DialogBG"
		inset="-2 0 0 0"

		render_bg
		{
		0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, DialogBG, ClientBG  )"
			// 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
        
			// single pixel fills in the corners
		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 )"
		}     
    }
        
    RichText
    {
		textcolor="Text"
		selectedtextcolor="TextSelected"		
		font-family=basefont
		font-size=14
		font-weight=400
		inset="0 -1 0 0"
		render_bg
		{
			-1="fill( x0 + 1, y0 + 1, x1 - 1, y1 - 1, almostblack )"
        
				// lines around
				0="fill( x0, y0, x0 + 1, y1, ButtonBorderDisabled )"
				1="fill(  x1 - 1, y0 + 1, x1, y1 - 1, ButtonBorderDisabled )"
				2="fill( x0 + 1, y0, x1, y0 + 1, ButtonBorderDisabled )"
				3="fill( x0, y1 - 1, x1, y1, ButtonBorderDisabled )"	
		}     
    }
         
    RichTextInterior 
	{
		bgcolor=none
    }
    
	// style of links in a rich text control
	
	"RichText url"
	{
		font-size=14
		textcolor="label"
		selectedtextcolor="label"
		font-style=underline
	}
	
	"RichText url:hover"
	{
		textcolor="Texthover"
	}
	
	
	"CFriendPanel RichText URL" 
		{
		textcolor="text"
		font-style=underline
		font-size=14
		}
	
	// style of bold text in a rich text control
	"RichText bold"
	{
		font-size=15
		font-weight=400
	}
	
	"RichText emphasis"
	{
		font-size=15
		font-style=italic
	}

	ScrollBar
	{
		inset="0 0 0 0"
	}
    
    ScrollBarButton.up
    {
		bgcolor=none
		inset="-1 2 0 0"
		image="graphics/icon_up_default"
		render_bg
		{
			// background fill
			0="gradient_horizontal( x0 + 2, y0 + 3, x1 - 4, y1 + 2, inactivescrollbar1,scrollgrad2 )"
			1="fill( x0 + 2, y0 + 3, x1 - 4, y1 + 2, inactivescrollbar1 )"
		}
		
    }
    
    ScrollBarButton.up:hover
    {
		bgcolor=none
		inset="-1 2 0 0"
		image="graphics/icon_up_hover"
		render_bg
		{
			// background fill
			0="gradient_horizontal( x0 + 2, y0 + 3, x1 - 4, y1 + 2, inactivescrollbar2,hoverscrollgrad )"
			1="fill( x0 + 2, y0 + 3, x1 - 4, y1 + 2, inactivescrollbar2 )"
		}
    }
    
    ScrollBarButton.up:active
    {
		inset="-1 2 0 0"
		image="graphics/icon_up_active"
		render_bg
		{
			// background fill
			0="gradient_horizontal( x0 + 2, y0 + 3, x1 - 4, y1 + 2, pushscroll2,pushscroll1 )"
		}
    }

    ScrollBarButton.up:disabled
    {
		inset="-1 2 0 0"
		image="graphics/icon_up_disabled"
		render_bg
		{
			// background fill
			0="fill( x0 + 2, y0 + 3, x1 - 4, y1 + 2, buttonfaceDisabled )"
		}
    }
	
    ScrollBarButton.down
	{
		bgcolor=none
		inset="-2 0 0 0"
		image="graphics/icon_down_default"
		render_bg
		{
			// background fill
			0="gradient_horizontal( x0 + 2, y0 - 1, x1 - 4, y1 - 3, inactivescrollbar1,scrollgrad2 )"
		}
    }
    
    ScrollBarButton.down:hover
		{
		inset="-2 0 0 0"
		image="graphics/icon_down_hover"
		render_bg
		{
			// background fill
			0="gradient_horizontal( x0 + 2, y0 - 1, x1 - 4, y1 - 3, inactivescrollbar2,hoverscrollgrad )"
		}
    }
    
    ScrollBarButton.down:active
		{
		inset="-2 0 0 0"
		image="graphics/icon_down_active"
		render_bg
		{
			// background fill
			0="gradient_horizontal( x0 + 2, y0 - 1, x1 - 4, y1 - 3, pushscroll2,pushscroll1 )"
		}
    }
    
    
     ScrollBarButton.down:disabled
		{
		inset="-2 0 0 0"
		image="graphics/icon_down_hover"
		render_bg
		{
			// background fill
			0="fill( x0 + 2, y0 - 1, x1 - 4, y1 - 3, buttonfaceDisabled )"
		}
    }
    
    ScrollBarButton.left
    {
		bgcolor=none
		inset="1 3 0 0"
		image="graphics/icon_left_default"
		render_bg 
			{
				// center fill
				0="fill( x0 + 2, y0 + 5, x1, y1 - 3, inactivescrollbar1 )"
			}
    }
    
    ScrollBarButton.left:hover
    {

		image="graphics/icon_left_hover"
		inset="1 3 0 0"
		render_bg 
			{
				// center fill
				0="fill( x0 + 2, y0 + 5, x1, y1 - 3, inactivescrollbar2 )"
	    }
    }
        
    ScrollBarButton.right
    {
		bgcolor=none
		image="graphics/icon_right_default"
		inset="0 2 0 0"
		render_bg 
			{
				// center fill
				0="fill( x0, y0 + 5, x1, y1 - 3, inactivescrollbar1 )"
	    }
    }
        
    ScrollBarButton.right:hover
    {
		image="graphics/icon_right_hover"
		inset="0 2 0 0"
		render_bg 
			{
			// center fill
			0="fill( x0, y0 + 5, x1, y1 - 3, inactivescrollbar2 )"
      }
    }
    
    ScrollBarHandle  //vertical scrollbar thumb
    {
		bgcolor=none
		image="graphics/icon_scroll_handle"
		render_bg 
		{
			// center fill
			0="gradient_horizontal( x0 + 2, y0 + 6, x1 - 4, y1 - 5, inactivescrollbar1,scrollgrad2 )"
		}
    }
       
    "ScrollBarHandle:hover"
    {
		image="graphics/icon_scroll_handle_over"
		render_bg 
		{
			// center fill
			0="gradient_horizontal( x0 + 2, y0 + 6, x1 - 4, y1 - 5, inactivescrollbar2,hoverscrollgrad )"
		}
    }
    
    "ScrollBarHandle:active"
    {
		image="graphics/icon_scroll_handle_active"
		render_bg 
		{
			// center fill
			0="gradient_horizontal( x0 + 2, y0 + 6, x1 - 4, y1 - 5, pushscroll2,pushscroll1 )"
		}
    }
    

 
    "SliderHoriz"  //horizontal scrollbar thumb
    {
	 	image="graphics/icon_scroll_handle_horiz"
      render 
      {
      	// center fill
        1="fill( x0 + 2, y0 + 6, x1 - 1, y1 - 3, inactivescrollbar1 )"		
			}
    }
    
    "SliderHoriz:hover"
    {
	
	 image="graphics/icon_scroll_handle_over_horiz"
      render {
      	// center fill
        	0="fill( x0 + 2, y0 + 6, x1 - 1, y1 - 3, inactivescrollbar2 )"	
        		
		// lines around
		1="fill( x0 + 3, y0 + 5, x1 - 2, y0 + 6, inactivescrollbar2 )"  // top
		2="fill( x0 + 3, y1 - 3, x1 - 2, y1 - 2, inactivescrollbar2 )"  // bottom
		}

    }
    
    "SliderHoriz:active"
    {
	 
	 image="graphics/icon_scroll_handle_over_horiz"
      render {
      	// center fill
        	0="fill( x0 + 2, y0 + 6, x1 - 1, y1 - 3, ButtonFaceActive )"	
        		
		// lines around
		1="fill( x0 + 3, y0 + 5, x1 - 2, y0 + 6, buttonfaceActive )"  // top
		2="fill( x0 + 3, y1 - 3, x1 - 2, y1 - 2, buttonfaceActive )"  // bottom
		}
    }
    
    ScrollBarSlider // gutter
    {
		bgcolor="none"
		render_bg
		{

			//lines around
			3="fill( x0, y0, x1, y0, almostblack )"  // top
			
			//background fill
			2="gradient( x0 + 2, y0 + 6, x1 - 4, y0 + 200, scrollguttercolor, none)"
		}
    }
    
    ScrollBarSliderHoriz // gutter
    {
		bgcolor="none"
		render_bg { }
    }
    
   
    "GamesPage_Details ListPanel ScrollBarSlider" // gutter in games list detail view 
    {
		bgcolor="none"
		render_bg
		{
			//background fill
			0="gradient( x0 + 2, y0 + 6, x1 - 4, y0 + 200, scrollguttercolor, none)"

		}
    }
    
    ScrollBarSlider:disabled 
    {
		bgcolor="none"
		render_bg {}
    }
    
    "ScrollBar SliderHoriz" // gutter
    {
		bgcolor="dialogbg"
    }

	"HTML ScrollBar"
	{
		bgcolor="none"
		render_bg { 
			0="fill(x0,y0,x1 - 1,y1 - 1, almostblack)"
		}
	}
	"HTML ScrollBar.Horizontal"
	{
		bgcolor="none"
		render_bg { 
			0="fill(x0,y0,x1+25,y1, almostblack)"
		}
	}
	
	"HTML ScrollBarSlider.Horizontal" 
	{
		bgcolor=none
		render_bg {
			//background fill
			0="gradient_horizontal( x0 + 6, y0 + 5, x0 + 200, y1 - 2, buttonborderdisabled, none)"
			//lines around
			1="fill( x0 + 5, y0 + 6, x0 + 6, y1 - 3, buttonborderdisabled )"  // top
		}

	}

	"HTML SliderHoriz"
	{
		bgcolor=none
		render_bg
		{
		}
	}
 
    SectionedListPanel
    {
		bgcolor="propertysheetbg"
		font-family=basefont
		font-size=14
		font-weight=400
		textcolor="Text"
		selectedtextcolor="TextSelected"
		selectedbgcolor="Focus"
		bgcolor="none"
		render_bg 
		{
				// lines around
				0="fill( x0, y0, x0 + 1, y1, ButtonBorderDisabled )"
				1="fill(  x1 - 1, y0 + 1, x1, y1 - 1, ButtonBorderDisabled )"
				2="fill( x0 + 1, y0, x1, y0 + 1, ButtonBorderDisabled )"
				3="fill( x0, y1 - 1, x1, y1, ButtonBorderDisabled )"	
			// background gradient
			0="gradient( x0 + 1, y0 + 1, x1, y0 + 1, Propertysheetbg, BackgroundStartOpaque)"
		}
        inset="1 -1 1 1"  
    }
    
    "CFriendsDialog SectionedListPanel"
    {
      bgcolor="none"
      font-family=basefont
      font-size=14
      font-weight=400
      textcolor="Text"
      selectedtextcolor="TextSelected"
      selectedbgcolor="Focus"
      render_bg 
      {
       	// background fill
	   		0="gradient( x0 + 1, y0, x1 - 1, y0 + 140, dialogbg, almostblack )"
	   		1="fill( x0 + 1, y0 + 140, x1 - 1, y1-1, almostblack )"
	   		
	   		//lines around, special due to tabs at top
	   		2="gradient( x1 - 1, y0 -1, x1, y1 -1, dialogbg, ButtonBorderDisabled )"  // right
	   		3="gradient( x0, y0, x0 + 1, y1 - 2, dialogbg, ButtonBorderDisabled )"  // left
	   		//single pixel fills
	   		4="fill( x0, y1-1, x0 + 1, y1, dialogbg )"
				5="fill( x1-1, y1-1, x1, y1, dialogbg )"

	   		
      }    
    }
    
    SectionedlistpanelCollapser
    {
      render_bg {}
      bgcolor=none
      image="graphics/icon_collapse"
      inset="2 1 0 0"
    } 
    
    SectionedListPanelCollapser:hover
    {
      image="graphics/icon_collapse_over"
    }
    
    SectionedListPanelCollapser:selected
    {
      image="graphics/icon_expand"
    }
    
    SectionedListPanelCollapser:selected:hover
    {
      image="graphics/icon_expand_over"
    }
    

  
    Slider
    {
      font-family=basefont
      font-size=10
      font-weight=400
      textcolor="label"
      font-style=uppercase
    }
      
    Slider:focus
    {
      textcolor="Text"  
    }
    
    StatusLabel
    {
      font-family=basefont
      font-size=14
      font-weight=400
      textcolor="labelfocus"
      font-style=uppercase
      
    }

    StatusLabel:hover
    {
      font-family=basefont
      font-size=14
      font-weight=400
      textcolor="white"
      font-style=uppercase
    }   
    

    TextEntry
    {
      font-family=basefont
      font-size=14
      textcolor="Text"
      font-weight=400
      bgcolor=""
      selectedtextcolor="white"
      selectedbgcolor="TextSelectedBG"
      shadowtextcolor="Text"  // this is the cursor color

      inset-left=4
      inset-top=0
      render
      {
        // lines around
		1="fill( x0 + 1, y0 + 1, x1 - 1, y0 + 2, ButtonBorder )"  // top
		2="fill( x0 + 1, y1 - 2, x1 - 1, y1 - 1, ButtonBorder )"  // bottom
		3="fill( x0 + 1, y0 + 1, x0 + 2, y1 - 1, ButtonBorder )"  // left
		4="fill( x1 - 2, y0 + 1, x1 - 1, y1 - 1, ButtonBorder )"  // right
        
      }     
    }
    
	"Page TextEntry"
    {
      render_bg
      { 
// lines around
		1="fill( x0 + 1, y0 + 1, x1 - 1, y0 + 2, ButtonBorder )"  // top
		2="fill( x0 + 1, y1 - 2, x1 - 1, y1 - 1, ButtonBorder )"  // bottom
		3="fill( x0 + 1, y0 + 1, x0 + 2, y1 - 1, ButtonBorder )"  // left
		4="fill( x1 - 2, y0 + 1, x1 - 1, y1 - 1, ButtonBorder )"  // right
      }     
    }
    
    TextEntry:focus
    {     
		textcolor="TextHover"
		render
		{
// lines around
		1="fill( x0 + 1, y0 + 1, x1 - 1, y0 + 2, ButtonBorder )"  // top
		2="fill( x0 + 1, y1 - 2, x1 - 1, y1 - 1, ButtonBorder )"  // bottom
		3="fill( x0 + 1, y0 + 1, x0 + 2, y1 - 1, ButtonBorder )"  // left
		4="fill( x1 - 2, y0 + 1, x1 - 1, y1 - 1, ButtonBorder )"  // right
		}     
    }
       
    "Page TextEntry:focus"
    {     
      textcolor="TextHover"
      render
      {
// lines around
		1="fill( x0 + 1, y0 + 1, x1 - 1, y0 + 2, ButtonBorder )"  // top
		2="fill( x0 + 1, y1 - 2, x1 - 1, y1 - 1, ButtonBorder )"  // bottom
		3="fill( x0 + 1, y0 + 1, x0 + 2, y1 - 1, ButtonBorder )"  // left
		4="fill( x1 - 2, y0 + 1, x1 - 1, y1 - 1, ButtonBorder )"  // right
      }     
    }
    
    
    TextEntry:disabled
    {     
      textcolor="TextDisabled"
      bgcolor="ButtonFaceDisabled"
      render
      {
      }     
    }
    
	// The 'empty' style is used for 'hint text' in text entry fields.
	// If the text box does not have focus and does not have content, a
	// hint text property will be shown with this style. This is comment
	// to pre-fill to box with something like 'Search' that goes away when active
	TextEntry:empty
	{
		font-style=italic
		textcolor=LabelDisabled
	}
	
    TextEntryLarge
    {
      font-family=basefont
      font-size=24
      textcolor="Text"
      font-weight=400
      bgcolor="none"
      selectedtextcolor="TextEntrySelected"
      selectedbgcolor="TextSelectedBG"
      shadowtextcolor="Text"  // this is the cursor color

      inset-left=4
      inset-top=5
      inset-bottom=5
      render
      {
        // lines around
		1="fill( x0 + 1, y0 + 1, x1 - 1, y0 + 2, ButtonBorder )"  // top
		2="fill( x0 + 1, y1 - 2, x1 - 1, y1 - 1, ButtonBorder )"  // bottom
		3="fill( x0 + 1, y0 + 1, x0 + 2, y1 - 1, ButtonBorder )"  // left
		4="fill( x1 - 2, y0 + 1, x1 - 1, y1 - 1, ButtonBorder )"  // right
      }     
    }

    TextEntryLarge:focus
    {     
      textcolor="TextHover"
      render
      {
        // lines around
		1="fill( x0 + 1, y0 + 1, x1 - 1, y0 + 2, ButtonBorder )"  // top
		2="fill( x0 + 1, y1 - 2, x1 - 1, y1 - 1, ButtonBorder )"  // bottom
		3="fill( x0 + 1, y0 + 1, x0 + 2, y1 - 1, ButtonBorder )"  // left
		4="fill( x1 - 2, y0 + 1, x1 - 1, y1 - 1, ButtonBorder )"  // right
      }     
    }
    
    TextEntryLarge:disabled
    {     
      textcolor="TextDisabled"
      bgcolor="ButtonFaceDisabled"
      render
      {
        // lines around
		1="fill( x0 + 1, y0 + 1, x1 - 1, y0 + 2, ButtonBorder )"  // top
		2="fill( x0 + 1, y1 - 2, x1 - 1, y1 - 1, ButtonBorder )"  // bottom
		3="fill( x0 + 1, y0 + 1, x0 + 2, y1 - 1, ButtonBorder )"  // left
		4="fill( x1 - 2, y0 + 1, x1 - 1, y1 - 1, ButtonBorder )"  // right
      }     
    }
    
    TextEntryURL
	{
		font-family=basefont
		font-size=14
		textcolor="text"
		font-weight=400
		bgcolor="none"
		selectedtextcolor="TextEntrySelected"
		selectedbgcolor="TextSelectedBG"
		shadowtextcolor="Text"	// this is the cursor color
		inset-left=0
		inset-top=-1
		render { }			
	}

	TextEntryURL:Hover
	{
		textcolor="texthover"
		render
		{
			// lines around
		1="fill( x0 + 2, y0, x1 - 2, y0 + 1, ButtonFaceDisabled )"  // top
		2="fill( x0 + 2, y1 - 1, x1 - 2, y1, ButtonFaceDisabled )"  // bottom
		3="fill( x0, y0 + 2, x0 + 1, y1 - 2, ButtonFaceDisabled )"  // left
		4="fill( x1 - 1, y0 + 2, x1, y1 - 2, ButtonFaceDisabled )"  // right
			
			// single pixel fills in the corners
		5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonFaceDisabled )"
		6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonFaceDisabled )"
		7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonFaceDisabled )"
		8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonFaceDisabled )"
			11="fill( x0, y0 + 1, x0 + 1, y0 + 2, ButtonBorderDisabled2 )"
			12="fill( x1 - 1, y0 + 1, x1, y0 + 2, ButtonBorderDisabled2 )"
			13="fill( x0, y1 - 2, x0 + 1, y1 - 1, ButtonBorderDisabled2 )"
			14="fill( x1 - 1, y1 - 2, x1, y1 - 1, ButtonBorderDisabled2 )"
			15="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonBorderDisabled2 )"
			16="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonBorderDisabled2 )"
			17="fill( x0 + 1, y1 - 1, x0 + 2, y1, ButtonBorderDisabled2 )"
			18="fill( x1 - 2, y1 - 1, x1 - 1, y1, ButtonBorderDisabled2 )"
		}			
	}
	
	ToggleButton
    {
      inset="1 0 0 0"
      inset="1 3 0 0" [$OSX]
      font-family=basefont
      font-size=13
      font-weight=400
      textcolor="Text"
      bgcolor=none
      render_bg
      {
      
			// background fill
			0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, inactivescrollbar1,normalbutton2 )"
			
      }
    }

  
    ToggleButton:focus
    {     
            textcolor="TextHover"
            bgcolor="ButtonFaceFocus"
	 		render_bg
		{
        // background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, inactivescrollbar2,hoverscrollgrad )"
                
		}
    }
    
    ToggleButton:hover
    {
      textcolor="TextHover"
      bgcolor="ButtonFaceHover"
      render_bg
      {     
        
        // background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, inactivescrollbar2,hoverscrollgrad )"
                
      }
    }
    
    ToggleButton:selected
    {
      
      textcolor="TextHover"
      bgcolor="none"
      render_bg
      {
        	// background fill
        0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonfaceactivefocus, propertysheetbg )"
      }
    }
  
    

    
    // the background and frame of a tooltip
    TooltipWindow
    {
bgcolor="menubg1"
    }

	// body text inside a tooltip
    "TooltipWindow Label"
    {
		padding-left=4
        textcolor="Text"
    }
    
    // headline text inside a tooltip
   	tooltip_headline
   	{
   		textcolor="colorofprogress"
   		font-size=16
   		padding-left=4
   		padding-top=1
   		padding-bottom=0
   		font-weight=400   	

   	}
   	
    TreeNode
    {
      bgcolor=none
      render_bg {}
    }
    
    TreeNodeImage
    {
      bgcolor=none
    }
    
    TreeViewSubPanel
    {
      bgcolor=none

    }
  
    TreeNodeText
    {
      font-family=basefont
      font-size=13
      textcolor="Text"
      selectedtextcolor="TextSelected"
      selectedbgcolor="TextSelectedBG"
      bgcolor=none
      render {}
      render_bg {}
    }
  
    TreeView
    {
      render_bg
      {
        -1="fill( x0 + 1, y0 + 1, x1 - 1, y1 - 1, none )"

        // 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
        
        // single pixel fills in the corners
		1="fill( x0 + 2, y0, x1 - 2, y0 + 1, ButtonBorderDisabled )"  // top
		2="fill( x0 + 2, y1 - 1, x1 - 2, y1, ButtonBorderDisabled )"  // bottom
		3="fill( x0, y0 + 2, x0 + 1, y1 - 2, ButtonBorderDisabled )"  // left
		4="fill( x1 - 1, y0 + 2, x1, y1 - 2, ButtonBorderDisabled )"  // right
			11="fill( x0, y0 + 1, x0 + 1, y0 + 2, ButtonBorderDisabled2 )"
			12="fill( x1 - 1, y0 + 1, x1, y0 + 2, ButtonBorderDisabled2 )"
			13="fill( x0, y1 - 2, x0 + 1, y1 - 1, ButtonBorderDisabled2 )"
			14="fill( x1 - 1, y1 - 2, x1, y1 - 1, ButtonBorderDisabled2 )"
			15="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonBorderDisabled2 )"
			16="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonBorderDisabled2 )"
			17="fill( x0 + 1, y1 - 1, x0 + 2, y1, ButtonBorderDisabled2 )"
			18="fill( x1 - 2, y1 - 1, x1 - 1, y1, ButtonBorderDisabled2 )"

      }     
    }
    
    URLLabel
    {
      textcolor="label"
      bgcolor="none"
      font-family=basefont
      font-size=14
      font-weight=400
      font-style=underline
    }
    
   	URLLabel:Hover
	{
	 textcolor="texthover"
	 font-size=14
	}
	
	URLLabelSimple
    {
      textcolor="250 250 250 255"
      bgcolor="none"
      font-family=basefont
      font-size=14
      font-weight=400
      font-style=regular
    }

	URLLabelSimple [$OSX]
    {
      textcolor="250 250 250 255"
      bgcolor="none"
      font-family=basefont
      font-size=13
      font-weight=400
      font-style=regular
    }
    
    URLLabelSimple:Hover
    {
      font-style=underline
      textcolor="WHITE"
    }  

    
    // Steam-specific styles
    CConsoleHistory
    {
      font-family="Segoe UI"
      font-size=9
      font-family="Menlo" [$OSX]
      font-size=14 [$OSX]
      textcolor="label"
      selectedtextcolor="TextSelected"
      render_bg {
	0="image(x0,y0,x1,y1,graphics/TEXTONLY)"
			}
    }
    
    GameColumnHeaderFavorites
    {
      image="steam/cached/fav_remove"

    }
    
    CGamesListFavoritesToggle
    {
      image="steam/cached/fav_addTo"
    }
    
    CGamesListFavoritesToggle:hover
    {
      image="steam/cached/fav_addTo_ovr"
    }
    
    CGamesListFavoritesToggle:selected
    {
      image="steam/cached/fav_remove"
    }

    CGamesListFavoritesToggle:selected:hover
    {
      image="steam/cached/fav_remove_ovr"
    }

    WrapPanel
    {
      inset="0 0 0 0"
      font-family=basefont
      font-size=14
      font-weight=400
      textcolor="Text"
      selectedtextcolor="TextSelected"
      selectedbgcolor="Focus"
      bgcolor=none
      render_bg {

        // lines around
		1="fill( x0 + 2, y0, x1 - 2, y0 + 1, ButtonBorderDisabled )"  // top
		2="fill( x0 + 2, y1 - 1, x1 - 2, y1, ButtonBorderDisabled )"  // bottom
		3="fill( x0, y0 + 2, x0 + 1, y1 - 2, ButtonBorderDisabled )"  // left
		4="fill( x1 - 1, y0 + 2, x1, y1 - 2, ButtonBorderDisabled )"  // right
        
        // single pixel fills in the corners
		5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonBorderDisabled )"
		6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorderDisabled )"
		7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonBorderDisabled )"
		8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorderDisabled )"
			11="fill( x0, y0 + 1, x0 + 1, y0 + 2, ButtonBorderDisabled2 )"
			12="fill( x1 - 1, y0 + 1, x1, y0 + 2, ButtonBorderDisabled2 )"
			13="fill( x0, y1 - 2, x0 + 1, y1 - 1, ButtonBorderDisabled2 )"
			14="fill( x1 - 1, y1 - 2, x1, y1 - 1, ButtonBorderDisabled2 )"
			15="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonBorderDisabled2 )"
			16="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonBorderDisabled2 )"
			17="fill( x0 + 1, y1 - 1, x0 + 2, y1, ButtonBorderDisabled2 )"
			18="fill( x1 - 2, y1 - 1, x1 - 1, y1, ButtonBorderDisabled2 )"
        
        // background gradient
        8="gradient( x0 + 1, y0 + 1, x1, y0 + 240, propertysheetbg, DarkDialogBG )"
        9="fill( x0, y0 + 240, x1, y1, DarkDialogBG )"
            }
        inset="1 -1 1 1"  
    }
   
    BackButton
    {
      bgcolor=none
      inset="-5 -1 0 0"
      render_bg={}
      image="graphics/icon_button_back"
    }
	
    BackButton:hover
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_back_over"
    }
	
    BackButton:active
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_back_down"
    }
	
    BackButton:disabled
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_back_disabled"
    }
	
    FullscreenButton
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_fullscreen"
    }
    

    FullscreenButton:hover
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_fullscreen_over"
    }
	
    FullscreenButton:active
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_fullscreen_down"
    }
	
    FullscreenButton:disabled
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_fullscreen_disabled"
    }

    ForwardButton
    {
      bgcolor=none
      inset="-5 -1 0 0"
      render_bg={}
      image="graphics/icon_button_forward"
    }
    
    ForwardButton:hover
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_forward_over"
    }
	
    ForwardButton:active
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_forward_down"
    }
	
    ForwardButton:disabled
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_forward_disabled"
    }
    
    HomeButton
    {
      bgcolor=none
      inset="-5 0 0 0"
      render_bg={}
      image="graphics/icon_button_home"
    }
    
    HomeButton:hover
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_home_over"
    }
	
    HomeButton:active
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_home_down"
    }
	
    HomeButton:disabled
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_home_disabled"
    }
	
    ReloadButton
    {
      bgcolor=none
      inset="-5 0 0 0"
      render_bg={}
      image="graphics/icon_button_reload"
    }
    
    ReloadButton:hover
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_reload_over"
    }

    ReloadButton:active
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_reload_down"
    }

    ReloadButton:disabled
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_reload_disabled"
    }
    
    StopButton
    {
      bgcolor=none
      inset="-5 0 0 0"
      render_bg={}
      image="graphics/icon_button_stop"
    }
    
    StopButton:hover
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_stop_over"
    }

    StopButton:active
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_stop_down"
    }

    StopButton:disabled
    {
      bgcolor=none
      render_bg={}
      image="graphics/icon_button_stop_disabled"
    }
    
  
	gamedetails-headerlabel
	{
		font-size="20"
		font-style="normal"
		font-family=basefont
		font-weight=400
		textcolor="Text"
		font-style="uppercase;outerglow"
		font-outerglow-color="launch2"
		font-outerglow-offset=1
		font-outerglow-filtersize=2
	}

	gamedetails-headerlabel-red
	{
		font-size="20"
		font-style="normal"
		font-family=basefont
		font-weight=400
		textcolor="white"
		font-style="uppercase;outerglow"
		font-outerglow-color="launch2"
		font-outerglow-offset=1
		font-outerglow-filtersize=2
	}
 
 	"html-findbar"
 	{
		font-family=basefont
		font-size=14
		textcolor="text2"
		font-weight=400
		bgcolor="27 36 49 245"
		selectedtextcolor="TextEntrySelected"
		selectedbgcolor="TextSelectedBG"
		shadowtextcolor="Text"	// this is the cursor color
		inset-left=0
		inset-top=0
		
			render
		      {
		        // lines around
		       // 0="fill( x0 + 1, y0 + 2, x0 + 2, y1 + 1, ButtonBorder )"
		       // 1="gradient_horizontal( x0 + 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorder, none )" 
		       // 2="gradient_horizontal( x0 + 2, y1 + 1, x1 - 1, y1 +2, ButtonBorder, none )"
		      }     	
	}
		
 	"html-imebar"
 	{
		font-family=basefont
		font-size=14
		textcolor="text2"
		font-weight=400
		bgcolor="DarkClientBG"
		selectedtextcolor="TextEntrySelected"
		selectedbgcolor="TextSelectedBG"
		shadowtextcolor="Text"	// this is the cursor color
		inset-left=0
		inset-top=0
		
			render
		      {
		        // lines around
		        0="fill( x0 + 1, y0 + 2, x0 + 2, y1 + 1, ButtonBorder )"
		        1="gradient_horizontal( x0 + 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorder, none )" 
		        2="gradient_horizontal( x0 + 2, y1 + 1, x1 - 1, y1 +2, ButtonBorder, none )"
		      }     	
	}
		
	gamedetails-headerlabel-green
	{
		font-size="20"
		font-style="normal"
		textcolor="white"
		font-family=basefont
		font-weight=400
		font-style="uppercase;outerglow"
		font-outerglow-color="launch2"
		font-outerglow-offset=1
		font-outerglow-filtersize=2
	}

	gamedetails-headerlabel-blue
	{
		font-size="20"
		font-style="normal"
		textcolor="white"
		font-family=basefont
		font-weight=400
		font-style="uppercase;outerglow"
		font-outerglow-color="launch2"
		font-outerglow-offset=1
		font-outerglow-filtersize=2
	}
	
	// styles for text used in RichText controls in various places
	
	console_text_error
	{
		textcolor="Highlight3"
		font-size=14
		font-family="Menlo" [$OSX]
      	font-size=16 [$OSX]
		selectedtextcolor="TextSelected"
		selectedbgcolor="Focus"
	}
	
	console_text
	{
 		font-family="Lucida Console"
		font-size=9
		font-family="Menlo" [$OSX]
      	font-size=14 [$OSX]
	    textcolor="text"
		selectedtextcolor="TextSelected"	
		selectedbgcolor="Focus"
	}
	
	friends_chat_text
	{
		textcolor="text"
		selectedtextcolor="TextentrySelected"	
		SelectedBgColor="focus"
		font-size=16
	}
	
	friends_chat_text_self
	{
		textcolor="ChatOwnTextColor"
		selectedtextcolor="TextentrySelected"	
		selectedbgcolor="focus"
		font-size=16
	}

	friends_chat_history
	{
		textcolor="ChatDialog.HistoryColor"
		selectedtextcolor="TextentrySelected"	
		selectedbgcolor="focus"
		font-size=16
	}
	
	friends_chat_event
	{
		textcolor="Text"
		font-size=16
		selectedtextcolor="TextentrySelected"
		selectedbgcolor="focus"
	}

	friends_chat_bright_event
	{
		textcolor="text"
		selectedtextcolor="TextentrySelected"
		font-size=16
		font-weight=400
	}

	friends_chat_url
	{
		textcolor="text"
   		SelectedBgColor="focus"
		font-style=underline
		font-size=16
		selectedtextcolor="TextentrySelected"
		selectedbgcolor="focus"
	}
	
	friends_chat_name_ingame
	{
		textcolor="Friends.InGameColor"
		selectedtextcolor="TextentrySelected"	
		selectedbgcolor="focus"
		font-size=16

	}
	
	friends_chat_self
	{
		textcolor="Friends.OnlineColor"
		selectedtextcolor="TextentrySelected"	
		selectedbgcolor="focus"
		font-size=16
	}
	
	friends_chat_name
	{
		textcolor="Friends.OnlineColor"
		selectedtextcolor="TextentrySelected"	
		selectedbgcolor="focus"
		font-size=16
	}
	
	friends_chat_accountid
	{
		selectedtextcolor="TextentrySelected"	
		selectedbgcolor="focus"
		textcolor="text"
		font-size=16
	}
	
	friends_chat_securitylink
	{
		textcolor="text"
		bgcolor="none"
		font-family=basefont
		font-size=16
		font-weight=400
		font-style=underline
		selectedtextcolor="TextSelected"	
		selectedbgcolor="Focus"
	}
	
	Chat_MenuButton_withChrome
	{
		font-family=basefont
		font-style="uppercase"
		font-size="13"
		font-weight=400
		textcolor="text"
		bgcolor="none"
		render_bg 
		{     
			// background fill
			0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, inactivescrollbar1, normalbutton2 )"
                
		}
		minimum-width=120
	}
	Chat_MenuButton_withChrome:hover
	{
		render_bg 
		{     
			// background fill
			0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, inactivescrollbar2, hoverscrollgrad )"
                
		}
	}
	Chat_MenuButton_withChrome:active
	{
		render_bg 
		{     
			// background fill
			0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, normalbutton1, normalbutton2 )"
                
		}
	}
	
	Chat_MenuButton_withChrome::disabled
  {
      textcolor="LabelDisabled"
      render_bg
      {     
        // background fill
        0="fill( x0 + 1, y0 + 1, x1 - 1, y1 - 1, none )"
                
        
      }
    }    
    
	
   	// used in friends tooltip and friends list for overriding regular styles with custom colors
   	friends_offline
   	{
   		textcolor="Friends.OfflineColor"
   	}
   	friends_online
   	{
   		textcolor="Friends.OnlineColor"
   	}
   	friends_ingame
   	{
   		textcolor="Friends.InGameColor"
   	}
   	friends_ignored
   	{
   		textcolor="Friends.IgnoredColor"
   	}
   	
   	TabPageCloseButton
   	{
   		padding-right=16
   	}

	SuperNavMenu
	{
		padding-left=8
		padding-right=8

		render {}

		render_bg
		{
			// top area and graphic
			0="image_tiled( x0, y0, x1, y0+275, graphics/dd_texture)"
			1="fill( x0, y0+0, x0+1, y1, buttonborderdisabled )"
			2="fill( x1-1, y0+0, x1, y1, buttonborderdisabled )"
			2="fill( x0, y1-1, x1, y1, buttonborderdisabled )"
		}
	}

	SuperNavMenuItem
	{
		padding=0
		font-size=14
		bgcolor=none
		font-style="uppercase"
	}

	SuperNavMenuItem:selected
	{
		textcolor="84 146 205 255"
	}

	SuperNavMenuItem:hover
	{
		textcolor="84 146 205 255"
	}

	"SuperNavMenuDivider"
	{
		textcolor="none"
		render {
			0="fill( x0+6, y0, x1-6, y0+1, none )"
			1="fill( x0+6, y0+1, x1-6, y0+2, SuperDivider )"
		}
	}
	
	"NotifyRemoteClientTitle"
	{
		textcolor="LabelDisabled"
	}
	
	"NotifyRemoteClientInfo"
	{
		textcolor="176 172 165 255"
	}

  }
}
