html, body {
	margin:0;
	padding:0;
  
}

/*     2-col responsive flex example     https://codepen.io/paulobrien/pen/rxyEMN  */

body {
    font-family: Helvetica, Tahoma, Geneva, Verdana, sans-serif;	
    font-size: 16px;
    line-height: 1.5em;       
    background-image: url("light_wool.png");
    
}


.wrap {
	display: flex;                   /*  A flex container declared by setting to flex (rendered as a block)   */
	/* min-height: 100vh;                original statement in copied code   */
                                     /*  use height instead of min-height to MOSTLY avoid IE 11 bug that doesn't move 
                                         the sidebar typewriter down below the main content.  
                                         ==> Don't change vh to 100%, that will not work. See #3 at link...
                                         https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
                                     */
    height: 100vh;                                                  
	flex-direction: column;          /*  The flex-direction property specifies the direction of the flexible items.  */
	max-width: 900px;                /*  max width of sidebar + content, or header or nav  */
    margin:auto;

}


.main {
    
/*  flex: 1; is the same as saying flex: 1 1 auto; It is shorthand for three different properties:
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
*/

	flex: 1;                 /*  Let all the flexible items be the same length, regardless of its content:   */
	display: flex;
}


footer, header, nav {
    /*  footer not used   */
    background-image: url("light_wool.png"); 
	margin:0;
	padding:0;
    
    /*
    border-style: solid;
    border-color: red;
    border-width: 1px;
    */

}

nav {
  font-size: 100%;
  /* more space between lines when it wraps.  Necessary to pass SEO mobile test.    https://varvy.com/mobile/    */
  line-height: 190%; 
  font-family: "Comic Sans MS", Helvetica, Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;

  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 0px;
  margin-left: 0px;


}


.sidebar {

	background-image: url("light_wool.png"); 
    flex: 0 0 300px;        /*  minimum width of the left sidebar  */
	padding: 0px;

    padding-top: 20px;

    /*
    border-style: solid;
    border-color: red;
    border-width: 1px;
    */

}


.content{

	background-image: url("light_wool.png"); 
	padding:10px;
	flex: 1;	

    /*
    border-style: solid;
    border-color: blue;
    border-width: 1px;
    */ 

}

/* below width of 680, the sidebar typewriter drops down below the main content     */
@media screen and (max-width:680px){
	.sidebar{flex: 0;order:2}
	.main {flex-direction:column;}	
}

img.imgcentered {                   
    /*  http://www.pagetutor.com/no_right_click/  */
    /*  see http://www.w3.org/Style/Examples/007/center re display:block  */
    /*  can't put margin or padding here; it is done in eg #content img.thinborder  */
    display: block; 
    margin-left: auto;
    margin-right: auto;
 
    
}	


p.headertext {

    font-family: "Courier New", Helvetica, Tahoma, Geneva, Verdana, sans-serif;	
    /* max font size is 270%, otherwise it is too wide for mobile access  */
    font-size: 270%;
    line-height: 100%; 
    text-align: center; 

    color: #00b3b3;          /*  AntiqueWhite;  */
    text-shadow: 1px 1px 2px black, 0 0 25px gray, 0 0 5px darkgray;

    margin-top: 30px;
    margin-bottom: 20px;
    margin-right: 0px;
    margin-left: 0px;
	

}

a         { text-decoration: none; } 
a:link    { color: #0000CD; text-decoration: none;  }  
a:visited { color: purple; text-decoration: none; } 
a:hover {color: black; background-color: #F0FFFF; }            /* #F0FFFF;   Azure */

a.dot         { text-decoration: none; border-bottom: 1px dotted;} 
a.dot:link    { color: #0000CD; border-bottom: 1px dotted #0000CD;} 
a.dot:visited { color: purple; border-bottom: 1px dotted purple;} 
a.dot:hover   {color: black; background-color: #F0FFFF; border-bottom: 1px dotted black;}            /* #F0FFFF;   Azure */ 

a.nav         { text-decoration: none; } 
a.nav:link    { color:  gray; }                                  /* SteelBlue   LightSeaGreen  CornflowerBlue  DodgerBlue;	#6495ED   MediumBlue  */
a.nav:visited { color: gray; } 
a.nav:hover   {color: steelblue;  background-color: AliceBlue;}            /* #F0FFFF; honeydew;  Azure */


p.clearit
{
clear:both;
} 

p.pathfont { 
    /* used for paths       */
    font-size: .9em;    
    line-height: 1.5em;
    font-family: "Lucida Console", "Lucida Sans Unicode";         /*      "Courier New";      */
    color: mediumblue;           
   
    }	

span.bullet   {
    color: CadetBlue;                         /*  firebrick;   */
}

span.underline
   {
   text-decoration: underline DarkTurquoise;         /*    Fuchsia;      */
}


span.italics
   {
   font-style: italic;
}



h1 { 
    text-align: left;
    padding-left: 0px;
    font-weight: bold;
    font-size: 160%;
    line-height: 100%;
    font-family: "Courier New", Tahoma, Geneva, Verdana, Helvetica, sans-serif;
    
    color: RoyalBlue;         /*        steelblue;      font-variant: small-caps;   */
    margin-top: 10px;	
    padding-top: 0px;
    padding-bottom: 0px;
}		


h2 { 
    text-align: left;
    padding-left: 0px;
    font-weight: bold;
    font-size: 130%;
    line-height: 100%;
    font-family: "Courier New", Tahoma, Geneva, Verdana, Helvetica, sans-serif;
    
    color: RoyalBlue;         /*        steelblue;        */
    margin-top: 0px;	
    padding-top: 0px;
    padding-bottom: 0px;
}	


div.yellowbox {
    background: MintCream;                  /* #FFFFE0;  */
    padding: 0.5em;
    border: 1px solid skyblue;            /* #c6c300;  */
}	


 /* 
skip to main content 
https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content/ 
 */
a.skip-main {
    left:-999px;
    position:absolute;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    z-index:-999;
}

a.skip-main:focus, a.skip-main:active {
    color: black;
    background-color: lightcyan;
    left: auto;
    top: auto;
    width: 30%;
    height: auto;
    overflow:auto;
    margin: 10px 35%;
    padding:5px;
    border-radius: 15px;
    border:4px solid magenta;
    text-align:center;
    font-size:1.2em;
    z-index:999;
}