BODY {background-image:  none; 
	background-color: #faf0e6; 
	font-family: "Georgia", "Garamond", Serif; 
	color: black; 
	font-size: 12pt; 
	margin: 0
	}
	
		.header {
	grid-area: header;
	background-color: #faf0e6;

	text-align:center;
	padding-left: 0;

	position:sticky;
}

	.logo {
	padding-top:10px;
	padding-bottom: 0px; 
	padding-right: 15px; 
	width:100%;
	}
	
/*   	@media screen and (orientation: landscape) */
	

	
	
.container {
	 display: flex;
	 flex-direction: column;

		background-color: #faf0e6;	
		width: calc(100%);
    padding-right: 15px;
    padding-left: 15px;
    margin-right: 0px;
    margin-left: 0px;

		   	}
	

	/*   justify-content: center;	
	grid-gap: 0; 
	
	
	
	.container {display: grid; 
	  grid-template-areas:
		"menu header"
		"menu content-container";
		grid-template-columns: 225px auto;
		background-color: #faf0e6;
		padding: 0 0 0 0;
		grid-gap: 0;
		width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;

		   	} */
			/*   
					@media (min-width: 1200px)
.container, .header {
    max-width: 1140px;
}
@media (min-width: 992px)
.container, .header {
    max-width: 960px;
}
@media (min-width: 768px)
.container, .header {
    max-width: 720px;
}
@media (min-width: 576px)
.container, .header {
    max-width: 540px;}
				
				
				FROM .MENU
				 	display: flex;
	flex-flow: row wrap;
	
	
				*/
				
	/*     position: -webkit-sticky;
  position: sticky; (to make something stick at the top of the page while the rest scrolls under it)
	*/
	.menu {

	background-color: #faf0e6;
	display: grid;
	 grid-auto-columns: auto;
	margin: 0;
	text-align: center;
    width: 100%;
    padding-bottom: 15px;
    padding-top: 5px;
		padding-left: 15px;
			
	  position: sticky;
		 position: -webkit-sticky;
	}
	
	.menulink {
			 font-size: 12px;
			 padding-top: 10px;
			 padding-bottom: 10px;
			 padding-left: 10px;
			 padding-right: 10px;
	}
	
	#link1 {
			grid-column: 1;
			}
	#link2 {
			grid-column: 2;
			}
	#link3 {
			grid-column: 3;
			}						
	#link4 {
			grid-column: 4;
			}			
	#link5 {
			grid-column: 5;
			}
	#link6 {
			grid-column: 6;
			}
						
		.content-container {
	background-color: #faf0e6;

	height: auto;
	width: 100%;
	padding-left:25px;
	padding-right:25px;
	}

	/*	
		grid-area: content-container;
	margin-left: 225px;
	display: grid;
	grid-template-columns: 49% 49%;
	grid-gap: 10px;	
	border: 4px solid yellow;
	 position: relative;
	left:225; */
	
	}
	
		/*  .z1 {
		grid-area: z1;
		background-color: #faf0e6;
		height: 100%;
		
		
		} */
	 
	 
	 /* width: 225px;
		 #faf0e6;
		 border:2px solid black; */
	



	  /*
		#faf0e6
			 z-index:0;
		 border:2 solid black;*/
	 
	
	
