/*MY FIRST COLORS: dark grey (taken): #404040; yellowish very light grey (taken) #e6e6dc; dark green (taken) #558e55;  maroon: #510000; /*very light grey: #f2f2f2; /*blueish: #dcdce6*/

/*ARCTIC PALETTE: very dark grey: #433c42; medium grey: #858485; light grey: #d1d1d9; very light yellowish grey: #f6f0ef; very light grey, a bit greenish: #ededed;  */
ul {
  list-style-type: disc;
}

li {
  margin-bottom: 10px; /* Adjust the value as needed */
}

body
{
	background-color: #f6f0ef; /*#e6e6dc;*/
	font-family: Verdana, sans-serif;
	line-height: 1.5;
	font-size: 110%;
	color: #433c42; /*#404040;*/ 
	margin: 0;
	padding: 0;
}

@media screen and (max-width:800px){
	span.small {
	font-size: 0.625rem;
	}
}


button {
  background-color: #433c42;
  border-radius: 3px;
  border: 1px solid #433c42;
  box-sizing: border-box;
  color: #f6f0ef;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif;
  font-size: 90%;
  font-weight: 400;
  line-height: 1.15385;
  margin: 0;
  outline: none;
  padding: 8px .8em;
  margin-left: 1em;
margin-bottom: -0.25em;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  white-space: nowrap;
}


div.navi {
    width: 20%;
    height: 100%; /* Full height */
    position: fixed; /* Make it stick, even on scroll */
    overflow: auto; /* Enable scrolling if the sidenav has too much content */
    background-color: #433c42; /*#404040;*/ 
    color: #f6f0ef; /*#e6e6dc;*/
    text-align: center;
    padding-top: 2%;
}

div.navi ul {
    list-style-type: none;    
    /*background-color: #404040;*/
    margin: 0;
    padding: 0;
    margin-top: 20%;
    font-size: 180%;
    line-height: 180%
}

div.navi ul ul{
	margin-top: 0%;
	 font-size: 61%;
    line-height: 120%
}

@media screen and (max-width:800px){
	div.navi {
    width: 25%;
    height: 100%; /* Full height */
    position: fixed; /* Make it stick, even on scroll */
    overflow: hidden; /* Enable scrolling if the sidenav has too much content */
    background-color: #433c42; /*#404040;*/ 
    color: #f6f0ef; /*#e6e6dc;*/
    text-align: center;
    padding-top: 2%;
	font-size: 75%;
	}

	div.navi ul {
    list-style-type: none;    
    /*background-color: #404040;*/
    margin: 0;
    padding: 0;
    margin-top: 20%;
    font-size: 150%;
    line-height: 130%
}

div.navi ul ul{
	margin-top: 0%;
	 font-size: 61%;
    line-height: 120%
}


}


div.navi li a {
    display: block;	
    /*padding: 8px 16px;*/
    text-decoration: none;
    color: #e6e6dc;
}

div.navi li a:hover { /*OPTION  :not(.active)*/
    background-color: #858485;  /* #558e55;*/
    color: #ededed; /*white;*/
}

div.content {
	position: absolute;
	top: 0%;
	width: 73%;
	padding: 3.5%;
	padding-top: 2%;
	padding-bottom: 1%;
	/*padding-top: 0%; <-- shifts menu down by 2% in firefox and google chrome*/
	/*padding-left: 2%;*/	
	margin-left:20%;
	font-size: 110%;
	margin-right: -2%;
}


@media screen and (max-width:800px){
	div.content {
		position: absolute;
	top: 0%;
	width: 70%;
	padding: 2%;
	padding-top: 1%;
	padding-bottom: 1%;
	/*padding-top: 0%; <-- shifts menu down by 2% in firefox and google chrome*/
	/*padding-left: 2%;*/	
	margin-left:25%;
	font-size: 75%;
	margin-right:-2%;
	}
}



div.content ol {
	width: 90%;
	padding-left:5%;
}

div.content ul {
	width: 90%;
	padding-left:4%;
}

div.content table {
	width: 90%;
	padding-left:2%;
	border-collapse: separate;
	border-spacing: 26px 2px;
}

div.content.left
{
}

div.content .member {
  max-width: 1300px;  /* will not exceed 1200px */
  width: 100%;
  margin-bottom:1%;
}

div.content .member img {
	float:right;
  margin-left: 3%; /* Add some space between the image and the text */
  margin-right: 5.25%; 
  margin-bottom:1%; /* Add some space below the image */
  margin-top:0%;
  width:19%;
  height:19%;
}

@media screen and (max-width:800px){
	div.content .member img {
	float:center;
	margin-bottom:7%; /* Add some space below the image */
	margin-top:0%;
	width:93.5%;
	height:93.5%;
	margin-top:3%;
	}
}

div.content.member p {
  display: inline-block; /* Ensure the text wraps around the floated image */
  align: justify;
}

div.content.left.ColOne {
	width: 40%;
	margin-left:20%;
	text-align: center;
}

div.content.left.ColTwo {
	width: 40%;
	margin-left:60%;
	text-align: center;
}

div.content.right {
 	margin-left: 55%;
}

div.content.broad
{
	width: 100%;
	margin-left:0%;
}

div.content h1 {
	float: center;
	margin-left:1.55rem;
}


div.content h2 {
	padding-left: 5%;
}

div.content h3 {
	padding-left: 5%;
}


div.content h4 {
	padding-left: 5%;
}

@media screen and (max-width:800px){
	div.content h1 {
		float:center;
		font-size: 140%;
		margin-left:0.4rem;
	}

	div.content h2 {
		padding-left: 10%;
	}

	div.content h3 {
		padding-left: 10%;
	}


	div.content h4 {
		padding-left: 10%;
	}
}

div.cont {
	  display: none;
}

div.cont.active {
  display: block;
}

div.content table {
	font-size: 90%;
		border-collapse: separate;
	border-spacing: 26px 3px;
}

div.content a {
	color: #858485; /*#558e55;*/ 
	/*ALTERNATIVEtext-decoration: none;*/
	 text-decoration: underline; 
	/*font-weight: bold;*/
	font-weight: normal;
}

div.content a:hover {
	/*	ALTERNATIVE text-decoration: underline;*/
	text-decoration: none;
	background-color: #d1d1d9; /*#858485; #558e55;*/
   color: #433c42; /*#ededed; white;*/ 
}

div.content p {
	padding-left: 2%;
	padding-right: 5%;
}

div.content p.left {
	width: 50%;
}

div.content p.right {
	width: 50%;
   margin-left: 50%;	
}

div.content p.center {
	text-align: center;
}

div.content a {

}

div.content span.code {
	font-family: Courier;
	font-weight: bold;
	font-size: 115%;
}

div.content span.code.execute {
	color: #009100;
}

div.content span.alert {
	color: red;
	font-weight: bold;
	text-decoration: underline;
}

div.content span.struc {
	color: #303095;
	font-style: italic;
	text-decoration: none;
}

div.content span.purple {
	color: purple;
	font-weight: normal;
	text-decoration: none;
}

div.content span.cancelled {
	color: black;
	font-weight: normal;
	text-decoration: line-through;
}