/* BODY */
body {
    font-family: Verdana, "Lucida Sans", Arial, sans-serif; 
    font-size: 100%; 
    color: black; 
    background-color: mistyrose;
    opacity: 1.0; 
}
* { box-sizing: border-box; } /* include the padding, border & margin in the total width and height of an element */

/* HEADERS 
verical pixels in the headers
    top padding: 16     16     
    text:        16     16
    text         16
  bottom padding 16     16

  total          64     48
*/
.head, .head-48 { 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    font: 16px Verdana;
    padding: 16px; 
    margin: 0;
    text-align: center; 
    color: white; 
    background-color: #9933aa; 
    z-index: 10;
}
@media screen and (min-width: 600px) {.head-48 {height: 48px}}

/* MAIN Containers  */
.main, .main-48, .main-paper, .main-paper-48 {
    position: relative;
    top: 64px;
    margin: 0 auto 0;
    max-width: 100%;
    padding: 3px;
    background-color: cornsilk;
}

@media screen and (min-width: 600px) {
    .main, .main-48 {max-width: 1120px; padding: 48px 64px;}
    .main-48 {top: 42px;}
    .main-paper, .main-paper-48 {max-width: 1056px; padding: 96px 128px;}
    .main-paper-48 {top: 42px;}
}

/* TIPS */
.tip {
  position: relative;
  display: inline-block;
}

.text {
  position: absolute;
  left: 0;
  top: 20px;
  visibility: hidden;
  background-color: #555;
  font-size: 80%;
  color: white;
  border: 1px solid black;
  border-radius: 6px;
  padding: 16px;
  z-index: 20;
}
@media screen and (min-width: 600px) {.text {min-width: 200px}}
.tip:hover .text {
  visibility: visible;
}

.link  {position: relative; color: blue;}
.hide { display: none; }


/* FLOATS */
/* no border */
[class*="fl"] {width: 100%; margin: 0; overflow: auto;} 
[class*="fr"] {width: 100%; margin: 0; overflow: auto} 
@media screen and ( min-width: 601px ) {
    [class*="fl"] { float: left; margin: 8px;}
    [class*="fr"] { float: right; margin: 8px}
    .fl10,.fr10 { width: 10%; } .fl11,.fr11 { width: 11%; } .fl12,.fr12 { width: 12%; } .fl13,.fr13 { width: 13%; }
    .fl15,.fr15 { width: 15%; } .fl20,.fr20 { width: 20%; } .fl21,.fr21 { width: 21%; } .fl22,.fr22 { width: 22%; }
    .fl23,.fr23 { width: 23%; } .fl24,.fr24 { width: 24%; } .fl25,.fr25 { width: 25%; } .fl26,.fr26 { width: 26%; }
    .fl27,.fr27 { width: 27%; } .fl28,.fr28 { width: 28%; } .fl29,.fr29 { width: 29%; } .fl30,.fr30 { width: 30%; }
    .fl31,.fr31 { width: 31%; } .fl32,.fr32 { width: 32%; } .fl33,.fr33 { width: 33%; } .fl34,.fr34 { width: 34%; }
    .fl35,.fr35 { width: 35%; } .fl36,.fr36 { width: 36%; } .fl37,.fr37 { width: 37%; } .fl38,.fr38 { width: 38%; }
    .fl39,.fr39 { width: 39%; } .fl40,.fr40 { width: 40%; } .fl41,.fr41 { width: 41%; } .fl42,.fr42 { width: 42%; }
    .fl43,.fr43 { width: 43%; } .fl44,.fr44 { width: 44%; } .fl45,.fr45 { width: 45%; } .fl46,.fr46 { width: 46%; }
    .fl47,.fr47 { width: 47%; } .fl48,.fr48 { width: 48%; } .fl49,.fr49 { width: 49%; } .fl50,.fr50 { width: 50%; }
    .fl51,.fr51 { width: 51%; } .fl52,.fr52 { width: 52%; } .fl53,.fr53 { width: 53%; } .fl54,.fr54 { width: 54%; }
    .fl55,.fr55 { width: 55%; } .fl60,.fr60 { width: 60%; } .fl65,.fr65 { width: 65%; } .fl70,.fr70 { width: 70%; }
    .fl75,.fr75 { width: 75%; } .fl80,.fr80 { width: 80%; } .fl85,.fr85 { width: 85%; } .fl90,.fr90 { width: 90%; }
    .fl100 {width: 100%}
}
/* 1px solid black border */
[class*="bl"] {width: 100%; border: 1px solid black; padding: 8px; margin: 0; overflow: auto;}  
[class*="br"] {width: 100%; border: 1px solid black; padding: 8px; margin: 0; overflow: auto;} 
@media screen and ( min-width: 601px ) { 
    [class*="bl"] {float: left; margin: 8px; }
    [class*="br"] {float: right; margin: 8px; }
    .bl15,.br15 { width: 15%; } .bl20,.br20 { width: 20%; } .bl21,.br21 { width: 21%; } .bl22,.br22 { width: 22%; } 
    .bl23,.br23 { width: 23%; } .bl24,.br24 { width: 24%; } .bl25,.br25 { width: 25%; } .bl26,.br26 { width: 26%; } 
    .bl27,.br27 { width: 27%; } .bl28,.br28 { width: 28%; } .bl29,.br29 { width: 29%; } .bl30,.br30 { width: 30%; } 
    .bl31,.br31 { width: 31%; } .bl32,.br32 { width: 32%; } .bl33,.br33 { width: 33%; } .bl34,.br34 { width: 34%; }
    .bl35,.br35 { width: 35%; } .bl36,.br36 { width: 36%; } .bl37,.br37 { width: 37%; } .bl38,.br38 { width: 38%; }
    .bl39,.br39 { width: 39%; } .bl40,.br40 { width: 40%; } .bl41,.br41 { width: 41%; } .bl42,.br42 { width: 42%; }
    .bl43,.br43 { width: 43%; } .bl44,.br44 { width: 44%; } .bl45,.br45 { width: 45%; } .bl46,.br46 { width: 46%; }
    .bl47,.br47 { width: 47%; } .bl48,.br48 { width: 48%; } .bl49,.br49 { width: 49%; } .bl50,.br50 { width: 50%; }
    .bl51,.br51 { width: 51%; } .bl52,.br52 { width: 52%; } .bl53,.br53 { width: 53%; } .bl54,.br54 { width: 54%; }
    .bl55,.br55 { width: 55%; } .bl60,.br60 { width: 60%; } .bl65,.br65 { width: 65%; } .bl70,.br70 { width: 70%; }
    .bl75,.br75 { width: 75%; } .bl80,.br80 { width: 80%; } .bl85,.br85 { width: 85%; } .bl90,.br90 { width: 90%; }
    .bl99,.br99 { width: 99%; } .bl100 { width: 100%; } 
}

