@charset "utf-8";
/* CSS Document */

	
/*standard CSS to set the document up*/
	*, *:before, *:after{
		box-sizing: border-box; /*this is to ensure that all elements are using the box model of border-box.  Remember that this model calculates the width of the element as including the borders and padding values, with only the margins being added as additional values.  If you wish to use this method for calculating the amount of space each block element takes up, then you'll need to add this rule, too. NOTE that you can use this to make your math easier, even if you choose to stick with floating instead of Flexbox.*/
	}

	#container {
		width: 960px;
		margin: 0 auto; /*top & bottom to zero and left & right to auto for centering the #container*/
	}
	
	
	
/*START CODE FOR NAVIGATION BAR*/
	nav {
		background-color: rgba(168,176,83,1.00);
	}
	
	nav ul {/*this is the parent/container element for the list */
		padding-left: 0px; /*this is to outdent the list as a group*/
		list-style-type: none; /*this is to remove the bullets from the li*/
		margin: 0 0 20px 0; 
		height: 40px; /*NOTE: normally we don't add height values because it causes vertical alignment issues, but with Flexbox we can easily deal with vertical alignment, so we can even use heights when using Flexbox*/
		
		/*START FLEX PROPERTIES*/
			display: flex; /*this turns the ul into a flex container and all of its children will now be considered "flex items"*/
			flex-direction: row; /*note that this is the default value, so you don't actually need to specify this propery/value combination. alternatives are "row-reverse", "column" and "column-reverse*/
			justify-content: space-between; /*this will distribute any leftover space in the ul that the li elements aren't taking and put it between each one */
			justify-content: flex-end; /*this will send the li elements to the far right of the ul*/
			justify-content: center; /*this will center the li elements in the ul*/
	}
	
	
	nav ul li {
		background-color: rgba(182,189,127,1.00); /*this helps us to see the individual li*/
		margin-left: 15px; /*we would want to disable this if we were going to use "justify: space-between" above, otherwise, we'd have 15px of margin to the left of the first li and our alignment would be off*/
		
		/*start FLEX PROPERTIES for the li*/
		flex-basis: 15%; /*this is like setting the width of each li, but using "flex-speak".  It sets each li to be 15% of the full width of the parent, which is the ul.  The ul is 100& of the container, making it 960px.  Since there are four li, and 4x15 is only 60%, there is 40% of the total width/space left over. The CSS to set how the li align in the ul will be handled in the rule for the "nav ul" (above) using "justify-content"*/
		
		/*We also want to make the li FLEX CONTAINERS, which allows us to align and distribute space for the content inside of the li: in this case the words for each li */
		display: flex; /*setting the li to be flex "containers"*/
		justify-content: center; /*this will ensure that the words are HORIZONTALLY centered in the li*/
		align-items: center; /*this aligns the content to the VERTICAL center, which is ridiculously to attempt with vanilla CSS*/
	
	}
	
/*START CODE FOR THREE-COLUMN LAYOUT*/
	
	/*for this layout, we are prioritizing MAIN over the asides in the source code, however, we want the visible order to look like: #upcomingEvents (aside), followed by main, and then followed by #didyouknow (another aside).  we will use Flexbox to give us a three-column layout, make main 2x as wide as either aside and reorder the elements into the preferred visible order*/
	
	
	/*this is the parent/container div used to group together the main and two asides*/
	#threeColumn {
		margin: 0 0 20px 0;
				
		/*start FLEX PROPERTIES*/
		display: flex; /*Making the parent a FLEX container*/
	
		/*As soon as you apply this rule, you'll see that the three column elements sit side-by-side with main being wider than the other two based solely on the fact that it has more text that the other two elements.  The browser knows to prioritize this region so that the heights are not totally imbalanced if they are each presented as the same width*/
	}
	
	main {
		padding: 20px;
		background-color: rgba(206,209,175,1.00);
				
		/*start FLEX PROPERTIES*/
		order: 2;/*this will modify the order of the elements so that the main element is second in order from L to R in the flex row, instead of first, which it would be otherwise*/
		flex-basis: 50%; /*I want this to be half of the container/parent's width*/
	}
	
	
	#UpcomingEvents {
		padding: 20px;
		background-color: rgba(14,89,139,1.00);
		
		/*start FLEX PROPERTIES*/
		flex-basis: 25%; /*I want this to have 1/4 of the total width*/
		order: 1;/*this will modify the order of the elements so that the Events element is first in order from L to R in the flex row */
	}
	
	
	#didYouKnow {
		padding: 20px;
		background-color: rgba(14,89,139,1.00);
		
		/*start FLEX PROPERTIES*/
		flex-basis: 25%; /*I want this to have 1/4 of the total width*/
		order: 3; /*this will modify the order of the elements so that the DidYouKnow element is last in order from L to R in the flex row */
	}
	
/*START CODE FOR GRID*/
	
/*for this grid I have nine images, each of them have been optimized through PS to be 300px x 300px.  I want them to tile with space between each one and I want there to be three per row.*/
	
	#gridGallery {
		padding: 20px;
		background-color: rgba(168,176,83,1.00);
	}
	
	#gridContainer {
		/*start FLEX PROPERTIES*/
		display: flex; /*set the parent as a FLEX container*/
		flex-wrap: wrap; /*this is NECESSARY to allow the individual child elements (images) in the container to wrap to the next row.  If you don't put this in there, all of the children will be forced to share a single row and they will be resized (down) with poor results to do this.*/
		justify-content: space-between; /*this allows for any space left over (horizontally) to be spaced between the individual elements, but the outer elements will stay aligned to the edges (L & R)*/
	}
	
	.gridChild {
		margin-bottom: 6px; /*this will give space between the rows of grid items*/
	
	}