/* CSS Document */
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}
#container {
	width: 94%;
	margin: 0 auto;
	max-width: 1200px;
	background-color: #fff;
}
header {
	
	min-height: 120px;
	text-align: center;
}
header h1 {
	font-size: 30px;
	margin: 0 20px 15px 20px;
}
header h2 {
	font-size: 16px;
	margin: 0 20px 0 20px;
}
header h3 {
	font-size: 14px;
	margin: 0 20px 0 20px;
}
header h4 {
	font-size: 13px;
	margin: 0 20px 0 20px;
}

/*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 {
	text-align: left;
}
div#content a:link {
	color: #cc0000;
}div#content a:visited { 
	color: #cc0000;
	}
header a:link {
	color: #cc0000;
}
header a:visited { 
	color: #cc0000;
	}
nav {
	background-color: #FE9999;
	border-top: 1px solid #000;
	font-family: "Comic Sans MS";
	font-size: 13px;
}
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: #FE9999;
	color: #cc0000;
}
nav a:hover {
	background-color: #cc0000;
	color: #FE9999;
}

p.caption {
	margin: 5px 0 40px 0;
	font-weight: bold;
	color: #033;
}
footer {
 background-color:#FE9999 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 */
}
table {
	margin: 10px;
	padding: 10px;
	border-collapse: collapse;
	width: 100%;
}
table.couple {
	background-color: #FFCCCC;
	vertical-align: top;
	margin: 0px;
	padding: 0px;
	border-collapse: collapse;
	width: 100%;
}
table.couple th {
	vertical-align: top;
	border-bottom: 1px solid #000000;
	border-collapse: collapse;
	padding: 3px 2px 3px 5px;
}
table.couple td {
	padding: 2px 5px 2px 5px;
	border-bottom: 1px solid #000000;
	text-align: left;
	vertical-align: top;
	border-collapse: collapse;
}
table.tree {
	border-collapse: collapse;
}
table.tree td {
	margin: 0%;
	padding: 2px 10px 2px 5px;
}
table.McminnTree td tr {
	margin: 0%;
	padding: 0;
	text-align: center;
}
.male {
	background-color: #FF9999;
	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 0px 10px 10px;
}