/* Northland College WordPress theme expanders CSS */

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

.expanders:first-child {
	margin-top: 0;
}

.content .expanders {
	margin-left: 0;
	margin-right: 0;
}

	.expander {
		clear: both;
		display: block;
		margin-bottom: 1em;
	}
	.expander:after { clear: both; content: ''; display: table; } /* Clearfix */
	
		.expander .toggle {
			background: transparent url('../images/toggle_reversed_closed.png') left center no-repeat;
			background-size: 26px 100px;
			cursor: pointer;
			padding: 5px 0 0 30px;
			-moz-user-select: none;
			-webkit-user-select: none;
			user-select: none;
		}
		
			.expander .toggle * {
				margin: 0;
			}
		
		.expander.open .toggle {
			background-image: url('../images/toggle_reversed_open.png');
		}
		
		.expander .content {
			border-top: none;
			display: block;
			height: 0;
			overflow: hidden;
			padding: 0.5em 0 0 30px !important;
			transition: max-height 200ms ease;
		}
		
		.expander.open .content {
			height: auto;
			padding: 1em 0 1em 30px;
		}
		
/* 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) {

}


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

	.expanders {
		margin-right: 20px !important;
		margin-bottom: 1em;
		margin-left: 20px !important;
	}
	.content .expanders {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

}


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

}


/* 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)
{

	.expander .toggle {
		background-image: url('../images/toggle_reversed_closed_x2.png');
	}
	.expander.open .toggle {
		background-image: url('../images/toggle_reversed_open_x2.png');
	}

}