/* This file is public_html/two-column-layout.css */



			.grid-container {
				display: grid;
				grid-template-columns: 3fr 1fr;
				grid-template-rows: 
                    auto
                    auto
					auto
				;
	
				grid-template-areas: 
					'header header'
					'links right'
					'main right'
				;

				gap: 4px;		
			}


			.header {
				grid-area: header;
				background-color: purple;
				color: white;
				text-align:center;
			}
			
			.links {
				grid-area: links;
			}


/*    the following is not reulting in the menu style intended      */
			
			ul.bluemenu {
			    list-style-type: none;
                padding-top: 1px;
                padding-bottom:1px;
/*                
                outline-style: dashed;
                outline-color: red;
                outline-width: 2px;    
*/
/*                The ouline shows that the unordered list does not reach the
                                        full height of the grid area */
			
/*			    margin-left: 0;         This has no effect */
			}
			
			li.bluemenu{
			    display: inline;
			    padding-left: 4px;
			    padding-right: 4px;
/*			    margin-left: 0;         This has no effect */
			}
			
			.main {
				grid-area: main;
			}

			.right {
				grid-area: right;			
			}
			

			/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */


			@media only screen and (max-width: 768px) {
				.grid-container {
				    grid-template-columns: minmax(200px, 1fr);
					grid-template-areas: 
						'header'
						'links'
						'main'
						'right'
					;
				}
			}