/* 
 * Responsive Layout declarations
 * Author: Sebastien Marchal / BrockU
 *
 * Mainly used to set font and layout changes between sizes.
 *
 * NOTE: Screen size globals are also defined in wp-config.default.php, for use in all template files of base / child themes.
 *
 */

/* 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; }
	
	#mobilesearch.drawer { display: none !important; }

}


/* Super Large screens
----------------------- */

@media only screen 
and (min-width : 2201px) {
	
	/* Global layout */
	.drawer-subcontainer,
	#header-subcontainer,
	#bc-sub-container,
	#container,
	#site-title,
	#landing-menu-subcontainer,
	.footer-content,
	#main-menu-container .menu-inner-container {
		width: 1600px !important;
		}

	/* Largest font size for large screen display */
	body { font-size: 105%; }
	body .entry-content { font-size: 105%; }
	#content { font-size: 1.1em; }
	.footer-content { font-size: 1.1em; }
	#colophon ul#social li a { font-size: 1.4em; }
	
	/* Main Menu */
	#main-menu-container { font-size: 1.15em; }
	#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 {
		margin: 0 100px 0 0;
		width: 380px;
		float: left;
		}
	#container.with-sidebar #content {
		width: 1110px;
		float: right;
		}
	
}


/* Very Large Screens
----------------------- */

@media only screen 
and (min-width : 2001px) and (max-width: 2200px) {
	
	/* Global layout */
	.drawer-subcontainer,
	#header-subcontainer,
	#bc-sub-container,
	#container,
	#site-title,
	#landing-menu-subcontainer,
	.footer-content,
	#main-menu-container .menu-inner-container {
		width: 1400px !important;
		}

	/* Largest font size for large screen display */
	body { font-size: 105%; }
	body .entry-content { font-size: 105%; }
	#content { font-size: 1.1em; }
	.footer-content { font-size: 1.1em; }
	#colophon ul#social li a { font-size: 1.4em; }
	
	/* Main Menu */
	#main-menu-container { font-size: 1.15em; }
	#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 {
		margin: 0 70px 0 0;
		width: 320px;
		float: left;
		}
	#container.with-sidebar #content {
		width: 1000px;
		float: right;
		}
	
}


/* Large Screen desktops
----------------------- */

@media only screen 
and (min-width : 1501px) and (max-width: 2000px) {
	
	/* Global layout */
	.drawer-subcontainer,
	#header-subcontainer,
	#bc-sub-container,
	#container,
	#site-title,
	#landing-menu-subcontainer,
	.footer-content,
	#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-content { font-size: 1em; }
	#colophon ul#social li a { font-size: 1.3em; }
	
	/* Main Menu */
	#main-menu-container { font-size: 1.05em; }
	#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 {
		margin: 0 70px 0 0;
		width: 280px;
		float: left;
		}
	#container.with-sidebar #content {
		width: 850px;
		float: right;
		}
	
}

/* 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,
	#landing-menu-subcontainer,
	.footer-content,
	#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 { font-size: .95em; }
	#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 {
		margin: 0 0 0 0;
		width: 280px;
		float: left;
		}
	#container.with-sidebar #content {
		width: 710px;
		float: right;
		}
		
}

/* Tablet
----------------------- */

@media only screen 
and (min-width : 951px) and (max-width: 1114px) {
	
	/* Global layout */
	.drawer-subcontainer,
	#header-subcontainer,
	#bc-sub-container,
	#container,
	#site-title,
	#landing-menu-subcontainer,
	.footer-content,
	#main-menu-container .menu-inner-container {
		width: 900px !important;
		}

	/* Smaller font size for tablets */
	a#quicklinks-close,
	a#admissions-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: .80em; }
	#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 {
		margin: 0 0 0 0;
		width: 280px;
		float: left;
		}
	#container.with-sidebar #content {
		width: 560px;
		float: right;
		}

}


/* 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,
	#landing-menu-subcontainer,
	.footer-content,
	#main-menu-container .menu-inner-container {
		width: 770px !important;
		}

	/* Smaller font size for tablets */
	a#quicklinks-close,
	a#admissions-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: .75em; }
	#main-menu-container .menu-inner-container .main-menu-parent .main-menu,
	#main-menu-container .menu > .menu-item > a { height: 37px; } /* fixed height */
	.sub-nav { top: 37px; }
	
	/* Featured images */
	#featured-image { height: 500px; }
	
	/* 2-column layout */
	#container.with-sidebar .sidebar {
		margin: 0 0 0 0;
		width: 280px;
		float: left;
		}
	#container.with-sidebar #content {
		width: 460px;
		float: right;
		}

}


/* 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-content {
		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: 1.5em 0 .3em 0; }
	#content .page-intro { font-size: 1.4em; margin: 0 0 1em 0; }
	
	/* form elements & buttons. Make text large enough to prevents a 'zoom' effect on mobile devices */
	input,
	select,
	textarea { font-size: 16px !important; }
	input[type=submit],
	button { font-size: 14px !important; }
	
	/* 1-column layout */
	#container.with-sidebar .sidebar {
		clear: both;
		margin: 0;
		width: 100%;
		}
	#container.with-sidebar #content {
		width: 100%;
		}
	
}