/* CSS Document */
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}
#container {
  width: 98%;
  margin: 0 auto;
  background-color: #fff;
}
header {
  background: #d8b696 url("images/background.jpg") left center no-repeat;
  text-align: center;
  border: 1px solid black;
  border-bottom: 0;
}
header h2 {
  font-size: 20px;
  margin: 0 20px 0 120px;
}
header h3 {
  ./ui font-size: 18px;
  margin: 0 20px 0 120px;
}
header h4 {
  font-size: 16px;
  margin: 0 20px 0 120px;
}
header h1 {
  font-size: 24px;
  margin: 0 5px 5px 120px;
}
h1 {
  font-size: 24px;
  margin: 0 0 5px 0;
}
h4 {
  font-size: 16px;
  margin: 10px 0 2px 0;
  padding: 0;
}
h5 {
  font-size: 14px;
  margin: 0px 0px 0px 10px;
  padding: 0;
  font-weight: normal;
}
ul {
  margin: 0;
  padding: 0 0 0 30px;
}
ol {
  margin: 0;
  padding: 0 0 0 30px;
}
.highlight {
  color: #CC0000;
  font-weight: bold;
}
.comments {
  10px 3px 30px 5px;
  font-weight: bold;
}
.semihigh {
  font-size: 16px;
  text-align: center;
}
/*The rule below lets images adjust in size to their containers. Since no width is set for 
the images in html or css, the images will display the full width of their container
up to their native resolution which is 360px by 360px. They won't go larger than this and
will maintain their aspect ratio as long as no other sizes are set in css or html. 
Image divs containing flower images do this. */
div#content a:link {
  color: #904401;
}
div#content a:visited {
  color: #904401;
}
header a:link {
  color: #904401;
}
header a:visited {
  color: #904401;
}
nav {
  background-color: #b98b67;
  border-top: 1px solid #000;
  font-family: "Comic Sans MS";
  font-size: 16px;
}
nav ul { /* removes default margins and padding from ul */
  margin: 0 0 0 0;
  padding: 0;
}
nav li {
  list-style: none; /* removes bullet */
  height: 25px;
  margin: 0;
  line-height: 25px; /* centers text vertically in nav button */
}
nav li a {
  text-decoration: none; /* removes underline */
  display: block; /* makes clickable area fill the button */
}
nav a {
  background: #b98b67;
  color: #f8e1cb;
}
nav a:hover {
  background-color: #f8e1cb;
  color: #7a5a41;
}
p.caption {
  margin: 5px 0 40px 0;
  font-weight: bold;
  color: #033;
}
footer {
  background-color: #b98b67;
  border-top: 2px solid #033;
  text-align: center;
  font-size: .9em;
  padding: 5px 20px;
  clear: both; /* Clears any floated elements from above and starts new line */
}
footer a {
  color: #f8e1cb;
  margin: 10px;
  padding: 10px;
  border-collapse: collapse;
  width: 100%;
}
table.couple {
  background-color: #ECDAC7;
  vertical-align: top;
  margin: 10px 0 5px 0;
  padding: 0px;
  border-collapse: collapse;
  width: 100%;
}
table.couple th {
  vertical-align: top;
  border: 1px solid #000000;
  border-collapse: collapse;
  padding: 3px 2px 3px 5px;
}
table.couple td {
  padding: 2px 5px 2px 5px;
  border: 1px solid #000000;
  text-align: left;
  vertical-align: top;
  border-collapse: collapse;
}
table.dna {
  background-color: #c0dffb;
  vertical-align: top;
  margin: 0px;
  padding: 0px;
  border-collapse: collapse;
  width: 100%;
}
table.dna th {
  vertical-align: top;
  border: 1px solid #000000;
  border-collapse: collapse;
  padding: 3px 2px 3px 5px;
}
.dnamale {
  background-color: #a1bfdb;
  width: 23%;
  vertical-align: top;
}
table.map td {
  padding: 2px 5px 2px 5px;
  border: 1px solid #000000;
  text-align: left;
  vertical-align: top;
  border-collapse: collapse;
}
table.migration th {
  vertical-align: top;
  border: 1px solid #000000;
  border-collapse: collapse;
  text-align: center;
  padding: 3px 2px 3px 5px;
}
table.tree {
  border-collapse: collapse;
}
table.tree td {
  margin: 0%;
  padding: 2px 10px 2px 5px;
  border: 1px solid #000000;
}
table.McminnTree td tr {
  margin: 0%;
  padding: 0;
  text-align: center;
}
table.migration th, td {
  vertical-align: top;
  border: 1px solid #000000;
  border-collapse: collapse;
  text-align: center;
  padding: 3px 2px 3px 5px;
}
table.images td {
  padding: 2px 5px 2px 5px;
  border: 0px;
  text-align: middle;
  vertical-align: bottom;
  border-collapse: collapse;
}
.male {
  background-color: #D2B599;
  width: 23%;
  vertical-align: top;
}
.gen {
  width: 8%;
  text-align: left;
  vertical-align: top;
  font-weight: bold;
}
img {
  width: auto;
  max-width: 100%;
  height: auto;
}
#content img {
  float: right;
  margin: 0px 5px 5px 5px;
}