/* CSS Document */  
nav {
  position: fixed;
	top: 0;
	left: 0;
	//height: 100vh;
	//width: 20%;
	//overflow: auto;
  background: #333;
}
#struct-right-col {
  //margin-left: 20%;
  margin-top: 2em; 
  //width: 80%; 
}

header {
  position: fixed;
	top: 0;
  left: 20%;         /* The menu uses the left 20% */
	width: 80%;
  height: 2em;
  background: #999;
} 

@media only screen and (max-width : 599px) {
  #struct-right-col {
    //margin-left: 20%;
    width: 100%; 
  }
  
  nav {
    //position: fixed;
  	//top: 0;
  	//left: 0;
  	height: 2em;
  	width: 20%;
  	overflow: hidden;
    //background: #333;
  }
}

@media only screen and (min-width : 600px) {
  #struct-right-col {
    margin-left: 20%;
    width: 80%; 
  }
  
  nav {
    //position: fixed;
  	//top: 0;
  	//left: 0;
  	height: 100vh;
  	width: 20%;
  	overflow: auto;
    //background: #333;
  }
}



section {   
  width: 100%;
  background: yellow;
  min-height: calc(100vh - 4em); /* To push the footer to the bottom of the viewport when content results in height less than min-height */
                                 /* white spaces either side of - matter! 4em is header height (2em) + footer height (2em) */
  box-sizing: border-box;    /* This causes the content area to be reduced by the padding/border/margin widths */
  padding: 1vh;              /* It allows the padding to be adjusted without having to adjust other value to maintain the same look. */
  //margin-bottom: 2em;        /* To allow space for the footer */
}

footer {
  //position: absolute;
  box-sizing: border-box;
  //margin-top: -2em;   /* To move the footer into the margin area of the section */
  height: 2em;
  line-height: 2em;    /* To center single line of text vertically the line-height is set to the same vaule as height */
  background-color: #efefef;
  text-align: center;
}