/**
 * Get anchor to show when scroll-point is behind fixed header
 * http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header
 */
 FarSup  {
  font-size: 0.1rem; /* adjust as needed */
  vertical-align: super;
 }
 div.FarRefBox  {
 background-color:#FFF;
 max-width:50em;
 margin-top:2px;
 margin-bottom: 5px;
 margin-left: 20px;
 margin-right: 10px;
 border:1px solid #888;
 border-radius: 5px;
 padding:1em;
 font-size: 0.9em;
 }
 
 div.FarDiv1  {
 background-color:#FFF;
 max-width:50em;
 margin-top:5px;
 margin-bottom: 5px;
 margin-left: 10px;
 margin-right: 10px;
 border:1px solid #888;
 border-radius: 7px;
 padding:1em;
 font-size: 1.0rem;
 line-height: 1.6;
 }
 
 div.FarDiv2  {
 background-color:#FFF;
 max-width:50em;
 margin-top:5px;
 margin-bottom: 5px;
 margin-left: 20px;
 margin-right: 10px;
 border:1px solid #888;
 border-radius: 7px;
 padding:1em;
 font-size: 0.9rem;
 
 }
 
 div.FarDiv3  {
 background-color:#FFF;
 max-width:50em;
 margin-top:5px;
 margin-bottom: 5px;
 margin-left: 20px;
 margin-right: 10px;
 border:1px solid #888;
 border-radius: 7px;
 padding:1em;
 font-size: 0.9rem;
 
 }
 
 div.FarImageBox1 {
 max-width:60em;
 margin-top:5px;
 margin-bottom: 5px;
 margin-left: 1px;
 margin-right: 1px;
 border:2px solid #333;
 border-radius: 7px;
 padding:1em;
 
  /* background-image: url("http://farfoto.com/samples/IMG_20180806_195412510.jpg"); The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire */
  
  /* opacity: 0.3;  */
  filter: alpha(opacity=30); /* For IE8 and earlier */
 }
 div.FarImageBox2 {

 margin-top:5px;
 margin-bottom: 5px;
 margin-left: 1px;
 margin-right: 1px;
 border:2px solid #333;
 border-radius: 7px;
 padding:1em;
 
  /* background-image: url("http://farfoto.com/samples/IMG_20180806_195412510.jpg"); The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire */
  
  opacity: 0.3; 
  filter: alpha(opacity=30); /* For IE8 and earlier */
 }
 
 div.FarImageBox3 {
 
  /* background-image: url("http://farfoto.com/samples/IMG_20180806_195412510.jpg"); The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire */
  
  opacity: 0.3; 
  filter: alpha(opacity=30); /* For IE8 and earlier */
 }
 div.FarImageBoxContent {
  color:#000000;
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
 }
 
 img.FarImageLeft {
  display: block;
  margin-left: 0px;
  margin-right: auto;
  width: 90%;
 }
 
 img.FarImageCenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
 }
 
 img.FarImageRight {
  display: block;
  margin-left: auto;
  margin-right: 0px;
  width: 90%;
 }
 
 hr {
  height:0; 
  border:0; 
  border-top:2px solid #888; 
}

button.FarDonate {
width:45%;  
border-radius:10px; 
background-color:#99F; 
font-size:200%;
}

td.FarHelp6 { border: 2px solid blue;
}

div.FarRefBox  {
 background-color:#FFF;
 max-width:50em;
 margin-top:5px;
 margin-bottom: 5px;
 margin-left: 5px;
 margin-right: 5px;
 border:1px solid #888;
 border-radius: 5px;
 padding:3px;
 font-size: 0.9em;
 }
 
 div.FarSnippet  {
 background-color:#FFF;
 /*  max-width:50em; */
 margin-top:2px;
 margin-bottom: 5px;
 margin-left: 5px;
 margin-right: 5px;
 border:0px solid #888;
 border-radius: 5px;
 padding:3px;
 font-size: 0.9em;
 }
 
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 2px;
  width: 100%;
  border: none;
  outline: none;
  /* transition: 0.5s;  */
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 1rem;
  background-color:#DDD;
  display: none;
  overflow: hidden;
}

.spanbutton {
   border-radius:5px;
   background-color:#eee;
   width:5rem;
   height:2rem;
   padding:5px;
}

// style for macro-control-panel  5/8/23
   .fixeddiv {
			position: fixed;
			top: 50%;
			// left: 5px;
			right: 0px;
			transform: translate(0, -80%);
			width: 80%;
			background-color: #f2f2f2;
			padding: 1px;
			box-sizing: border-box;
			z-index: 1;
		}

   .fixeddiv1 {
			position: fixed;
			top: 5px;
			left: 5px;
			right: 5px;
			width: 100%;
			background-color: #f2f2f2;
			padding: 1px;
			box-sizing: border-box;
			z-index: 1;
		}
		
		#macro-control-panel {
			position: fixed;
			top: 20%; // was 5px
			left: 5px;
			right: 5px;
			width: 80%; // was 100
			transform: translate(0, -80%); // af+
			background-color: #eee;
			padding: 4px;
			box-sizing: border-box;
			z-index: 1;
		}

		#macro-control-panel .accordion {
			background-color: #fff;
			color: #444;
			cursor: pointer;
			padding: 18px;
			width: 100%;
			border: none;
			text-align: left;
			outline: none;
			font-size: 18px;
			transition: 0.4s;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		#macro-control-panel .accordion.active, #macro-control-panel .accordion:hover {
			background-color: #ddd;
		}

		#macro-control-panel .accordion:after {
			content: '\02795';
			font-size: 16px;
			color: #ccc;
			float: right;
			width: 10%; // af+
			//  margin-left: 5px;  // af-
		}

		#macro-control-panel .accordion.active:after {
			content: "\2796";
		}

		#macro-control-panel .panel {
			padding: 0 18px;
			background-color: #fdd;
			display: block;
			overflow: hidden;
		}

		#macro-control-panel .panel.show {
			display: block;
		}
		
		div.KpfzBoth  {
 max-width:50rem;
 margin-top:5px;
 margin-bottom: 5px;
 margin-right: 1rem;
 border:1px solid #888;
 border-radius: 7px;
 padding:1rem;
 font-size: 0.9rem;
}

div.KpfzArg  {
 background-color: #f8d7da;
 margin-left: 1rem;
}

div.KpfzResp  {
 background-color: #d1ecf1;
 margin-left: 2rem;
}