/*<meta />*/

/* This local stylesheet is used only with the icon grid used in the Document product's topic category page. */
/* The following sets a border on each table cell. */

table.TableStyle-IconGrid td
{
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #f3f3f3;
	background-color: #ffffff;
	box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.15);
	border-radius: 4px;
	outline: none;
	cursor: pointer;
}

/* The following changes the border color on a mouseover or tap. The box-shadow, not currentl used, adds a dropshadow as well. */

table.TableStyle-IconGrid td:hover
{
	border: none;
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
	background-color: #ffffff;
}

/* The following changes the border and the rollover effect on unused cells. 
   1. In Flare, ensure that only the last table row is assigned the style "LastRow." (This row style is defined in the IconGrid table stylesheet.) 
      All preceding table rows must use the default row style.
   2. The "nth-child(x)" markup designates the cell that is affected. nth-child(1) is the first cell, nth-child(4) is the last cell.
   3. When designating multiple cells, separate the entries with a comma. There CANNOT be a comma after the final entry
*/

tr.TableStyle-IconGrid-Body-LastRow > td:nth-child(1),
tr.TableStyle-IconGrid-Body-LastRow > td:nth-child(4)
{
	border: none;
	background-color: var(--White);
	box-shadow: none;
}

tr.TableStyle-IconGrid-Body-LastRow > td:hover:nth-child(1),
tr.TableStyle-IconGrid-Body-LastRow > td:hover:nth-child(4)
{
	border: none;
	box-shadow: none;
	background-color: var(--White);
	box-shadow: none;
}

@media only screen and (max-width: 1179px)
{
	/* Set up tablet styles here if needed. Tablet layout currently uses the same icon table as the desktop layout. */
}

@media only screen and (max-width: 700px)
{
	/* Mobile styles here. Mobile uses a two-column layout, so if the number of tiles isn't even, you will probably want to 
	   hide the second cell in the last row which shouldn't contain an icon. 
	   In Flare, assign the style "LastRow" only to the last row in the table. (This row style is defined in the IconGrid table stylesheet.) 
	   All preceding table rows must use the default row style. */

	tr.TableStyle-IconGrid-Body-LastRow > td:nth-child(1)
	{
		border: 2px solid var(--Gray-ExtraLight);
	}

	tr.TableStyle-IconGrid-Body-LastRow > td:hover:nth-child(1)
	{
		border: 2px solid var(--Product-Color);
	}

	tr.TableStyle-IconGrid-Body-LastRow > td:nth-child(2)
	{
		border: none;
		box-shadow: none;
		background-color: var(--White);
	}

	tr.TableStyle-IconGrid-Body-LastRow > td:hover:nth-child(2)
	{
		border: none;
		box-shadow: none;
		background-color: var(--White);
	}
}