/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

.frametable{
	width:100%;
	height:auto;
	float:left;
	/*border:1px solid #CCC;*/
}

.frametable ul{
	list-style:none;
	margin:0;
	padding:0;
}

.frametable ul li {
	width:19.25%;
	float:left;
	list-style:none;
	padding-top:12%;/*width-height ratio golden ratio*/
	margin:0.25% 0.25% 0.25% 0.5%;
	border:1px solid #999;
	/*text-align:center;*/
}


.details{
	margin:2.5% 2%;
}


.frametable ul li h4{
	font-size:1em;
	line-height:100%;
	color:#fff;
	text-shadow:1px 1px 0 rgb(0,0,0);
}

.overlaydiscription{
	font-size:0.875em;
	color:#fff;
	padding:3% 0 0 0;
	text-shadow:1px 1px 0 rgb(0,0,0);
}


.frametable a{
	text-decoration:none;
}

.mosaic-block img{
	width:100%;
	min-width:150px;
}

@media only screen and (min-width:992px) and (max-width:1199px) {

	.frametable ul li {
		width:24.2%;
		padding-top:15%;/*width-height ratio golden ratio*/
	}

}

@media only screen and (min-width:768px) and (max-width:991px) {

	.frametable ul li {
		width:32.5%;
		padding-top:20%;/*width-height ratio golden ratio*/
	}

}

@media only screen and (min-width:500px) and (max-width:767px) {

	.frametable ul li {
		width:49%;
		padding-top:30%;/*width-height ratio golden ratio*/
	}

}

@media only screen and (max-width:499px) {

	.frametable ul li {
		width:98%;
		padding-top:61.8%;/*width-height ratio golden ratio*/
	}

}