/* TEXT  */
/* indented text */
.m1em { margin-left: 1em; margin-right: 1em; } /* indent 1em */
.m2em { margin-left: 2em; margin-right: 2em; } /* indent 2em */
.m3em { margin-left: 3em; margin-right: 3em; } /* indent 3em */
.m4em { margin-left: 4em; margin-right: 4em; } /* indent 4em */
@media screen and (max-width: 600px) {.m1em, .m2em, .m3em, .m4em{margin-left: 1em; margin-right: 1em}}

.indent-first {padding: 0 1em; text-indent: -1em;}
@media screen and (min-width: 600px) {.indent-first {padding: 0 3em; text-indent: -3em;}}

/* bold text comment */
.comment { font-weight: bold; }

[class*="cap-"] {font-weight: bold; white-space: normal; word-break: break-word; padding: 0 4px 8px;}
.cap-cent {font-size: 80%; text-align: center;}
.cap-left {font-size: 80%; text-align: left;}



/* backgrounds */
.paper {display: block; background-image: url("../gif/paper.gif"); border-radius: 3%; font-family: Georgia; padding: 8px;}
.metal {display: block; background-image: url("../gif/metal.gif"); border-radius: 3%; font-family: Georgia; padding: 8px;}
.wood {display: block; background-image: url("../gif/wood.gif"); border-radius: 3%; font-family: Georgia; padding: 8px;}

/* content containers that control text size, weight, decoration and alignment*/
/* titles */
.doc-title {width: 100%; font-size: 16px; font-weight: bold; text-align: center;}
.doc-title16 {width: 100%; font-size: 16px; font-weight: bold; text-align: center; }
.doc-title20 {width: 100%; font-size: 20px; font-weight: bold; text-align: center; }
.bold-center {font-weight: bold; text-align: center; }
/* titles of document images such as letters */
.titles {position: relative; top: 16px; width: 100%; padding: 4px; background-color: rgb(252, 247, 199); font-size: 100%; white-space: normal; word-break: break-word; border: .5px solid black; border-radius: 6px; text-align: center; }

