/* 
 * 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,
	#header-subcontainer,
	#bc-sub-container,
	#container,
	#site-title h1,
	#landing-menu-subcontainer,
	#footer-utility,
	#main-menu-container .menu-inner-container {
		width: 1400px !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: 1050px;
		float: left;
		}
	
}


/* 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: 100%; }
	#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: 100%; }
	#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: 100%; }
	#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: 100%; }
	#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%;
		}
	
}