.cssPageCtl
{
	position: relative;
	text-align: center;
}

.cssCell
{
	width: 200px;
	height: 170px;
	display: inline-block;
	vertical-align: middle;
	margin: 7px;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding: 3px 7px 3px 7px;
}

	.cssCell:hover
	{
		border: 1px solid #a9a9a9;
	}

.cssCompanyName
{
	text-align: center;
}

.cssHeading
{
	font-weight: bold;
}

.cssListLogo
{
	text-align: center;
	height: 75px;
	position: relative;
}

	/* to get the image centered vertically in the tile.  Came from the web and seemed to work
	in all scenarios I tested.   */
	.cssListLogo img
	{
		max-height: 100%;
		max-width: 100%;
		width: auto;
		height: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

a.cssListLink
{
	cursor: pointer;
	text-decoration: none;
}

.cssResultsMore
{
	white-space: nowrap;
}

/* The popup related css */
div.cssPopup
{
	visibility: hidden;
	margin-left: 1%;
	width: 97%;
	background-color: #F2F2F2;
	text-align: center;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
	left: 0px;
	border: 1px solid #BFBFBF;
}

	div.cssPopup .cssPopupBody
	{
		display: table;
	}

	div.cssPopup .cssPopupMain
	{
		text-align: left;
		vertical-align: top;
		padding: 0px 10px 10px 15px;
	}

	div.cssPopup .cssPopupCategory
	{
		text-align: left;
		padding: 0px 10px 10px 15px;
	}

	div.cssPopup .cssPopupClose
	{
		display: table-row;
	}

		div.cssPopup .cssPopupClose .cssClose
		{
			padding: 5px 10px 3px 5px;
			display: table-cell;
			text-align: right;
			width: 100%;
			display: table-cell;
		}

	div.cssPopup .cssHeading
	{
		margin-bottom: 5px;
	}


.cssPopupMain .cssDescription
{
	margin-top: 5px;
}

.cssPopupCategory .cssCategoryList
{
	margin-left: 20px;
}

/* this is all about getting the arrow up on the top of the popup.  It is done via
	divs to keep from resorting to images  */
.cssPopupArrow
{
	visibility: hidden;
}

	.cssPopupArrow:before, .cssPopupArrow:after
	{
		top: 109px;
		content: '';
		display: block;
		position: absolute;
		bottom: 100%;
		width: 0;
		height: 0;
		z-index: 9999;
		margin-left: 22%;
	}

	.cssPopupArrow:before
	{
		left: 31px;
		border: 29px solid transparent;
		border-bottom-color: #BFBFBF;
	}

	.cssPopupArrow:after
	{
		left: 30px;
		border: 30px solid transparent;
		border-bottom-color: #F2F2F2;
	}

	/* Toggle this class - hide and show the popup */
	.cssPopup.show,
	.cssPopupArrow.show
	{
		visibility: visible !important;
	}

@media (min-width:601px)
{

	/* The popup related css */
	div.cssPopup .cssPopupBody
	{
		display: table;
	}

	div.cssPopup .cssPopupMain
	{
		display: table-cell;
	}

	div.cssPopup .cssPopupCategory
	{
		display: table-cell;
		padding-left: 10px;
		width: 35%;
	}
}

/* this is when we hit 3 columns today. . . from that point we want to be left aligned to avoid columns of 1 centering */
@media (min-width:707px)
{
	.cssPageCtl
	{
		text-align: inherit;
	}
}