/*CONTENT*/

body {background-color: #999999; margin: 0;}

p {color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 11pt;}

h1 {color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 18pt; font-variant: small-caps; text-align: center;}

hr {display: block;
  width: 25%;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid #666666;}
  
.center {width: 90%; margin: auto; text-align: center;}
.center img {max-width: 100%;}

.content {width:90%;
  background-color: #f2f2f2;
  border: 2px solid #333333;
  padding: 20px;
  margin-top: 7.5em;
  margin-bottom: 1.5em;
  margin-left: auto;
  margin-right: auto;}
  
.small {font-size: 10pt; text-align: center;}

.nolink {color: #666666;}

.copyright {color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; padding: 1em; text-align: center;}

/*HEADER*/

header {background-color: #f2f2f2; width: 100%; height: 6em; position: fixed; top: 0;}
.logo img {height: 4em; position: fixed; top: 1em; right: 1em; z-index: 1;}

/*LINKS*/

.content a:link {color: #666666; text-decoration: none;}
.content a:visited {color: #666666; text-decoration: none;}
.content a:active {color: #666666; text-decoration: none;}
.content a:hover {color: #4d4d4d; text-decoration: underline;}

/*NAVBAR LINKS*/

ul {list-style-type: none;
  background-color: #f2f2f2;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
  top: 3.5em;
  width: 100%;
  border-bottom: 2px solid #333333;}
  
li {float: left;}
li a, .dropbtn {display: inline-block; color: #444444; padding: 1em; text-align: center; text-decoration: none;}
li a:hover, .dropdown:hover .dropbtn {background-color: #cccccc; text-decoration: none;}
li.dropdown {display: inline-block;}
.dropdown-content {display: none; background-color: #dedede; position: fixed; min-width: 160px; z-index: 2;
  border-top: 2px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #333333;
  border-right: 1px solid #333333;}
.dropdown-content a {display: block; color: #666666; padding: 1em; text-align: left; text-decoration: none;}
.dropdown-content a:hover {background-color: #e6e6e6;}
.dropdown:hover .dropdown-content {display: block;}

/*TABLES & TABLE CLASSES*/

table {font-family: Arial, Helvetica, sans-serif;
  background-color: #e6e6e6;
  border: 1px solid #000000;
  border-collapse: collapse;
  margin: auto;
  }

.stats {width: 90%; text-align: left}
.stats th {background-color: #cccccc; text-align: center; font-size: 13pt; font-weight: bold; font-variant: small-caps; border-bottom: 1px solid #000000; padding: 10px;}
.stats td {vertical-align: top; font-size: 11pt; border-bottom: 1px solid #000000; padding: 10px;}

.residents {width: 90%;}
.residents th {background-color: #cccccc; text-align: center; font-size: 13pt; font-weight: bold; font-variant: small-caps; padding: 10px; border-bottom: 1px solid #000000}
.residents td {font-size: 10pt; vertical-align: center; border-bottom: 1px solid #000000; padding: 5px 10px;}
.residents tr:nth-child(2) td {background-color: #cccccc; padding: 10px;}

.pedigree {padding: 10px; font-size: 10pt; width: 90%; text-align: left;}
.pedigree th {background-color: #cccccc; text-align: center; font-size: 13pt; font-weight: bold; font-variant: small-caps; border-bottom: 1px solid #000000; padding: 10px;}
.pedigree td {border: 1px solid #000000; padding: 10px;}
.pedigree a {font-weight: bold;}
.pedigree img {border: 1px solid #000000;}

.sibs {font-size: 10pt; width: 90%; text-align: left;}
.sibs th {background-color: #cccccc; text-align: center; font-size: 13pt; font-weight: bold; font-variant: small-caps; padding: 10px; border-bottom: 1px solid #000000}
.sibs td {vertical-align: top; padding: 10px; border-bottom: 1px solid #000000;}
.sibs a {font-weight: bold;}

.offspring {padding: 10px; font-size: 10pt; width: 90%; text-align: left;}
.offspring th {background-color: #cccccc; text-align: center; font-size: 13pt; font-weight: bold; font-variant: small-caps; border-bottom: 1px solid #000000; padding: 10px;}
.offspring td {vertical-align: top; padding: 10px; border-bottom: 1px solid #000000;}
.offspring a {font-weight: bold;}

.chart {padding: 10px; width: 70%;}
.chart th {background-color: #cccccc; text-align: center; font-size:13pt; font-weight: bold; font-variant: small-caps;}
.chart td {vertical-align: top; font-size: 10pt;}

.links {padding: 10px; text-align: center; width: 70%;}
.links th {background-color: #cccccc; text-align: center; font-size: 11pt; font-weight: bold;}
.links td {vertical-align: top; font-size: 11pt;}

/*TABS*/

.tab {overflow: hidden; font-family: Arial, Helvetica, sans-serif; font-size: 10pt;}
.tab button {background-color: #f2f2f2;
  color: #666666;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 10px;}
.tab button:hover {background-color: #666666; color: #f2f2f2;}
.tab button.active {background-color: #666666; color: #f2f2f2;}
.tabcontent {display: none; padding: 6px 12px;}