﻿.hb-wrapper h1:first-of-type
{
	font-size: 200%;
	font-weight: 200;
	margin: 0;
}

.hb-forum-description
{
	display: block;
	color: slategray;
	font-size: 90%;	
	margin-bottom: 1em;
	font-style: italic;
}

#thread-list
{
	width: 100%;
	border-collapse: collapse;	
}
	#thread-list tr:first-of-type
	{
		border-top: 2px solid silver;
	}	

	#thread-list tr
	{		
		border-bottom: 1px solid silver;
	}

	#thread-list th
	{
		background-color: whitesmoke;
		padding: 1ex 0;
	}

	#thread-list td
	{
		padding: .4ex 0;
	}
	
	#thread-list th:first-child
	{
		text-align: right;
	}

	/* No. */
	#thread-list tr td:first-child
	{
		min-width: 3em;
		width: 3em;
		text-align: right;
		padding-right: .5em;
		font-size: 80%;
	}

	#thread-list tr td:nth-child(2) > img:first-of-type
	{
		display: inline-block;
		width: 34%;		
		max-width: 180px;
	}

	#thread-list tr td:nth-child(2) > div:first-of-type
	{
		display: inline-block;
		vertical-align: top;
		width: 60%;
		padding: 0 1%;
	}

	#thread-list tr td:nth-child(2) .desc
	{
		font-size: 86%;
		color: dimgray;
		font-style: italic;
		margin: 1ex 0;
	}
	/* Subject */
	/*#thread-list tr td:nth-child(2):before
	{
		content: "";
		display: inline-block;
		vertical-align: middle;
		height: 100%;
	}

		#thread-list tr td:nth-child(2) > img:first-of-type
		{
			display: inline-block;
			vertical-align: middle;
			max-width: 120px;
			max-height: 90px;
		}

		#thread-list tr td:nth-child(2) > div:first-of-type
		{
			display: inline-block;
			vertical-align: middle;
		}*/
	/* Replies */
	#thread-list tr td:nth-child(3)
	{
		width: 2em;
		text-align: center;
	}

	/* Views */
	#thread-list tr td:nth-child(4)
	{
		width: 3em;
		text-align: center;
	}

	/* Posted */
	#thread-list tr td:nth-child(5)
	{
		width: 6em;
	}

	/* Account */
	#thread-list tr td:last-child, #thread-list tr th:last-child
	{
		width: 6.5em;
		max-width: 8em;
		white-space: nowrap;
		overflow: hidden;
		text-align: left
	}

	/* For mobile */
	#thread-list.mobile, #thread-list.mobile thead, #thread-list.mobile tbody, #thread-list.mobile tr
	{
		display: block;
		font-size: 95%;
	}
		
	#thread-list.mobile tr
	{
		border-bottom: 1px solid #eee;
	}
		
	#thread-list.mobile tr:first-of-type
	{
		margin-bottom: .7em;
		color: slategray;
	}
		
	#thread-list.mobile th, .mobile td
	{
		display: inline-block;
		border: none;
		padding: .1em;
		position: relative;
	}
		
	#thread-list.mobile tr > *:nth-of-type(1) { display: none; }
	#thread-list.mobile tr > *:nth-of-type(2) { display: block; font-size: 120%; }
	#thread-list.mobile tr td:nth-child(2) .desc { /*display: none;*/ max-height: 6ex; overflow: hidden }

	#thread-list.mobile tr > td:nth-child(n+3) { display: inline; background-color: whitesmoke; border-radius: 3px; padding: 0 .5ex; }
	#thread-list.mobile tr > td:nth-child(3):before { content: 'Replies: '; }
	#thread-list.mobile tr > td:nth-child(4):before { content: 'Views: '; }
	#thread-list.mobile tr > td:nth-child(5):before { content: 'Posted: '; }
	#thread-list.mobile tr > td:nth-child(6):before { content: 'By: '; }
	/* End of mobile */

#thread-list-nav
{	
}

	#thread-list-nav > div
	{
		text-align: center;
		margin: 1em;
	}

	#thread-list-nav #keyword
	{		
		max-width: 60%;
	}

	#thread-list-nav #keyword + a
	{
		margin: 0 0 0 1ex;
	}

#album-list
{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}

	#album-list .tilebox
	{
		flex: 1 1 auto;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
		min-width: 160px;
		max-width: 320px;
		height: 150px;
		font-size: 90%;
		margin: 0 1ex 1ex 0;
		border: 1px solid lightgray;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: white;
	}

		#album-list .tilebox > a
		{
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		#album-list .tilebox .content
		{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 98%;
			padding: 1%;
			height: 35%;
			overflow: hidden;
			color: whitesmoke;
			background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 45%, rgba(0,0,0,0.65) 100%);
			background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 45%,rgba(0,0,0,0.65) 100%);
			background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 45%,rgba(0,0,0,0.65) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
		}

			#album-list .tilebox .content > h3
			{
				color: white;
				text-shadow: 0 0 4px rgba(0,0,0,.8);
				margin: 0 0 .4ex 0;
				white-space: nowrap;
				font-size: 125%;
				line-height: 1.2;
				font-weight: 500;
			}

			#album-list .tilebox .content a
			{
				color: inherit;
			}

				#album-list .tilebox .content a:hover
				{
					text-decoration: none;
				}

	#album-list sup
	{
		position: sticky;
		right: 0;
		color: darkorange;
		background-color: white;
		padding: 0 .3em;
		border-radius: 3px;
		text-shadow: none;
		font-size: 76%;
	}

.hb-pager
{
	display: inline-block;
	text-align: center;			
	min-width: 10em;
	width: 50%;
}

	.hb-pager span
	{
		padding: .2ex .5ex;
	}