/* Northland College WordPress theme main layout CSS */

/* DOM ELEMENTS */

#staging_alert {
	background: rgb(245,132,38);
	color: rgb(255,255,255);
	display: block;
	font-family: sans-serif;
	font-size: 9px;
	font-weight: bold;
	opacity: 0.5;
	padding: 0 0.667em;
	position: fixed; top: 0; left: 0;
	width: auto;
	z-index: 99999;
}

#wrapper {
	margin: 0;
	min-width: 1000px;
	padding: 70px 0 0 0;
	position: relative;
	width: 100%;
}

body.mynorthland #wrapper {
	padding-top: 80px;
}

body.in_iframe #wrapper {
	background-image: none !important;
}

#header {
	background: rgb(255,255,255);
	background-size: 15px 14px;
	height: 45px;
	position: absolute; top: 0; right: 0; bottom: auto; left: 0;
	z-index: 3;
}
body.in_iframe #header { display: none !important; }

	#logo {
		background: rgb(255,255,255) url('../images/logo.png') 6% 11px no-repeat;
		background-size: 270px 20px;
		height: 45px;
		margin: 0 auto;
		max-width: 1000px;
		overflow: hidden;
		position: relative;
		width: 100%;
	}

	body.mynorthland #logo {
		background-image: url('../images/my_logo.png');
	}

		#logo h1 {
			margin: 0;
			overflow: hidden;
			text-indent: -999px;
		}

		#logo a {
			position: absolute; top: 0; right: auto; bottom: 0; left: 0;
			width: 360px;
		}

#page {
	background: rgb(255,255,255);
	clear: both;
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
	z-index: 2;
}

body.in_iframe #page {
	padding-top: 0 !important;
}

	#page > div {
		background: rgb(255,255,255);
		margin: 0 auto;
		max-width: 1000px;
		min-height: 400px;
		position: relative;
		width: 100%;
	}
	#page > div:after { clear: both; content: ''; display: table; } /* Clearfix */

		#page > div > .content {
			clear: both;
			margin: 0;
			padding: 2.25em 60px 2.25em 60px;
			position: relative;
			width: auto;
		}
		#page > div > .content.with_sidebar { padding-left: 0; }
		#page > div > .content.with_sidebar.right { padding-right: 0; }
		#page > div > .content.sidebar { padding-right: 0; }
		#page > div > .content.sidebar.right { padding-left: 0; }
		
		#page > div > .content + .content:not(.sidebar) { padding-top: 0; }

		#page > div > .content + hr { margin-top: -1.5em; }
				
#footer {
	background: rgb(35,50,82);
	background-size: 15px 14px;
	clear: both;
	color: rgb(255,255,255);
	font-family: 'Alright Sans', sans-serif;
	font-size: 75%;
	font-weight: normal;
	letter-spacing: 0.05em;
	line-height: 1.75em;
	margin: 0;
	padding: 0;
	position: relative;
	text-transform: uppercase;
	width: 100%;
	z-index: 1;
}
body.in_iframe #footer { display: none !important; }

	#footer > div {
		background: rgb(35,50,82);
		background-size: 75px 75px;
		margin: 0 auto;
		max-width: 1000px;
		padding: 20px 60px 20px 60px;
		position: relative;
		width: 100%;
	}
	#footer > div:after { clear: both; content: ''; display: table; } /* Clearfix */

	#footer a, #footer a:visited {
		color: rgb(255,255,255);
	}
	
	#footer a:hover, #footer a:focus {
		color: rgb(245,132,38);
	}

	#footer .widget {
		position: relative;
		z-index: 1;
	}
	
	#footer .seal {
		background: transparent url('../images/seal.png') left top no-repeat;
		background-size: 75px 75px;
		float: left;
		height: 90px;
		width: 90px;
	}
	
	#footer .north {
		background: transparent url('../images/north.png') left bottom no-repeat;
		background-size: 23px 36px;
		float: left;
		height: 40px;
		width: 36px;
	}
	
	#footer .copyright {
		font-size: 85%;
		margin: 0.5em 0;
		opacity: 0.5;
	}

#preload {
	height: 1px;
	opacity: 0;
	overflow: hidden;
	position: fixed; top: -1px; left: -1px;
	width: 1px;
	z-index: -1;
}


/* CSS3 MEDIA QUERIES */

/* PRINT */
@media print {

}


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

	#wrapper {
		min-width: 1280px;
		padding-top: 80px;
	}

	#header, #logo { height: 50px; }
	#logo, #page > div, #footer > div { max-width: 1280px; }
	#logo {
		background-image: url('../images/logo_x2.png');
		background-size: 338px 25px;
	}
	body.mynorthland #logo { background-image: url('../images/my_logo_x2.png'); }

	#logo a { width: 450px; }
	
	#page {
		background: rgb(255,255,255) url('../images/page_bg_x2.png') center top repeat fixed;
		background-size: 41px 39px;
	}

}


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

	#page {
		background: rgb(255,255,255) url('../images/page_bg_x2.png') center top repeat fixed;
		background-size: 41px 39px;
	}

}


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

	#wrapper { min-width: 782px; }

}


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

	#wrapper {
		background: rgb(255,255,255);
		left: 0;
		margin: 0;
		min-width: 600px;
		overflow: hidden;
		transition: left 300ms;
		width: 100%;
	}

	#wrapper, body.mynorthland #wrapper {
		padding-top: 45px;
	}
	
	body.main_nav_open #wrapper {
		left: -280px;
		overflow: visible;
	}
	
	#logo {
		background-image: url('../images/logo_x2.png');
		background-position: 15px 13px;
		background-size: 243px 18px;
		border-bottom: 1px solid rgba(0,0,0,0.1);
		position: fixed;
		transition: box-shadow 1000ms;
	}
	body.mynorthland #logo { background-image: url('../images/my_logo_x2.png'); }
	body.scrolled #logo { box-shadow: 0 0 5px rgba(0,0,0,0.2); }

	#logo a { width: 280px; }
		
	#page > div > .content {
		padding-right: 20px !important;
		padding-left: 20px !important;
	}

	#footer > div {
		padding-right: 20px;
		padding-left: 20px;
	}

	#footer .copyright {
		clear: both;
	}
	
	#footer .widget {
		clear: both;
		float: none !important;
	}

}


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

	#wrapper { min-width: 320px; }

	#logo {
		background-position: 15px 15px;
		background-size: 203px 15px;
	}

	#logo a { width: 240px; }
		
}


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

	#logo { background-image: url('../images/logo_x2.png'); }
	body.mynorthland #logo { background-image: url('../images/my_logo_x2.png'); }

	#footer .seal { background-image: url('../images/seal_x2.png'); }
	#footer .north { background-image: url('../images/north_x2.png'); }

}