/* 
 * Responsive Layout declarations
 * Author: Sebastien Marchal / BrockU
 *
 * Mainly used to set font and layout changes between sizes.
 *
 */


/* General
----------------------- */

@media only screen and (min-width: 841px) {
	/* This restores the menus when going from mobile view to desktop view */
	#sidebar-menu .sidebar-menu {
		display: block !important;
	}
	div.omni-menu,
	#sidebar-menu,
	#main-menu-container .main-menu-parent {
		display: inherit !important;
	}
	/* Some layout cleanup */
	.main-menu-parent .omni-menu,
	.main-menu-parent #searchform,
	#container .widget-area.cloned,
	.main-menu-parent .primary-phone-number {
		display: none;
	}
}


/* Extra Large Screen
----------------------- */

@media only screen and (min-width: 2001px) {
	/* for anything above n, do this. */
	/* Global layout */
	.drawer-subcontainer,
	.container,
	#header-subcontainer,
	#bc-sub-container,
	#container,
	#site-title,
	#site-title h1,
	#landing-menu-subcontainer,
	#footer-utility,
	#main-menu-container .menu-inner-container {
		width: 1600px !important;
	}
	/* Largest font size for large screen display */
	body {
		/* font-size: 100%; */
	}
	body .entry-content {
		font-size: 100%;
	}
	#content {
		font-size: 1.2em;
	}
	#footer-utility {
		font-size: 1.1em;
	}
	#colophon ul#social li a {
		font-size: 1.7em;
	}
	/* Main Menu */
	#main-menu-container {
		font-size: 1.2em;
	}
	#main-menu-container .menu-inner-container .main-menu-parent .main-menu,
	#main-menu-container .menu>.menu-item>a {
		height: 60px;
	}
	/* fixed height */
	.sub-nav {
		top: 60px;
	}
	/* Featured images */
	#featured-image {
		height: 600px;
	}
	/* 2-column layout */
	#container.with-sidebar #sidebar,
	#container.with-sidebar #sidebar-menu {
		margin: 0 0 0 70px;
		width: 280px;
		float: right;
	}
	#container.with-sidebar #content {
		width: 1110px;
		float: left;
	}
	#loop-list .content-featured-image {
		width: 20% !important;
	}
}


/* Large Screen desktops
----------------------- */

@media only screen and (min-width: 1501px) and (max-width: 2000px) {
	/* This screen size is the primary size for the site. It is defined in style.css */
	/* Global layout */
	.drawer-subcontainer,
	#header-subcontainer,
	#bc-sub-container,
	#container,
	#site-title h1,
	#site-title h2,
	#landing-menu-subcontainer,
	#footer-utility,
	#main-menu-container .menu-inner-container {
		width: 1200px !important;
	}
	/* Largest font size for large screen display */
	body {
		font-size: 100%;
	}
	body .entry-content {
		font-size: 90%;
	}
	#content {
		font-size: 1.1em;
	}
	#footer-utility {
		font-size: 1em;
	}
	#colophon ul#social li a {
		font-size: 1.6em;
	}
	/* Main Menu */
	#main-menu-container {
		font-size: 1.1em;
	}
	#main-menu-container .menu-inner-container .main-menu-parent .main-menu,
	#main-menu-container .menu>.menu-item>a {
		height: 52px;
	}
	/* fixed height */
	.sub-nav {
		top: 52px;
	}
	/* Featured images */
	#featured-image {
		height: 600px;
	}
	/* 2-column layout */
	#container.with-sidebar #sidebar,
	#container.with-sidebar #sidebar-menu {
		margin: 0 0 0 70px;
		width: 280px;
		float: right;
	}
	#container.with-sidebar #content {
		width: 850px;
		float: left;
	}
}


/* Small Screen desktop
----------------------- */

@media only screen and (min-width: 1115px) and (max-width: 1500px) {
	/* Global layout */
	.drawer-subcontainer,
	#header-subcontainer,
	#bc-sub-container,
	#container,
	#site-title h1,
	#site-title h2,
	#landing-menu-subcontainer,
	#footer-utility,
	#main-menu-container .menu-inner-container {
		width: 1050px !important;
	}
	/* Normal font size for small screen display, see style.css and content.css */
	/* Main Menu */
	#main-menu-container .menu-inner-container .main-menu-parent .main-menu,
	#main-menu-container .menu>.menu-item>a {
		height: 48px;
	}
	/* fixed height */
	.sub-nav {
		top: 48px;
	}
	/* Featured images */
	#featured-image {
		height: 600px;
	}
	/* 2-column layout */
	#container.with-sidebar #sidebar,
	#container.with-sidebar #sidebar-menu {
		margin: 0;
		width: 280px;
		float: right;
	}
	#container.with-sidebar #content {
		width: 720px;
		float: left;
	}
	.home #container.with-sidebar #content {
		width: 720px;
	}
}


