/* 
	Everyman Genealogy Style Sheet
	Author: Starr Gibson
	Date: 22 January 2016

	Filename: style.css
	Supporting files: tree.png
*/

/* Default Styles */

	article, aside, figure, figcaption, footer, hgroup, header, section, 
	nav {
		display: block;
	}

	body * {
		font-family: "Courier New", courier, sans-serif;
		font-size: 100%;
		font-weight: inherit;
		line-height: 1.2 em;
		vertical-align: baseline;
		margin: 0px;
	}

/* Header Styles */

	header {
		border-bottom: 5px green solid;
	}

	header img {
		width: 400px;
		height: 200px;
	}

/* Body Styles */

	body {
		background-color: ivory;
		width: 90%;
		min-width: 1000px;
		max-width: 1400px;
	}

/* Navigation Styles */	

	nav * {
		background-color: brown;
	}

	nav li {
		float: left;
		width: 10.5%;
		margin: 10px;
		padding: 10px;
		border-radius: 25px;

		-moz-box-shadow: gray -5px 5px 5px 1px;
		-webkit-box-shadow: gray -5px 5px 5px 1px;
		box-shadow: gray -5px 5px 5px 1px;
	}

	nav ul {
		text-align: center;
		font-size: 125%;
		line-height: 1.5em;
		list-style: none;
	}

	nav ul li a {
		color: white;
		text-decoration: none;
	}

/* Aside Styles */

	aside {
		clear: left;
		float: left;
		background-color: forestgreen;
		text-align: center;
		width: 30%;
		height: 300px;
		border-radius: 30px;
		font-size: 125%;
		margin-top: 20px;
		border: 15px black double;
	}

	aside h2 {
		text-align: center;
		font-size: 155%;
		color: white;
		margin: 20px;
	}

	aside.play h2 {
		text-align: center;
		font-size: 100%;
		color: white;
		margin: 20px;
	}

	aside.play a {
		color: white;
	}

/* Section Styles */

	section {
		float: right;
		width: 60%;
		margin-top: 30px;
	}

	section.solo {
		clear: left;
		clear: right;
		width: 90%;
		margin-top: 30px;
	}

/* Image Styles */

	figure img {
		border: 5px solid black;
		border-radius: 10px;
		width: 30%;
	}

/* Figure Styles */

	figure#nameless {
		position: absolute;
		top: 400px;
		left: 10px;
		transform: rotate(-30deg);
	}

	figure#charles {
		position: relative;
		left: -100px;
	}

	figure#lorenze {
		position: relative;
		left: 10px;
		transform: rotate(30deg);
	}

	figure#clarence {
		position: relative;
		top: -500px;
		left: 400px;
	}

	figure#evelyn {
		position: relative;
		top: -500px;
		left: -200px;
	}

	figure#goldie {
		position: relative;
		top: -800px;
		left: 200px;
	}

	figure#henry {
		position: relative;
		top: -900px;
		left: -400px;
		transform: rotate(-30deg);
	}

	figure#uncle {
		position: relative;
		top: -1000px;
		left: 300px;
		transform: rotate(30deg);
	}

/* Article Styles */

	article h1 {
		font-size: 200%;
		font-weight: bold;
		color: brown;
	}

	article strong {
		color: brown;
		font-weight: bold;
	}

	article img {
		display: inline;
		float: right;
		width: 200px;
		height: 300px;
		margin: 10px;
	}

	img#family {
		display: inline;
		float: right;
		width: 300px;
		height: 300px;
		margin: 10px;
		border: 3px black solid;

		-moz-box-shadow: gray 5px -5px 5px 1px;
		-webkit-box-shadow: gray 5px -5px 5px 1px;
		box-shadow: gray 5px -5px 5px 1px; 
	}

	article.fact p {
		padding: 10px;
	}
/* Footer Styles */

	footer {
		clear: both;
		background-color: brown;
		color: white;
		text-align: center;
	}