@charset "utf-8";

table
{
	border-collapse:collapse;
	width: 100%;
}

td
{
	border-top: 1px solid #CCC;
	border-bottom: none;
	padding: 5px 10px 5px 0px;
}

/*This cell was being stretched in order to fill the requried with of tables. I forced the first cell of each row to have a width of 120px.*/
td:first-child
{
	width: 125px;
}

img
{
	border-style: none;
	/*border: 1px solid black;*/
}

h2 a {
	font-weight: 300;
	color: #4200FF;
}
/*moved to mainStyles.css
.highlight
{
	color: #353B8F;
	font-weight: bold;
}*/
div.tiled
{
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	display: flex;
	flex-wrap: wrap;
}
div.tiled div.product
{
	padding: 0 10px;
	margin: 10px 0px;
	/*width: 33%;*/
}
div.tiled figure img, div.tiled figcaption
{
	width: 120px;
	border-radius: 7px;

	border:1px solid #DDD;
	/*border: 1px solid #DDD;
	-webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);
	box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);*/
}
div.tiled figure img[src="/logo/folder.jpg"]
{
	border: 1px solid white;
}
div.tiled figure
{
	margin: 0 auto;
	/*width:120px;*/
}
div.tiled figcaption
{
	border:1px solid #DDDDDD;
	background-color: #F1F1F1;
	padding-left: 5px;
	padding-right: 5px;
	word-wrap:break-word;
	max-width: 120px;

	-webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);
	box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);
	/*width:120px;
	border-radius: 7px;*/
}


@media (min-width:320px) {
	td:first-child
	{
		max-width:30%;
	}
}

 @media (min-width:959px) {
	td:first-child
	{
		max-width:none;
		width: 125px;
	}
 }