/* RESET */
body, h1, h2, h3, p, img, ul, li{
	border:0; margin:0; padding:0;
}

body{
	background:#ffffff;	/* a light blue background color. */
	font-family:Arial, Helvetica, sans-serif; /* the font family for all text on the web page is now either arial, helvetica or a sans-serif font if those two are not available */
	font-size:100%; /* all normal text on the web page has a base font size of 14px now */
}
	
p{
	letter-spacing:.04em; /* letter spacing sets the horizontal spacing (kerning) between letters in a block of text. */
	line-height:21px; /* line height sets the vertical spacing between lines of text. */
}
	
div#header{
	background-color:#3232ff; /* a more specific way to set a background color */
	color:#fff;	/* sets the the color of all header text to white */
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;	/* these 6 lines of border-radius code make rounded corners for the bottom work in firefox, safari, chrome, opera and IE9 */
	margin:0 auto; /* by declaring a width on any block element (like a div), giving it a css property of margin:0 auto will center that block element on page */
	min-height:130px;	/* setting a minimum height of an element means that it can grow to be bigger, if there is a lot of content in it. However, if it doesn't have enough content, it will be at the very least (in this example) 130 pixels tall */
	padding:45px 15px 15px;	/* by setting a padding, the content within a HTML element will not touch the edges of that element (by adding padding to an element, it actually makes that element appear wider and/or taller.  In this case, the header div is now 15px wider and taller on each side. */	
}
	
ul.navigation {
	list-style:none;	/* this removes the bullets from list elements */
	margin-top:20px;	/* giving the ul a top margin of 20px */
}
				
ul.navigation li{
	margin:0 3px 5px;	/* this code adds a 3px margin to the left and right of the list elements, and 5px to the bottom of the list elements */
				}
				
ul.navigation li a{
	background:#4a4a4a;	/* this is a dark grey background for the link */
	color:#fff;	/* this makes the link text white */
	border-radius:2px;	/* these 3 lines of border-radius code make rounded corners work in firefox, safari, chrome, opera and IE9 */
	border:1px solid #595959; /* this adds a light grey solid border of 1px width around the link */
	padding:3px 10px;	/* as the name implies, this adds extra padding around the link, so that the borders don't bump up against the link text */
	text-decoration:none; /* this removes the normal underline that links usually have */
}
					
ul.navigation li a:hover{
	background-color:#000; /*this is a hover pseudo class.  By designating a different background color, than the class for the a tag above, when a mouse hovers over these particular links, in the navigation bar, the background color will change to what's defined here */
	
}

div.content{
	margin:15px auto; /* this adds a margin of 15px to the top and bottom of the div with the class of content.  The auto margin applies to the left and right side of the div which is what centers the div in the middle of the page. */
}
			
div.col-right{
	}
			
div#footer{
	background-color:#3232ff;
	margin:0 auto;
	padding:15px;
	text-align:center;
	color:#fff;
}
.float-left{
	margin:0  10px 10px 0;
}
.float-right{
}
.float-right img{
	margin:0 0 10px 10px;	/* use this on an element (like an image) to make it float to the right of it's containing HTML element */
}
.clear{
	clear:both; /* this clears floats.  This would be used to cancel out a float's behavior on content below it.  */
}	

img, object { max-width: 100%; max-height: 100%; display: block; object-fit: contain;}




/*** Structure ***/

@media screen and (max-width:480px) {
	body {
		width: 100vw;
		display: flex;
		flex-direction: column;
		margin-left: auto;
		margin-right: auto;
		font-size: 100%;
	
	}

	div#header{
		width: 100%;
		grid-column-start: 1; grid-column-end: 3;
		grid-row-start: 1; grid-row-end: 2;
		padding: 0px;
	}

	div#header>h1, div#header>h2 { padding: 45px 0px 0px 15px; }

	ul.navigation {
		display: grid; grid-template-columns: 1fr;
 	}

	ul.navigation li{
		display: inline-flex;
		margin: 0px;
	}

	ul.navigation li a{
		width: 100%;
		background:#4a4a4a;	/* this is a dark grey background for the link */
		color:#fff;	/* this makes the link text white */
		border-radius:0px;	/* these 3 lines of border-radius code make rounded corners work in firefox, safari, chrome, opera and IE9 */
		border:1px solid #595959; /* this adds a light grey solid border of 1px width around the link */
		padding:3px 10px;	/* as the name implies, this adds extra padding around the link, so that the borders don't bump up against the link text */
		text-decoration:none; /* this removes the normal underline that links usually have */
		text-align: center;
	}

	div.wrapper {
		display: grid; 
		grid-template-columns: auto;
		grid-template-rows: auto auto auto auto;
		overflow: auto;
	}

	div#content {
		width: 100%;
		display: grid;
		grid-template-columns: auto;
		grid-column-start: 1; grid-column-end: 3;
		grid-row-start: 2; grid-row-end: 3;
		padding-left: 10px;
		padding-right:  10px;
	}

	div#column {
		grid-column-start: 1; grid-column-end: 3;
		grid-row-start: 2; grid-row-end: 3;
	}

	div#column * {display: block;}


	div.wrapper-2-column {
		display: block;
	}

	h3.news {padding: 10px 0 10px 0;}


	img, object { width: 100%; display: block; object-fit: cover;}

	div#footer {
		width: 100%;
		grid-column-start: 1; grid-column-end: 3;
		grid-row-start: 3; grid-row-end: 4;}
}


@media screen and (min-width:  481px) {
	body {
		max-width: 960px;
		display: flex;
		flex-direction: column;
		margin-left: auto;
		margin-right: auto;
	}

	div.wrapper {
		display: grid; 
		grid-template-columns: 100%;
		grid-template-rows: 200px auto auto;
	}

	div#header {
		width: 100%;
		display: block;
		grid-column-start: 1; grid-column-end: 3;
		grid-row-start: 1; grid-row-end: 2;
	}

	ul.navigation li{
		display: inline-flex;
	}

	div#content {
		width: 100%;
		display: grid;
		grid-column-start: 1; grid-column-end: 3;
		grid-row-start: 2; grid-row-end: 3;
	}

	div#column {
		grid-column-start: 2; grid-column-end: 3;
		grid-row-start: 2; grid-row-end: 3;
	}

	div#column * {display: flex;}

	div.wrapper-2-column {
		display: grid;
	}

	div#footer {
		display: block;
		grid-column-start: 1; grid-column-end: 3;
		grid-row-start: 3; grid-row-end: 4;
		width: 100%;
	}
}