/*
   Styles for the base DOTA context menu.

   This handles the arrows and background for a context menu. Individual xml/css
   files provide the contents for specific types of context menus
*/

#Contents
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #303030fc ), to( #333333fc ) );
	padding: 7px 10px 10px 10px;
	border: 2px solid black;
	margin: 5px;
}

#LeftArrow, #RightArrow, #TopArrow, #BottomArrow
{
	background-repeat: no-repeat;
	background-position: 0px 0px;
	
   /* The arrows sit at a higher z-index than the body of the tooltip.
	  This is so that the arrow can overlap on top of the border to
	  give it a more seamless look */
	z-index: 1;
	
	/* Not visible by default */
	visibility: collapse;
}

#LeftArrow, #RightArrow
{
	/* Closely matches the actual image file contents, with a slightly
	   smaller width so that it overlaps the body correctly. */
	width: 31px;
	height: 38px;

	/* Include a margin at the top and bottom*/
	margin-top: 4px;
	margin-bottom: 4px;
}
#LeftArrow
{
	background-image: url( "file://{images}/tooltip_arrow_left.png" );
	
	/* 2 pixels of overlap since the border is 2 pixels */
	margin-right: -2px;
}
#RightArrow
{
	background-image: url( "file://{images}/tooltip_arrow_right.png" );
	margin-left: -2px;
}

#TopArrow, #BottomArrow
{
	width: 38px;
	height: 31px;
	margin-left: 4px;
	margin-right: 4px;
}
#TopArrow
{
	background-image: url( "file://{images}/tooltip_arrow_top.png" );
	margin-bottom: -2px;
}
#BottomArrow
{
	background-image: url( "file://{images}/tooltip_arrow_bottom.png" );
	margin-top: -2px;
}

/* The code will automatically set these styles on the tooltip body, so we just need to adjust the visibility */
#ContextMenuBody.LeftArrowVisible #LeftArrow
{
	visibility: visible;
}
#ContextMenuBody.RightArrowVisible #RightArrow
{
	visibility: visible;
}
#ContextMenuBody.TopArrowVisible #TopArrow
{
	visibility: visible;
}
#ContextMenuBody.BottomArrowVisible #BottomArrow
{
	visibility: visible;
}

.ContextMenu_NoArrow #ContextMenuBody.LeftArrowVisible #LeftArrow
{
	visibility: collapse;
}
.ContextMenu_NoArrow #ContextMenuBody.RightArrowVisible #RightArrow
{
	visibility: collapse;
}
.ContextMenu_NoArrow #ContextMenuBody.TopArrowVisible #TopArrow
{
	visibility: collapse;
}
.ContextMenu_NoArrow #ContextMenuBody.BottomArrowVisible #BottomArrow
{
	visibility: collapse;
}

/* When an arrow is visible, remove the margin from that side 
   and make sure the side is big enough that the arrow doesn't look silly */
#ContextMenuBody.LeftArrowVisible #Contents
{
	margin-left: 0px;
	min-height: 60px;
}
#ContextMenuBody.RightArrowVisible #Contents
{
	margin-right: 0px;
	min-height: 60px;
}
#ContextMenuBody.BottomArrowVisible #Contents
{
	margin-bottom: 0px;
	min-width: 60px;
}
#ContextMenuBody.TopArrowVisible #Contents
{
	margin-top: 0px;
	min-width: 60px;
}


/* Flow the contents properly */
#ContextMenuBody
{
	flow-children: down;
}
.ContextMenuBodyRow
{
	flow-children: right;
}


SteamUIContextMenuHome
{
	margin-left: -60px;
}