/**
 * 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
 */

body.KpfzBody {
    overflow-y: scroll;
}


div.PNGwatermarked  { 
 
  background-image: url('aflong-wmark.png');
  background-repeat: repeat; /* This will tile your SVG across the div */
 max-width:50rem;
 margin-top:5px;
 margin-bottom: 5px;
 margin-left: 1rem;
 margin-right: 1rem;
 border:1px solid #888;
 border-radius: 7px;
 padding:1rem;
 font-size: 0.9em;
 
 }
 
 div.SVGwatermarked  { 
 
  background-image: url('aflong-wmark.svg');
  background-repeat: repeat; /* This will tile your SVG across the div */
 max-width:50rem;
 margin-top:5px;
 margin-bottom: 5px;
 margin-left: 1rem;
 margin-right: 1rem;
 border:1px solid #888;
 border-radius: 7px;
 padding:1rem;
 font-size: 0.9em;
 
 }


div.watermarked {
  background-image: url('aflong-wmark.png');
  background-repeat: repeat; /* This will tile your SVG across the div */
}

 div.KpfzTitle  {
 background-color:#FFF;
 max-width:50rem;
 margin-top:0px;
 margin-bottom: 0px;
 margin-left: 0rem;
 margin-right: 1rem;
 border:0px solid #888;
 padding:0rem;
 font-size: 0.9rem;
 
 }
 
 div.KpfzSubBox0  {
 background-color:#FFF;
 max-width:50rem;
 margin-top:5px;
 margin-bottom: 5px;
 margin-left: 1rem;
 margin-right: 1rem;
 border:0px solid #888;
 border-radius: 7px;
 padding:1rem;
 font-size: 0.9rem;
 
 }
 div.KpfzImageBox0 {
 max-width:60em;
 margin-top:5px;
 margin-bottom: 5px;
 margin-left: 1px;
 margin-right: 1px;
 border:2px solid #333;
 border-radius: 7px;
 padding:1rem;
 
  /* 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.KpfzSubBox1  {
 background-color:#EEF;
 max-width:50rem;
 margin-top:5px;
 margin-bottom: 5px;
 margin-left: 1rem;
 margin-right: 1rem;
 border:1px solid #888;
 border-radius: 7px;
 padding:1rem;
 font-size: 0.9em;
 
 }
 div.KpfzImageBox1 {
 max-width:60rem;
 margin-top:5px;
 margin-bottom: 5px;
 margin-left: 1px;
 margin-right: 1px;
 border:2px solid #333;
 border-radius: 7px;
 padding:1rem;
 
  /* 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.KpfzSubBox2  {
 background-color:#EEF;
 max-width:49em;
 margin-top:5px;
 margin-bottom: 5px;
 margin-left: 2em;
 margin-right: 1em;
 border:1px solid #888;
 border-radius: 7px;
 padding:1em;
 font-size: 0.9em;
 
 }
 div.KpfzImageBox2 {

 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.KpfzImageBox3 {
 
  /* 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.KpfzImageBoxContent {
  color:#000000;
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
 }
 
 img.KpfzImageLeft {
  display: block;
  margin-left: 0px;
  margin-right: auto;
  width: 90%;
 }
 
 img.KpfzImageCenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
 }
 
 img.KpfzImageRight {
  display: block;
  margin-left: auto;
  margin-right: 0px;
  width: 90%;
 }
 
 hr {
  height:0; 
  border:0; 
  border-top:2px solid #888; 
}

button.KpfzDonate {
width:45%;  
border-radius:10px; 
background-color:#99F; 
font-size:200%;
}

td.KpfzHelp6 { border: 2px solid blue;
}

span.smallcaps { font-variant: small-caps;
}

// table {
//   width: 90%; /* Optional: Adjust as necessary */
// }

// table td {
//   text-align: right;
//   vertical-align: top;
// }

table.KpfzLeft  td {
  text-align: left;
  vertical-align: top;
}

table.C4HSource th {
  text-align: left;
  vertical-align: top;
  border-width: 1px;
  border-color:black;
}  td {
  text-align: left;
  vertical-align: top;
  border-width: 1px;
  border-color:black;
}

div.KpfzBoth  {
 max-width:50rem;
 margin-top:5px;
 margin-bottom: 5px;
 margin-right: 1rem;
 border:1px solid #888;
 border-radius: 3px;
 padding: 0.5rem 1rem;
 font-size: 0.9rem;
}

div.KpfzArg  {
 background-color: #f8d7da;
 margin-left: 1rem;
}

div.KpfzResp  {
 background-color: #d1ecf1;
 margin-left: 2rem;
 margin-right: 2rem;
}

div.KpfzResp2  {
 background-color: #ddddff;
 margin-left: 2rem;
 margin-right: 2rem;
}

div.KpfzHighlightBox {
  color: #000; /* Text color */
  background-color: #FFF; /* Background color */
  margin: 0.1rem 5.0rem 0.1rem 0.0rem; /* Margin: Top, Right, Bottom, Left */
  padding: 0.1rem 0.3rem 0.1rem 0.3rem; /* Padding: Top, Right, Bottom, Left */
  border-width: 1px; /* Border width */
  border-style: solid; /* Border style */
  border-color: #000; /* Border color */
}

div.KpfzArgStyle2 {
 background-color: #f8d7da;
 margin-left: 1rem;
}

div.KpfzRespStyle2  {
 background-color: #d1ecf1;
 margin-left: 2rem;
 margin-right: 2rem;
}




