table.gallery {
	table-layout:fixed;
	margin-top:0.5em;
	margin-bottom:0.5em;
	margin:0.5em auto 0.5em auto;
}
td.galleryImg, td.galleryTxt {
/*	background: url('bg/bg-black-10.png');*/
	border:1px solid #999;
	text-align:center;
	padding:0;
	margin:0;
	overflow:hidden; /* 2015-07-10 */
}
td.galleryImg span {
	overflow:hidden;
}
a:link.galleryImg, a:link.galleryTxt, a:visited.galleryImg, a:visited.galleryTxt {
	display:block;
}
a:link:hover.galleryImg, a:visited:hover.galleryImg, a:link:hover.galleryTxt, a:visited:hover.galleryTxt {
/*	background:url('bg/bg-white-50.png');*/
}
div.galleryTxt {
	text-align: center;
	font-size: 7pt;
	line-height: 10px;
	letter-spacing: 0pt;
	padding:2px;
}

.sfpg a.home {
	padding-left:18px;
	background:url('./images/icons/home.gif') no-repeat left -1px;
}
.sfpg .directory {
	margin-bottom:4px;
	padding-left:18px;
	background:url('./images/icons/files.gif') no-repeat left -2px;
	cursor:pointer;
}
.sfpg .pagination {
	display:block;
	text-align:center;
}
.sfpg .pagination a, .sfpg .pagination strong {
	display:inline-block;
	border:1px solid #66F;
	background:#FFF;
	padding:0 4px;
	margin:2px 2px;
	text-decoration:none;
}
.sfpg .pagination strong {
	color: #666;
	border-color:#666;
	background-color:#EEE;
}

table.sfpg {
	width:100%;
	empty-cells:show;
	table-layout:fixed;
	margin-top:1em;
	box-sizing:content-box;
	border-collapse:separate;
}
table.sfpg td {
/*	padding:4px;*/
	overflow:hidden;
	vertical-align:top;
	box-sizing:content-box;
}
table.sfpg td.spacer_col {
}

table.sfpg a {
	padding:2px;
}
table.sfpg .directory {
	font-size:0.85em;
	font-weight:bold;
/*	white-space:nowrap;*/
}
table.sfpg img {
	margin:4px 0;
}
.sfpg .navi {
	font-weight:bold;
}
table.sfpg .fullimg {
	text-align:center;
}
table.sfpg .gallery_stats {
	font-size:0.75em;
	color:#000;
}


/** 2015-07-17
* New PHP Created Gallery
*/
ul.gallery {
	clear:both;
	text-align: center;
	vertical-align:top;
	margin:1em 0;
	padding:0;
	font-size:0.775em;
}
ul.gallery li {
	display: inline-block;
	vertical-align:top;
	box-sizing: border-box;
/*	margin:4px;*/
	padding:0;
	list-style-type:none;
}
ul.gallery li > div {
	overflow:hidden;
	box-sizing: border-box;
	margin:4px;
	max-height:100%;
}
ul.gallery .caption {
	display:block;
	border: 1px solid #999;
	background:rgba(0,0,0,0.10);
	margin-bottom:2px;
}
ul.gallery a {
	display:block;
	vertical-align:middle;
	border: 1px solid #999;
	background:rgba(0,0,0,0.10);
	box-sizing: border-box;
	padding:4px;
	overflow:hidden;
	max-height:100% !important;
}
ul.gallery a:hover {
	background:rgba(255,255,255,0.50);
}

ul.gallery.clean a,
ul.gallery.clean a:hover,
ul.gallery.clean .caption {
	border:0;
	background:transparent none;
	padding:0;
}

/* Vertically centering an image: http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div */
ul.gallery a:before {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

/* column layout */
ul.gallery.col-x {
}
ul.gallery.col-x li img {
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
	vertical-align:middle;
}
ul.gallery.auto-height li a{
	height:auto;
}
/* column layout - specific number of columns*/
ul.gallery.col-x-2 li {
	width:50%;
}
ul.gallery.col-x-3 li {
	width:33.3%;
}
ul.gallery.col-x-4 li {
	width:25%;
}
ul.gallery.col-x-5 li {
	width:20%;
}
ul.gallery.col-x-6 li {
	width:16.66%;
}
ul.gallery.col-x-7 li {
	width:14.28%;
}