/* === Overall Style === */
    body {
      font-family:Helvetica,Arial,sans-serif;
      color: black; 
	  background-image:linear-gradient(to bottom, #ffffff 100px, #e6e6e6 300px);
	  text-align: left;
	  font-size: 110%;
	  font-weight: normal;
	  line-height: normal;
	  width: 60em;
	  min-height: 1200px;
	  margin: -1em auto 0 auto; /* top right bot left */
	  word-wrap: break-word;
	}
	
/* === Main column === */
	.article {
	  float: right;
	  width: 75%;
	  height: auto%;
	  background-color: white;
	  border-style:none;
	  border-width:thin;
	  padding:  0px 30px 10px 30px;  /* top right bot left */
	  /*margin-right: inherit;*/
	  line-height: 190%;
	}
/* === Indented Text === */
	.indent {
	  margin-left: 3em
	}

/* === Text Formatting ===c*/
	
/* Formats for links */

	a:link {
	  color: #0000cc;
	  /*font-size: 1.0em;*/
	  font-weight: normal;
	}
	a:visited {
	  color: #0000cc;
	  /*font-size: 1.0em;*/
	  font-weight: normal;
	} 
	a:active {
	  color: red;
	  /*font-size: 1.0em;*/
	  font-weight: normal;
	}
	:target {  
	  background: #ffffcc;
	  transition: all .8s;
	}
	
	
	.page-links {
	  display: inline-block;
	  color: black;
	  padding:5px 0px;  
	  font-size: 0.75em;
  	  font-weight: normal;
	  text-align: left;
	  position: relative;
	  top:-15px;
	}
	
/* Site Heading */
    h1 {
	  font-size: 1.75em;
	  line-height: normal;
	  position: relative;
	  bottom:-.2em;
	}
/* Page Heading */
	h2 {
	  font-size: 1.5em;
	}
/* Paragraph Heading */
	h3 {
	  font-size: 1.0em;	
	  position:relative;
	  bottom:-10px; 
	 }
	 
/* Navagaition Heading */
	h4 {
	  font-size: 1.3em;
	  position:relative;
	  bottom:-15px; 		  
	}	  
/* Typical Paragraph */	  
	p {
	  font-size: 1.0em;
  	  font-weight: normal;
	}
/* Page Number Ref */	  
	.pn1 {
	  font-size: 1.6em;
  	  font-weight: 750;
	  color: #FF4500;
	}	
/* Image Containers */
	.img1 {
	  float: right;
	  width: 49%;
	  height: auto;
	  Margin: 10px 0px 5px 20px;  /* top right bot left */
	}
	.img2 {
	  float: center;
	  width: 100%;
	  height:auto;
	  Margin: 10px 0px 10px 0px;  /* top right bot left */
	}
	.img3 {
	  float: right;
	  width: 58%;
	  height: auto;
	  Margin: 10px 20px 5px 0px;  /* top right bot left */
	}
	.img4 {
	  float: right;
	  width: 35%;
	  height: auto;
	  Margin: 0px 0px 5px 20px;  /* top right bot left */
	}
	.img5 {
	  float: right;
	  width: 12em;
	  height: auto;
	  Margin: 0px 10px 20px 20px;  /* top right bot left */
	}
	.img6 {
	  float:none;
	  Margin: 10px auto 5px auto;  /* top right bot left */
      width: 50%;
	}
	.img7 { /* Resized for small screens,see below */
	  float: none;
	  height: auto;
	  text-align: center;
	}	
	.img8 { /* Doesn't resize for small screens */
		  float: none;
	  height: auto;
	  text-align: center;	
	}
	
	
/* Subscript and Superscript format  */	
sub{
	font-size: 70%;
}
sup{
	font-size: 70%;
}

/* Centered block of text  */	
.blocktext{
	margin: auto;
}

/* Center align text  */	
.ctr{
	text-align: center;
}

/* Right align text  */	
.rt1{
	text-align: right;
}

/* Sidebars  */
	.sidebar1 {
	  float: right;
	  box-sizing: border-box;
	  width: 58%;
	  background: #e0e0e0;
	  Margin: 5px 0px 10px 20px;  /* top right bot left */
  	  Padding: .5em 1em 1em 1.5em;  /* top right bot left */
	}  	

	.sidebar2 {
	  float: center;
	  box-sizing: border-box;
	  width: 100%;
	  background: #e0e0e0;
	  Margin: 0px 0px 1.5em 0px;  /* top right bot left */
  	  Padding: .5em 1.5em 1em 1.5em;  /* top right bot left */
	}  

/* Bullet List - Squares */
	ul.b {
      list-style-type: square;
	}
  

	  
/* Footnotes */
	.ftnote-container {
	  display: flex;
	  flex-wrap: nowrap:
	}	 
	.footnote1 {
	  width: 50%;
	  word-wrap: break-word;
	  padding: 0px 10px 0px 20px;  /* top right bot left */
	  text-align: left;
	  line-height: 200%;
	  font-size: 0.8em;
	  font-weight: normal;
	  border-style:none;
	  border-width:thin;
	}	 
	.footnote1 :target {
	  background: #ffff00;
	  transition: all .8s;
	}
	
	.footnote2 {
	  width: 100%;
	  word-wrap: break-word;
	  padding: 0px 10px 0px 20px;  /* top right bot left */
	  text-align: left;
	  line-height: 200%;
	  font-size: 0.8em;
	  font-weight: normal;
	  border-style:none;
	  border-width:thin;
	}	 
	.ftnote {
	  font-size: 0.6em;
  	  font-weight: normal;
	  text-align: left;	 
	  vertical-align: super;
	}
	.ftnote:target {
	  background: #ffff00;
	  transition: all .8s;
	}
	
/* Captions */	  
	.caption1 {
	  font-size: .9em;
  	  font-weight: normal;
	  line-height: normal;
	  padding: 0 0 .2em 0/* top right bot left */
	}
	.caption2 {
	  font-size: .75em;
  	  font-weight: normal;
	  line-height: 1.1em;
	  padding: 0 0 0 0/* top right bot left */
	}  
  

/*  Tables  */
	.table1 {
		border: 1px solid black;
		border-collapse:collapse;
		width: 100%;		
	}
	.th1 {
		padding: 0px 0px 0px 5px;  /* top right bot left */
		border: 1px solid black;
		vertical-align: top;
		text-align: left;
		height: .25em;
		font-weight: bold;
		font-size: .75em;
		line-height: normal;
	}
	.td1 {
		padding: 0px 0px 0px 5px;  /* top right bot left */
		border: 1px solid black;
		vertical-align: top;
		text-align: left;
		height: .25em;
		font-size: .65em;
		line-height: 1.6;
	}
	 .color_n {
		 background-color: #fff5cc;
	 }	
	 .color_q {
		 background-color: #dbe4f0;
	 }		 

	 .color_p {
		 background-color: #dfecdf;
	 }	

	 
/* === Navagaition Sidebar === */
	.sidenav {
	  position: fixed;
	  width: 11em;
	  z-index: 1;
	  background: #ffffff;
	  overflow-x: hidden;
	  padding: 0px 1px 15px 15px; /* top right bot left */
	  border-style:solid;
	  border-width:thin;
	  line-height: 2;
	  font-weight: normal;
	  font-size: 0.9em;	  
	}
	.sidenav a {
	  /*padding: 0px 0px 0px 0px; /* top right bot left */
	  text-decoration: none;
	  /*font-weight: normal;*/
	  font-size: 0.9em;
	  color: black;
	  display: block;
	}	
	.sidenav a:hover {
	  /*color: black;*/
	  font-weight: bold;
	}
	
/* ==== Navigation Top ==== */

	/* Style The Dropdown Button */
	.dropbtn { 
	  display: none;
	  background-color: #707070;
	  color: white;
	  padding: 8px ;
	  font-size: 100%;
	  border: 0.5px solid black;
	  cursor: pointer;
	  z-index: 2;
	}

	/* The container <div> - needed to position the dropdown content */
	.dropdown {
	  display: inline-block;
	  z-index: 1;	
	  position: sticky;
	  top: 0;
	}

	/* Dropdown Content (Hidden by Default) */
	.dropdown-content {
	  display: none;
	  position: absolute;
	  background-color: #f9f9f9;
	  min-width: 220px;
	  box-shadow: 2px 4px 8px 2px #707070; /* h-offset v-offset blur spread color */
	  z-index: 1;
	  line-height: 100%;
	}

	/* Links inside the dropdown */
	.dropdown-content a {
	  color: black;
	  font-size: 0.8em;
	  font-weight: normal;
	  padding: 8px 16px;
	  text-decoration: none;
	  display: block;
	}

	.dropdown-content b {
	  color: black;
	  padding: 8px 16px;
	  text-decoration: none;
	  display: block;
	}

	/* Change color of dropdown links on hover */
	.dropdown-content a:hover {font-weight: bold;}

	/* Show the dropdown menu on hover */
	.dropdown:hover .dropdown-content {
	  display: block;
	}

	/* Change the background color of the dropdown button when the dropdown content is shown */
	.dropdown:hover .dropbtn {
	  background-color: black;
	}

/* === Responsive Design === */
	/* For narrow tablet: */
	@media only screen and (max-width:1025px) {
		body{
			width: 90%;
		}
		.article {
			float:none;
			width: 91%;
		}
		.dropbtn {
			display: inherit;
		}
		.sidenav{
			display: none;
		}
		h4{
			font-size: 1.5em;
		}
	}
	
	/* For mobile phones: */
	@media only screen and (max-width:600px) {
	  	.img1, .img2, .img3, .img4, {
			width: 100%;
			Margin: 10px auto 5px auto;  /* top right bot left */
	        }
		.img5{
			float: none;
			Margin: 10px auto 5px auto;  /* top right bot left */
			width: 12em;
			max-width:17em;
		}

		.sidebar1{
			float: none;
			width:100%;
			margin: 0;
		}
		.article {
			width:96%;
			padding:  0px 10px 10px 10px;  /* top right bot left */
		}		  
	}