/*
 * 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;*/
}

.frametable ul li:hover{
	border:1px solid #F1C40F;
	box-shadow:0px 0px 5px #E67122;
	/*border:1px solid #B0C4DE;
	box-shadow:0px 0px 5px #6495ED;*/

}

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



.frametable a{
	text-decoration:none;
}

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

.imagecontainer{
    position:relative;	
}



.textoverimage{
    z-index:4;
    position:absolute;    
    color:white;
    font-size:24px;
    font-weight:bold;
    left:0;
    bottom:0;
	width:100%;
	background-color:#000000;
}


@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*/
	}

}