/* Stylesheet copied and adapted (with deletions) from TEDS data dictionary */
/* PAGE LAYOUT styles using layers (divs) in a grid layout */
/* Define the grid and its direct children and their properties/styles */
/* Any more general element styles are in Styles.css, which should be linked before
   this file in the html pages */

/* For older browsers, ensure html5 elements are displayed as block elements */
header, section, footer, aside, nav, article, figure, figcaption {
	display: block;
}

/* Apply the following Div styles only for large screeens, not mobiles */
/* For smaller screens, the divs will appear in order vertically without the formatting below */
/* The cut-off value must take into account the screen width of mobile phones
	but also the fixed width of the left column hence the minimum readable width of the right column if compressed. 
	With cut-off of 670px and left column fixed at 255px, with gap of 10px, the minimum width of the right column
	is effectively 405px before the layout changes. This has the added bonus in most browsers that the
	layout changes before the screen is so narrow that the <h1> heading starts to wrap and obscure the nav bar. */
@media only screen and (min-width: 670px){

	/* gridwrapper contains all other div blocks;
	   it wraps the first four elements in a 2x2 grid
	   while the last element spans across both columns of the grid;
	   include horizontal gap between the two columns to reduce reliance on margins and padding */
	/* Logo top-left with links side bar below it, adjusted to width of logo image + padding.
		This can have a fixed width of 255px, well within width of small screens.
		(Don't use min-width because the links bar would make it wider) */
	/* Set a max-width to aid text readability if users have a very large browser window */
	/* Add -ms- prefixed elements for grid support in IE11 */
	.gridwrapper{
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 255px 1fr;
		grid-template-columns: 255px 1fr;
		grid-column-gap: 10px;
		max-width: 1200px;
	}
	/* logo */
	.logo {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
	}
	/* mainheader defined with relative positioning, to allow absolute positioning of elements within it */
	.mainheader{
		-ms-grid-row: 1;
		-ms-grid-column: 2;
		position: relative;
	}
	/* mainheader contains the main page heading (h1), positioned near the top */
	.mainheader h1{
		position: absolute;
		top: 4px;
		left: 4px;
	}
	/* mainheader also contains a nav, positioned near the bottom */
	.mainheader nav{
		position: absolute;
		bottom: 4px;
		left: 4px;
	}
	/* sidelinksbar */
	.sidelinksbar {
		-ms-grid-row: 2;
		-ms-grid-column: 1;
	}
	.introcontent {
		-ms-grid-row: 2;
		-ms-grid-column: 2;
}
	/* maincontent comes below the 2x2 grid of four divs at the top of the page
	   and it spans across both columns of the grid */
	.maincontent{
		-ms-grid-row: 3;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-column-start: 1;
		grid-column-end: 3;
	}
	

} /* end of @media */

/* For smaller screens, the grid display does not apply so divs and other blocks will simply appear
   one above the next; apply the styles below by default for ALL screens */

/* All children of gridwrapper should have the same amount of padding */
.gridwrapper div, header, nav, threecol, fourcol, fivecol, twocol, onecol {
	padding-left: 0.25em;
	padding-right: 0.25em;
}
/* the sidelinksbar (nav element) additionally has a distinct background colour
  and a max-width for small screen users (if not constrained within the grid above) */
.sidelinksbar{
	background-color: #dddddd;
	max-width: 380px;
}
/* the logo div will contain the logo image, conveniently added as a background without repeat
	and with a minimum height to prevent the div from collapsing to a line */
div.logo{
	min-height: 109px;
	background-image: url('../images/logo_transparent.png');
	background-repeat: no-repeat;
}
/* For nav.navbar inside mainheader, use a list formatted inline as a horizontal bar */
.navbar ul {
	margin: 0;
	padding: 0;
}
.navbar li {
	display: inline;
	list-style-type: none;
	margin-right: 5px;
	padding-right: 10px;
	border-right: thin black solid;
}