/*<meta conditions="" />*/

/*Source: England, Phil, “Three Styling Options for Interactive Buttons in MadCap Flare’s Responsive HTML5 Outputs.” (www.madcapsoftware.com/blog/pro-tips-three-styling-options-for-interactive-buttons-in-madcap-flares-responsive-html5-outputs) */

div.ButtonArray	/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	margin-top: 20px;
}

div.ButtonArray::before
{
	content: " ";
	display: table;
}

div.ButtonArray::after
{
	content: " ";
	display: table;
	clear: both;
}

div.ButtonArray span
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 18pt;
	color: #ffffff;
	background-color: var(--HennDeepBlue);
	min-height: 65px;
	/*	height: 110px; */
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}

/* Four tiles */

/*
div.ButtonArray > a:nth-child(1) > span
{
	width: 16.667%;
	margin-left: 12.667%;
}

div.ButtonArray > a:nth-child(2) > span
{
	width: 16.667%;
	margin-left: 2%;
}

div.ButtonArray > a:nth-child(3) > span
{
	width: 16.667%;
	margin-left: 2%;
}

div.ButtonArray > a:nth-child(4) > span
{
	width: 16.667%;
	margin-left: 2%;
}
*/

/* Two tiles */

div.ButtonArray > a:nth-child(1) > span
{
	width: 30%;
	margin-left: 19%;
}

div.ButtonArray > a:nth-child(2) > span
{
	width: 30%;
	margin-left: 2%;
}

/*The @media queries below allow our button array to respond to changes in the display window's width*/

@media only screen and (max-width: 950px)
{
	div.ButtonArray > a:nth-child(1) > span
	{
		width: 40%;
		margin-left: 7.5%;
		margin-bottom: 30px;
	}

	div.ButtonArray > a:nth-child(2) > span
	{
		width: 40%;
		margin-left: 5%;
		margin-bottom: 30px;
	}

	div.ButtonArray > a:nth-child(3) > span
	{
		width: 40%;
		margin-left: 7.5%;
		margin-bottom: 30px;
	}

	div.ButtonArray > a:nth-child(4) > span
	{
		width: 40%;
		margin-left: 5%;
		margin-bottom: 30px;
	}
}

@media only screen and (max-width: 768px)
{
	div.ButtonArray > a:nth-child(1) > span
	{
		width: 80%;
		margin-left: 10%;
		margin-bottom: 30px;
	}

	div.ButtonArray > a:nth-child(2) > span
	{
		width: 80%;
		margin-left: 10%;
		margin-bottom: 30px;
	}

	div.ButtonArray > a:nth-child(3) > span
	{
		width: 80%;
		margin-left: 10%;
		margin-bottom: 30px;
	}

	div.ButtonArray > a:nth-child(4) > span
	{
		width: 80%;
		margin-left: 10%;
		margin-bottom: 30px;
	}
}

span.Button
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 18pt;
	color: #ffffff;
	background-color: var(--HennDeepBlue);
	min-height: 65px;
	border-radius: 4px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}

span.Button:hover
{
	background-color: var(--HennDarkGray);
}

span.Button:active
{
	position: relative;
	top: 2px;
	left: 1px;
	color: #000000;
	background-color: var(--HennLightGray);
}