/* Northland College WordPress theme spotlight tiles CSS */

.spotlight {
	clear: both;
	margin: 0 60px 1.25em 60px;
	position: relative;
	padding: 0;
	width: auto;
}

.content .spotlight {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.tiles {
	display: block;
	list-style: none !important;
	margin-right: -1em;
	padding: 0 !important;
}

	.tiles li {
		background-color: transparent;
		border-right: 1em solid rgb(255,255,255);
		border-bottom: 1em solid rgb(255,255,255);
		color: rgb(255,255,255);
		display: inline-block;
		font-family: 'Alright Sans', sans-serif;
		font-size: 75%;
		font-weight: bold;
		height: 180px;
		line-height: 1.25em !important;
		overflow: hidden;
		padding: 0;
		position: relative;
		text-transform: uppercase;
		vertical-align: top;
		width: 33.333%;
	}
	
		.tiles li * {
			line-height: 1.25em !important;
		}

		.tiles li > a {
			color: inherit !important;
			display: block;
			overflow: hidden;
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			text-indent: -999px;
			z-index: 2;
		}

		.tiles li > a:hover, .tiles li > a:focus {
			border: none !important;
		}
		
		.tiles li img {
			width: 100%;
		}

		.tiles li .caption {
			background: rgb(171,171,171); /* IE8 fallback */
			background: rgba(0,0,0,0.5);
			margin: 0;
			padding: 0.5em;
			position: absolute; top: auto; right: 0; bottom: 0; left: 0;
		}
				
			.tiles li .caption .readmore {
				color: rgb(245,132,38);
				font-size: 100%;
				margin-top: 0.25em;
			}
		
			.tiles li:hover .caption .readmore {
				color: rgb(255,255,255);
			}
		
			.tiles li .caption .readmore:after {
				color: rgb(245,132,38);
				content: ' \25b8';
			}


/* CSS3 MEDIA QUERIES */

/* PRINT */
@media print {

}


/* LARGE SCREENS (content area over 1280 pixels) */
@media screen and (min-width: 1280px) {

}


/* INTERMEDIATE SCREENS (content area between 1000 and 1279 pixels) */
@media screen and (min-width: 1000px) and (max-width: 1279px) {

}


/* TABLETS (content area under 1000 pixels) */
@media screen and (max-width: 1000px) {

	.tiles li { width: 50%; }

}


/* PHONES (content area under 782 pixels) */
/* Matched to size where WP mobile admin bar appears */
@media screen and (max-width: 782px) {

	.spotlight {
		margin-right: 20px;
		margin-bottom: 1em;
		margin-left: 20px;
	}

}


/* SMALL PHONES (content area under 600 pixels) */
@media screen and (max-width: 600px) {

	.tiles { margin-right: 0; }

	.tiles li {
		border-right: none;
		display: block;
		margin: 0 0 5px 0;
		width: 100%;
	}

}


/* HIGH RESOLUTION IMAGE REPLACEMENTS */
@media	only screen and (-moz-min-device-pixel-ratio: 1.5),
		only screen and (-o-min-device-pixel-ratio: 3/2),
		only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-devicepixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx)
{

}