/*
 * 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 {
	display:block;
	width:32%;
	float:left;
	list-style:none;
	margin:0.5% 0.5% 0.5% 0.75%;
	border:1px solid #999;
	/*text-align:center;*/
}

.frametable ul li:hover{
	/*-moz-box-shadow: 0 0 5px rgba(0,0,0,0.8);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.8);
	box-shadow: 0 0 5px rgba(0,0,0,0.8);*/
	border:1px solid #F1C40F;
	box-shadow:0px 0px 5px #E67122;
}

.imagecontainer{
    position:relative;
	width:100%;
}

.textoverimage{
    z-index:100;
    position:absolute;    
    color:white;
    font-size:24px;
    font-weight:bold;
    left:0;
    bottom:0;
	width:100%;
	background-color:#000000;
}

.frametable ul li h4{
	font-size:0.825em;
	margin:3%;
	line-height:100%;
	color:#fff;
	text-shadow:1px 1px 0 rgb(0,0,0);
}

.frametable ul li a{
	text-decoration:none;
}




img{
	width:100%;
	min-width:150px;
}

@media only screen and (min-width:500px) and (max-width:767px) {

	.frametable ul li {
		width:48.5%;
	}

}

@media only screen and (max-width:499px) {

	.frametable ul li {
		width:98%;
	}

}