BODY { 
font-family:'arial';
font-size: calc(14px + (24 - 14) * ((100vw - 300px) / 1300)); 
border-collapse:collapse; 
white-space:normal;
margin:1.0em;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }
p, blockquote  { font-size: 1.00em; }

.first img { width: auto; max-width: 100%; height: auto; border: 0;}
.second {
font-size: calc(11px + (20 - 11) * ((100vw - 300px) / 1300));
color: #FFFFFF;
background: #3366FF;
border-bottom: 2px solid #FF0000;
margin: 0;
}
.second h1 {font-size: 1.17em;}

.athole {font-size: calc(12px + (22 - 12) * ((100vw - 300px) / 1300)); }
/* https://css-tricks.com/snippets/css/fluid-typography/ */

/* McGee Tables */
.McGee BODY {  font-family:'arial';background-color:#FFFFF8;}
.McGee TR{border-color:#CC9900;}
.McGee TD{border-color:#CC9900;padding:1px;}
.McGee TABLE {  
font-family:'arial';
font-size: calc(10px + (14 - 10) * ((100vw - 300px) / 1300)); 
background-color:#FFFFEE;
border-color: #CC9900;
border-collapse:collapse;
}

.McGee .clsVert{
line-height:12px;
}
.McGee .clsTblTitle{
font-size:calc(14px + (18 - 14) * ((100vw - 300px) / 1300)); 
background-color:#FFFFDD
}
.McGee .clsRowHeader{background-color:#FFFFDD}
.McGee .clsDiag {background-color: #FFFFFF;color:#008000;}
.McGee .clsDisabled {background-color: #FFFFFF;color:#FFCCCC;}
.McGee .clsNoMutRate {background-color: #ECFFEC;}
.McGee .clsRef  {background-color: #FFFFFF;color:#6060FF;white-space:nowrap}
.McGee .clsCellData {white-space:nowrap;}

.search-form {
  margin-right: 10px;
  padding: 12px;  
  float: right;}
  
.copyright P {font-size: calc(11px + (23 - 11) * ((100vw - 300px) / 1300));}

/* .census TD, TABLE CAPTION {width: 250px; padding-right: 5px; padding-left: 5px; font-size:inherit;} */

.haplo BODY {background-color:#FFFFF8; }
.haplo TR{border-color:#CC9900;}
.haplo TD, TH{border-color:#CC9900;padding-right: 5px; padding-left: 5px;}
.haplo TABLE {  
background-color:#FFFFEE;
border-color: #CC9900;
}

/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_two_columns_responsive */
.column, .row body {box-sizing: border-box; }
/* Create two equal columns that float next to each other */
.column {
    float: left;
    width: 50%;
    padding: 10px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* 3 columns https://www.w3schools.com/howto/howto_css_equal_height.asp */
.col-container {
    display: table; /* Make the container element behave like a table */
    width: 100%; /* Set full-width to expand the whole page */
}

.col {
    display: table-cell;
    padding: 12px; /* Make elements inside the container behave like table cells */
}


/* https://two-wrongs.com/draw-a-tree-structure-with-only-css */
.tree, .tree ul, .tree li {
     position: relative;
}

.tree ul {
    list-style: none;
    padding-left: 32px;
}

.tree li::before, .tree li::after {
    content: "";
    position: absolute;
    left: -12px;
}

.tree li::before {
    border-top: 1px solid #000;
    top: 9px;
    width: 8px;
    height: 0;
}

.tree li::after {
    border-left: 1px solid #000;
    height: 100%;
    width: 0px;
    top: 2px;
}
.tree ul > li:last-child::after {
    height: 8px;
}

@media (max-width: 600px) {
    .column {
        width: 100%;
    }
    .col {width: 100% }
}

/* If the browser window is smaller than 600px, make the columns stack on top of each other */
@media only screen and (max-width: 600px) {
    .col { 
        display: block;
        width: 100%;
    }
}