/*  	.main {background-color: #faf0e6;
	width: calc(100% - 275px);  
	grid-area: main;
	height: auto;
	padding: 10;
	margin: 0;
	position: absolute;
	left: 239;
	top:0;
	z-index: -1} */
	

	
	
		
	.two-columns {
	grid-column: 1 / span 2;
	}
	
	.landscape-portrait-row {
	grid-column: 1 / span 2;
	/* background-color:red */ 
	 background-color: #faf0e6;
	display: grid;	
	grid-template-areas:
	"landscape-left spacer portrait-right";
	grid-template-columns: 68.4% 1.15% 30.45%;	
	grid-gap:0px;	
	
	/* border: 4px solid red;*/ 
	}
	
	.landscape-left {
	grid-area:landscape-left;
	width: 100%;

	/* border: 3px solid blue; */

	}
	
	.spacer {
	grid-area:spacer;
	width:100%
	}
	
	.portrait-right {
	grid-area: portrait-right ;
	width: 100%;

	/*	border: 3px solid green; */
	}
	
	
	
	/* Portrait on the left; landscape on the right*/
	
		.portrait-landscape-row {
	grid-column: 1 / span 2;
	/*background-color:white;*/ 
	 background-color: #faf0e6; 
	display: grid;	
	grid-template-areas:
	"portrait-left spacer landscape-right";
	grid-template-columns: 30.45% 1.15% 68.4%;	
	grid-gap: 0px;	
	height: auto;	
	width: 100%;
	/* border: 4px solid red;*/ 
	}
	
	.portrait-left {
	grid-area: portrait-left;
	width: 100%;
	/*	border: 3px solid green; */}
	
	.landscape-right {
	grid-area:landscape-right;
	width: 100%;
	/* border: 3px solid blue; */

	}
	
	
	
	
	.signature {display: none; position: fixed; bottom: 25;}
	
	
		/* .amcontainer {display: grid; 
	  grid-template-areas:
		"aboutme self-portrait";
		grid-gap: 10
		
			height: inherit;
			height: inherit;
		
	} 
	
	div.self-portrait {display: grid;
grid-area: self-portrait;}*/

	img.self-portrait {
	width:250;
	float: right;
	padding-left: 10;
	}
	
	/* .aboutme {display: grid;
	grid-area: aboutme;
	} */
	
