/* style-tru-truss.css */
body {font-family: Helvetica, sans-serif;
      background-color: #ffff80; /* #ffff80 */
      margin: 2px;
      width:inherit;
}
img {width: 100%; 
    height: auto;
    max-width: 500;
}
h1 {font-family: helvetica; font-size: 29px; display:inline}
h2 {font-size: 19px; display:inline; color: #940505}
h3 {text-align: left; font-family: helvetica; display:inline; font-size: 19px}
h9 {font-size: 16px; vertical-align:super}

/* img { max-width: 100%; height: auto } */
a:link {color: #0000FF} /* Blue */
a:visited {color: #800080} /* Purple */
a:hover {font-weight: bold; 
  color: #FF0000; /* Red */
  text-decoration: none;} /* removes underline on hover */
a:active {color: #FFA500}

/* An <img class="d" src="sqpurple.gif" width="9" height="9"> image. */
.a {vertical-align: baseline} /* inline image */
.b {vertical-align: text-top}
.c {vertical-align: text-bottom}
.d {vertical-align: sub}
.e {vertical-align: super}

div {  /* https://www.w3schools.com/css/css3_borders.asp#gsc.tab=0 */
  border: 2px dashed black;
  border-radius:  10px;
  background-color: yellow;
  padding: 2px;
  display: none;
  width: auto;
  max-width:400px;
}
span:hover + div {
  display: block;
 /* writing-mode: vertical-rl;  */
}

divobj {
  width: 100px;
  height: 200px;
  position: absolute;
  animation: myfirst 10s infinite;
  animation-direction: alternate;
}
@keyframes myfirst {
  0%   {left: 50px; top: 50px;}
  25%  {left: 500px; top: 0px;}
  50%  {left: 400px; top: 200px;}
  75%  {left: 50px; top: 100px;}
  100% {left: 50px; top: 50px;}
}