/* Tablet
----------------------- */

@media only screen and (min-width: 951px) and (max-width: 1114px) {
	/* Global layout */
	.drawer-subcontainer,
	#header-subcontainer,
	#bc-sub-container,
	#container,
	#site-title h1,
	#site-title h2,
	#landing-menu-subcontainer,
	#footer-utility,
	#main-menu-container .menu-inner-container {
		width: 900px !important;
	}
	/* Smaller font size for tablets */
	a#quicklinks-close {
		font-size: .8em;
	}
	div.omni-menu ul li a {
		font-size: .8em;
	}
	#site-title h1 {
		font-size: 1.2em;
	}
	#site-title h2 {
		font-size: .8em;
	}
	body {
		font-size: 100%;
	}
	body .entry-content {
		font-size: 90%;
	}
	#content {
		font-size: .9em;
	}
	/* Main Menu */
	#main-menu-container {
		font-size: .9em;
	}
	#main-menu-container .menu-inner-container .main-menu-parent .main-menu,
	#main-menu-container .menu>.menu-item>a {
		height: 42px;
	}
	/* fixed height */
	.sub-nav {
		top: 42px;
	}
	/* 2-column layout */
	#container.with-sidebar #sidebar,
	#container.with-sidebar #sidebar-menu {
		margin: 0 0 0 20px;
		width: 280px;
		float: right;
	}
	#container.with-sidebar #content {
		width: 590px;
		float: left;
	}
}


/* Small Tablet
----------------------- */

@media only screen and (min-width: 841px) and (max-width: 950px) {
	/* Global layout */
	.drawer-subcontainer,
	#header-subcontainer,
	#bc-sub-container,
	#container,
	#site-title h1,
	#site-title h2,
	#landing-menu-subcontainer,
	#footer-utility,
	#main-menu-container .menu-inner-container {
		width: 800px !important;
	}
	/* Smaller font size for tablets */
	a#quicklinks-close {
		font-size: .8em;
	}
	div.omni-menu ul li a {
		font-size: .8em;
	}
	#site-title h1 {
		font-size: 1.2em;
	}
	#site-title h2 {
		font-size: .8em;
	}
	body {
		font-size: 100%;
	}
	body .entry-content {
		font-size: 90%;
	}
	#content {
		font-size: .9em;
	}
	/* Main Menu */
	#main-menu-container {
		font-size: .9em;
	}
	#main-menu-container .menu-inner-container .main-menu-parent .main-menu,
	#main-menu-container .menu>.menu-item>a {
		height: 42px;
	}
	/* fixed height */
	.sub-nav {
		top: 42px;
	}
	/* Featured images */
	#featured-image {
		height: 500px;
	}
	/* 2-column layout */
	#container.with-sidebar #sidebar,
	#container.with-sidebar #sidebar-menu {
		margin: 0 0 0 20px;
		width: 240px;
		float: right;
	}
	#container.with-sidebar #content {
		width: 530px;
		float: left;
	}
}


/* Mobile
----------------------- */

@media only screen and (max-width: 840px) {
	/* Global layout */
	.drawer-subcontainer,
	#bc-sub-container,
	#container,
	#site-title h1,
	#site-title h2,
	#landing-menu-subcontainer,
	#footer-utility {
		width: 90%;
	}
	/* Featured images */
	#featured-image {
		height: 250px;
	}
	/* Smaller font size for mobile */
	/*
	div.omni-menu ul li a { font-size: .8em; }
	#main-menu-container { font-size: .9em; } */
	#site-title h1 {
		font-size: 1.2em;
	}
	#site-title h2 {
		font-size: .8em;
	}
	body {
		font-size: 100%;
	}
	body .entry-content {
		font-size: 90%;
	}
	#content {
		font-size: .9em;
	}
	#container h1 {
		font-size: 2em;
		margin: 0 0 .3em 0;
	}
	#content .page-intro {
		font-size: 1.4em;
		margin: 0 0 1em 0;
	}
	/* 3-column layout */
	#container.with-sidebar #sidebar,
	#container.with-sidebar #sidebar-menu {
		margin: 0;
		width: 100%;
	}
	#container.with-sidebar #content {
		width: 100%;
	}
}