/* table of contents containers used in: ragged-edge-00; waite-blacker-ruth-documents */
.tab-contents {width: 100%; max-height: 95vh; overflow:auto; : 8px; }
.tab-contents a { background-color: #eee; color: black; display: block; padding: 12px; text-decoration: none; }
.tab-contents a:hover { background-color: #ccc; }
.tab-contents a.active { background-color: #4CAF50; color: white; }
.tab-contents li { background-color: #eee; color: black; display: block; padding: 12px; text-decoration: none; }
.tab-contents li:hover { background-color: #ccc; }
.tab-contents li.active { background-color: #4CAF50; color: white; }


/* DECORATIVE */
/* box containers with borders but no defined width or margins */
[class*="bor-"] {padding: 16px; margin: 0;}
@media screen and (min-width: 601px) {[class*="bor-"] {margin: 8px}}
.bor-white { border: 2px solid white;} 
.bor-blue {border: 2px solid blue;}
.bor-green { border: 2px solid green;} 
.bor-red { border: 2px solid red; }
.bor-yellow { border: 2px solid yellow;}
.bor-black { border: 2px solid black;}
.bor-1-black { border: 1px solid black;}

/* start of rules for pages using a map*/
.headName {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 64px; 
    padding: 8px; 
    text-align: center; 
    color: white; 
    background-color: #9933cc; 
    z-index: 5; 
} 
.bodyText {
    position: fixed; 
    top: 64px; 
    left: 0; 
    width: 100vw; 
    height: 95vh; 
    overflow: auto; 
    padding: 0 8px 32px 8px; 
    color: black; 
    background-color: lightblue; 
    z-index: 4; 
}
.bodyImg {
    position: absolute; 
    top: 0; 
    left: 100vw; 
}
@media screen and ( min-width: 601px ) {
    .headName {width: 600px; } 
    .headContact {width: 600px; } 
    .bodyText {width: 600px; } 
    .bodyImg {left: 600px; }
    }
.placeMark {padding: 8px; font-size: 80%; color: black; font-weight: bold; background-color: green; opacity: 20%; border-radius: 20%; z-index: 3;}
.peopleText {font-size: 60%; max-width: 200px; padding: 8px; border-radius: 10%; z-index: 3;}
.scrollTo {color: blue; text-decoration: undlerline; cursor: pointer; }
/*.gridClass {position: absolute; width: 499px; height: 499px; z-index: 1; } */
.gridClass {position: absolute; width: 499px; height: 499px; border: 1px solid blue; z-index: 1; } 
.gridText {position: relative; top: 8px; left: 180px; width: 50px; font-weight: bold; background-color: lightgrey; opacity: 50%; } 

.divAnimation {position: absolute; width: 32px; height: 32px; border-radius: 50%; z-index: 3; animation-name: animationYellow; animation-duration: 1s; animation-iteration-count: 10; }

.divAnimationRed {position: absolute; width: 32px; height: 32px; border-radius: 50%; z-index: 3; animation-name: animationRed; animation-duration: 1s; animation-iteration-count: 10; }

.divAnimationRed16 {position: absolute; width: 16px; height: 16px; border-radius: 50%; z-index: 3; animation-name: animationRed; animation-duration: 1s; animation-iteration-count: 10; }

@keyframes animationYellow {from {background-color: red;} to {background-color: yellow;} }
@keyframes animationRed {from {background-color: blue;} to {background-color: red;} }
/* end of rules for pages using a map*/

/* grid rules */
.grid-2, .grid-3, .grid-4 {
    padding: 8px 0;
    width: 100%; 
} 
@media screen and (min-width: 900px) {
    .grid-2, .grid-3, .grid-4 {
        display: grid; 
        grid-template-columns: 1fr 1fr;
        grid-gap: 8px;
        padding: 8px 8px;
        border: 1px solid black;
    }
    .grid-3 {grid-template-columns: repeat(3, 1fr);}
    .grid-4 {grid-template-columns: repeat(4, 1fr);}
}


.labels {
    position: absolute;
    color: yellow;
    background-color: black;
    font-size: 12px; 
    border-radius: 6px;
    padding: 4px;
    z-index: 1;
}