/*  		#link1 {
	grid-area: link1;
	height: 2em

	}
	
		#link2 {
	grid-area: link2;
	height: 2em

	}
	
		#link3 {
	grid-area: link3;
		height: 2em
	}
	
		#link4 {
	grid-area: link4;
		height: 2em
	}
	
		#link5 {
	grid-area: link5;
		height: 2em
	}
	
		#link6 {
	grid-area: link6;
		height: 2em
	} */
	
	
	
  P {text-indent: 1.5em; padding: 0; margin: 0}

	P.noindent {text-indent: 0em}

	A:link, A:visited, A:active {font-weight:bold;  font-size: 14pt; text-decoration: none; color: black; line-height:80%;}

  A:hover {font-weight:bold;  font-size: 14pt;  text-decoration: none; background-color: none; color: #00ffff; } 



	H1 {font-family:Helvetica,Verdana,Arial,'Arial Black','Century Gothic',sans-serif; font-size: 27pt; font-style: normal; font-weight: 900; TEXT-ALIGN: center; margin-top:0; margin-bottom: 20px; padding: 0}

	H2 {font-family:Helvetica,Verdana,Arial,'Arial Black','Century Gothic',sans-serif; font-size:20pt;  font-style:italic;  font-weight:650; padding: 0pt; margin: 0pt}

	H3 {font-family: "Georgia", "Times New Roman", Serif; font-size: 15.5pt; font-style: normal; font-weight: 700; padding: 0pt; margin: 0pt}

	H4 {font-family: "Georgia", "Times New Roman", Serif; font-size: 14pt; font-style: normal; font-weight: 650; text-indent: 0.75em; padding: 0pt; margin: 0pt}

	H5 {font-family: "Georgia", "Times New Roman", Serif; font-size: 105%; font-style: normal; font-weight: 600; text-indent: 1.5em; padding: 0pt; margin: 0pt}


	TABLE {font-family: "Georgia", "Times New Roman", Serif; }

	TABLE.problems {font-family: "Georgia", "Times New Roman", Serif; font-size: 10.8pt}

	BLOCKQUOTE {font-family: "Garamond", "Times New Roman", Serif; font-size: 10pt; font-style: normal; text-align: justify; margin-left: 2em; margin-right: 2em; margin-top: 0.2em; margin-bottom: 0.2em; padding: 0; display: block} 






	.decimal {list-style-type:decimal;}

	.loweralpha {list-style-type:lower-alpha;}	

	.listhead {font-weight: bolder; font-family: "Tahoma", "Helvetica", "Arial", sans-serif}

	.listsubhead {font-weight: 650;}

	.listspacept5em {margin-bottom: 0.5em}

	.listspace1em {margin-bottom: 1em}

	.listspace2em {margin-bottom: 2em}

	.listspace3em {margin-bottom: 3em}

	.listspace4em {margin-bottom: 4em}

	.listspace5em {margin-bottom: 5em}

	.listspace6em {margin-bottom: 6em}

	.listspace10em {margin-bottom: 10em}		



	BIG {font-size: 125%; font-style: normal}

.big {font-size: 20pt; font-style: normal}

	SMALL {font-size: 75%; font-style: normal}

	.small {font-size: 75%; font-style: normal}



	STRONG {font-weight: 650;}

	B {font-weight: 650;}

DD {font-family: sans-serif; font-size: 12pt}

DT {font-weight: bold}







	SUP { font-family:'Times New Roman',serif; font-size: 75%; position: relative; top: -0.3em; display: inline; }



	SUB {font-family:'Times New Roman',serif; font-size: 75%; position: relative; top: 0.0em; display: inline;}

	sup.old{font-family:Arial,sans-serif;}

	

ACRONYM {font-variant: small-caps}

PRE {font-family:'Courier New','Lucida Console','Andale Mono',monospace; font-size: 10pt; padding: 0px; margin: 0px;}



	.clear {clear: left; clear: right}

	.pagebreak {position: relative; top: -22 px; left: 30%; background-color: white; padding: 4px;}

	.warning {font-weight: bold; width: 90%; margin-left: 5%; border: double black 3px; padding: 5px}
	
	.imageborder {padding: 2px; border: 1px solid black;}

	.definitionbox {padding: 2px; margin-top: 5px; margin-bottom: 5px; border: 1px solid black; margin-left: 25px; text-align: center; display: block}

	.examplebox {padding: 2px; margin-top: 5px; margin-bottom: 5px; border: 1px solid black;  width: auto; padding: 5px; display: block;}

	.sidebarleft {padding: 4px; margin-top: 5px; margin-bottom: 5px; border: 2px solid black;  width: 12em; text-align: left; display: block; float: left}

	.sidebarright {padding: 4px; margin-top: 5px; margin-bottom: 5px; border: 2px solid black;  width: 12em; text-align: left; display: block; float: right}

  .coloremph {font-style: italic; font-family: sans-serif; text-indent: 0em; font-weight: 800; font-size: 95%; color: #663300}

	.formula {font-family:"Tahoma",sans-serif; font-size: 100%}

	.booktitle {font-family: sans-serif; font-style: italic; font-variant: small-caps; font-size: 85%}

	.caption {font-family: "Garamond", "Times New Roman", Serif; font-size: 10pt; font-style: normal} 

	.smallcaps {font-variant: small-caps;}

	.hide {display: none;}

	.eqn {font-family: "Tahoma", "Helvetica", "Arial", sans-serif; font-size: 42pt; font-weight: 650;}

	.noshow {display:none}

	.noprint {padding: 2px; margin: 2px}

	
	
	




/*  Here is where I want to put stuff that changes when a screen is in portrait mode:

for example, try making the flex-direction: column
and changing .menu to 100% width



		   	}


 
 
 	@media screen and (orientation: portrait)
	.menulink {
			 font-size: 12px;
			 padding-top: 10px;
			 padding-bottom: 10px;
			 padding-left: 10px;
			 padding-right: 10px;
	}

	.container {
	 display: flex;
	 flex-direction: column;

		background-color: #faf0e6;	
		width: calc(100% );
    padding-right: 15px;
    padding-left: 15px;
    margin-right: 0px;
    margin-left: 0;}
		
		
		.menu {
	background-color: #faf0e6;
	display: flex;
	flex-flow: row nowrap;
	height: 225px;
	width: 100%;
	margin: 0;
	text-align: left;
	padding-top: 5px;
    padding-bottom: 15px;
	position: fixed;
	}
	
		.logo {
	padding-bottom: 0px; 
	padding-right: 15px; 
	height:225px;
	max-height:225px;
	}
	
			.content-container {
	background-color: #faf0e6;
	padding-top: 250px;
	height: auto;
	width: 100%;
	}
	
	 */