body
{
font-family:"Times", Arial, Helvetica, sans-serif;
}
body.trng
{
    background-color: lightpink;
    font-family:"Times", Arial, Helvetica, sans-serif;
}
caption
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-left:auto;
margin-right:auto;
}
caption.tableheader
{
font-size:150%;
}
table
{
border-collapse:collapse;
width:90%;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
table, td
{
border:1px solid black;
border-spacing:0;
border-collapse:separate;
padding:0px 0px 0px 0px;
}
td
{
border:1px solid #A0A0A0;
border-spacing:0;
border-collapse:separate;
padding:3px 7px 2px 7px;
}
td.fill
{
border:8px;
}
th
{
border:1px solid #A0A0A0;
background-color:#C0C0C0;
color:black;
padding:5px 7px 4px 7px;
}
tr.alt
{
color:#000000;
background-color:#E8E8E8;
}
tr.alt2
{
color:#000000;
background-color:#B8B8B8;
}
p.footer
{
font-family:"Trebucht MS",Helvetica,Arial,san-serif;
font-size:75%;
color:#666666;
}
p.h1
{
font-family:Arial, Helvetica, sans-serif;
font-size:200%;
font-weight: bold;
color:#000000;
}
p.h2
{
font-family:Arial, Helvetica, sans-serif;
font-size:150%;
font-weight: bold;
color:#000000;
}
p.h3
{
font-family:Arial, Helvetica, sans-serif;
font-size:200%;
]font-weight: bold;
color:#000000;
}
p.h4
{
font-family:Arial, Helvetica, sans-serif;
font-size:150%;
color:#000000;
}
p.h5
{
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
color:#000000;
}p.h6
{
font-family:Arial, Helvetica, sans-serif;
font-size:80%;
color:#999999;
}
button
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
span.button
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}

.flex-start { 
  justify-content: flex-start; 
}

.flex-end { 
  justify-content: flex-end; 
}  
.flex-end li {
  background: gold;
}

.center { 
  justify-content: center; 
}  
.center li {
  background: deepskyblue;
}

.space-between { 
  justify-content: space-between; 
}  
.space-between li {
  background: tan;
}

.space-around { 
  justify-content: space-around; 
}
.space-around li {
  background: hotpink; 
}

.space-evenly { 
  justify-content: space-evenly; 
}
.space-evenly li {
  background: #bada55; 
}

.flex-item {
  background: tomato; 
  padding: 0px;
  width: auto;
  height: 40px;
  margin: 5px;
  line-height: 50px;
  color: black;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
}
.viewerContainer8to5 { 
width:auto; /* expands to width of browser window & sets height of container to 62.5% of width as default. */
padding-top:62.5%; 
margin:auto; 
border:1px; 
border-style:solid; 
border-color:#696969;
}
.viewerContainer4to3 { 
width:auto; /* expands to width of browser window & sets height of container to 75% of width as default. */
padding-top:75%; 
margin:auto; 
border:1px; 
border-style:solid; 
border-color:#696969;
}
.viewerContainer2to1 { 
width:auto; /* expands to width of browser window & sets height of container to 50% of width as default. */
padding-top:50%; 
margin:auto; 
border:1px; 
border-style:solid; 
border-color:#696969;
}