@charset "utf-8";

div.tn {
  display: table;
  border: none;
  width: 100%; 
}

div.tn figure {
	display: table-cell;
	float: left;
	width: 32%;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	margin: 1px;
	margin-right: 5px;
	margin-bottom: 5px;
	height:235px;	/* 2023-01-25: 225 > 235 */
	overflow: hidden;
	border: 1px solid #CCC;
    border-radius: 15px;
	box-shadow: 2px 2px 4px #888888;
}

div.tn figure.dblwidth { 
  width: 65%; 
}

div.tn figure.triwidth { 
  width: 99%; 
}

div.tn figure.hide_mobile { 
  display: none; 
}
div.tn figure img {
  width: auto;
  max-width: 95%;
  margin-top: 30px;   /* extra margins for landscape ftos */
  margin-bottom: 10px;
}

div.tn figure img.portrait, div.tn figure img.icon { 
  margin-top: 0; 
  margin-bottom: 0;
}

div.tn figure figcaption {
  display: inline-block;
  clear: left;
  padding-left: 0.3em;
  padding-right: 0.3em;
  font-size: 16px;
/*  margin-bottom: 30px;   /* extra margins for landscape ftos */
}  

div.tn figure figcaption.portrait {
/*  margin-bottom: 0;   /* no extra margins for portrait ftos */
}  

div.tn figure.show_mobile a, div.tn figure.hide_desktop a {
  background: url('/loadfile.php?png=clickable') left 50% no-repeat;
  padding-left: 20px;
}  
div.tn figure.show_mobile a:hover, div.tn figure.show_mobile a:active, div.tn figure.hide_desktop a:hover, div.tn figure.hide_desktop a:active {
  background-color: #BBEEFF;
}

/* for 1-col mobile */
@media only screen and (max-device-width:399px)
{
  div.tn figure, div.tn figure.dblwidth, div.tn figure.triwidth { width: 99%; max-width: 99%; }
  div.tn figure {
    padding-top: 10px; 
	height: auto;
  }	
  div.tn figure img { 
    margin-top: 0; 
    margin-bottom: 0;
  }
}

/* for 2-col mobile */
@media only screen and (min-device-width:400px) and (max-device-width:960px)
{
  div.tn figure { width: 47.5%; max-width: 47.5%; }
  div.tn figure.dblwidth, div.tn figure.triwidth { width: 96.5%; max-width: 99%; }
  div.tn figure.show_mobile, div.tn figure.hide_desktop { clear: left;  width: 96.5%; max-width: 99%;  height: auto; }
}

/* for 3-col mobile */
@media only screen and (min-device-width:960px)
{
  div.tn figure { width: 32%; max-width: 32%; }
  div.tn figure.dblwidth { width: 65%; max-width: 65%; }
  div.tn figure.triwidth { width: 99%; max-width: 99%; }
  div.tn figure.hide_mobile { display: table-cell; }
  div.tn figure.show_mobile, div.tn figure.hide_desktop { display: none; }
}