* { margin: 0; padding: 0; }
body {
	background: repeating-linear-gradient(#FCFCFC, #FFF 50px);
	background: -webkit-repeating-linear-gradient(#FCFCFC, #FFF 50px);
	background: -o-repeating-linear-gradient(#FCFCFC, #FFF 50px);
	background: -moz-repeating-linear-gradient(#FCFCFC, #FFF 50px);
	color: #666;
	font-family: 'segoi ui', arial, san-serif;
	font-size: 12px;
	white-space: nowrap;
}
div { vertical-align: top }
p { text-align: left; }
p:first-of-type { border-top: 1px solid #CCC; }
/* HEADER */
header { background: #006699; color: #FFF; height: 30px; padding: 10px; position: fixed; width: 100%; z-index: 50; }
header input[type=checkbox] { position: absolute; right: 260; top: 16; transform: scale(2); -webkit-transform: scale(2); z-index: 100; }
header input[type=search] { position: absolute; right: 140; top: 15; width: 100px; z-index: 100; }
header input[type=submit] { position: absolute; right: 80; top: 16; width: 55px; z-index: 100; }
.email { background-color: #FFF; overflow: hidden; position: absolute; right: 35px; top: 15px; height: 20px; width: 30px; }
.email::before, .email::after {
	background-color: #FFF;
	content: '';
	height: 30px;
	margin-left: -15px;
	position: absolute;
		left: 50%;
	transform: rotate(45deg) skew(-5deg,-5deg);
	width: 30px;
}
.email::before { bottom: 50%; box-shadow: 2px 2px 0 0 #006699; z-index: 1; }
.email::after { box-shadow: -2px -2px 0 0 #006699; top: 50%; }
.email span { display: none; }
/* DATES */
#dates {
	background: -webkit-repeating-linear-gradient(#FCFCFC, #FFF 50px);
	background: -o-repeating-linear-gradient(#FCFCFC, #FFF 50px);
	background: -moz-repeating-linear-gradient(#FCFCFC, #FFF 50px);
	background: repeating-linear-gradient(#FCFCFC #FFF 50px);
	display: inline-block;
	font-family: 'lucida calligraphy', arial, san-serif;
	float: left;
	margin-top: 50px;
	width: 40px;
	z-index: 10;
}
#dates p { border-top: 1px solid #CCC; border-right: 1px solid #CCC; height: 39px; padding: 5px; }
.event {
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	font-size: 10px;
	line-height: 2em;
	padding-left: 5px;
	position: absolute;
		right: 0;
		left: 40px;
	vertical-align: middle;
	z-index: -3;
}
/* MAIN */
main { overflow-x: auto; position: absolute; left: 40px; right: 0; top: 50px; }
@keyframes parent { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
@-webkit-keyframes parent { 0% { -webkit-transform: scaleY(0); } 100% { -webkit-transform: scaleY(1); } }
@keyframes child { 0% { transform: scaleY(0); } 50% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
@-webkit-keyframes child { 0% { -webkit-transform: scaleY(0); } 50% { -webkit-transform: scaleY(0); } 100% { -webkit-transform: scaleY(1); } }
/* TREE */
.tree { display: inline-block; padding: 0 10px 15px; }
.tree ul { padding-top: 10px; position: relative; }
.tree li {
	display: inline-block;
	list-style-type: none;
	margin: 0 -2px 0 -2px;
	padding: 5px 2px 0 2px;
	position: relative;
	text-align: center;
	vertical-align: top;
	white-space: nowrap;
}
.tree li::before, .tree li::after { border-top: 1px solid #99CCFF; content: ''; position: absolute; right: 50%; top: 0; width: 50%; z-index: -1; }
.tree li::after { height: 5px; left: 50%; right: auto; }
.tree .branchM::after { border-left: 1px solid #99CCFF; }
.tree .branchF::after { border-left: 1px solid #FF99CC; }
.tree li:first-child::before, .tree li:last-child::after { border: 0 none; }
.tree li:last-child::before {
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
	height: 5px;
	margin-right: -1px;
}
.tree .branchM:last-child::before { border-right: 1px solid #99CCFF; }
.tree .branchF:last-child::before { border-right: 1px solid #FF99CC; }
.tree li:first-child::after { border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; }
.tree ul ul::before {
	border-top: 11px solid #99CCFF;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent; 
	content: '';
	height: 0;
	margin-left: -4px;
	position: absolute;
		left: 50%;
		top: 0;
	width: 0;
	z-index: -2;
}
.tree li:only-child::after, .tree li:only-child::before { border-radius: 0; }
.tree li:only-child:first-child::before { border: 0 none; }
.tree .branchM:only-child:last-child::after { border-left: 1px solid #99CCFF !important; }
.tree .branchF:only-child:last-child::after { border-left: 1px solid #FF99CC !important; }
.tree li span {
	border: 2px solid #99CCFF;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	color: #333;
	display: inline-block;
	font-size: 10px;
	margin-right: 5px;
	text-decoration: none;
	vertical-align: top;
}
.child, .spouse { display: inline-block; height: 53px; padding: 3px 5px 5px; }
.spouse { border: 2px solid #99CCFF; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; margin: -2px; }
/* ANIMATIONS */
.tree ul input + span, .tree li input + span + ul { display: none; }
.tree ul input:checked + span, .tree li input:checked + span + ul {
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;	
	transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	-webkit-transform-origin: 50% 0%;
}
.tree ul input:checked + span {
	animation-name: parent;
	-webkit-animation-name: parent;
	animation-duration: 0.5s;
	-webkit-animation-duration: 0.5s;
	display: inline-block;
}
.tree li input:checked + span + ul {
	animation-name: child;
	-webkit-animation-name: child;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	display: block;
}
/* GENDERS */
.M { background-color: #F9FCFF; border-color: #99CCFF !important; }
.F { background-color: #FFF9FC; border-color: #FF99CC !important; }
/* LINES */
.line5, .line10, .line15, .line20, .line25, .line30, .line35, .line40, .line45, .line50,
.line55, .line60, .line65, .line70, .line75, .line80, .line85, .line90, .line95, .line100,
.line105, .line110, .line115, .line120, .line125, .line130, .line135, .line140, .line145, .line150,
.line155, .line160, .line165, .line170, .line175, .line180, .line185, .line190, .line195, .line200
{ background-color: transparent; border-right: 1px solid #CCC; width: 50%; }
.line5 { height: 5px; }
.line10 { height: 10px; }
.line15 { height: 15px; }
.line20 { height: 20px; }
.line25 { height: 25px; }
.line30 { height: 30px; }
.line35 { height: 35px; }
.line40 { height: 40px; }
.line45 { height: 45px; }
.line50 { height: 50px; }
.line55 { height: 55px; }
.line60 { height: 60px; }
.line65 { height: 65px; }
.line70 { height: 70px; }
.line75 { height: 75px; }
.line80 { height: 80px; }
.line85 { height: 85px; }
.line90 { height: 90px; }
.line95 { height: 95px; }
.line100 { height: 100px; }
.line105 { height: 105px; }
.line110 { height: 110px; }
.line115 { height: 115px; }
.line120 { height: 120px; }
.line125 { height: 125px; }
.line130 { height: 130px; }
.line135 { height: 135px; }
.line140 { height: 140px; }
.line145 { height: 145px; }
.line150 { height: 150px; }
.line155 { height: 155px; }
.line160 { height: 160px; }
.line165 { height: 165px; }
.line170 { height: 170px; }
.line175 { height: 175px; }
.line180 { height: 180px; }
.line185 { height: 185px; }
.line190 { height: 190px; }
.line195 { height: 195px; }
.line200 { height: 200px; }
.life, .wedded { display: inline-block; position: absolute; z-index: -2; }
.life { border-left: 2px solid #99CC66; margin-left: 4px; margin-top: -2px; }
.wedded { border-left: 2px solid #CCCC66; margin-left: 8px; }
/* KEYS */
#upkey, #downkey, #leftkey, #rightkey {
	background: #006699;
	border: 10px solid #006699;
	display: block;
	height: 30px;
	position: fixed;
	transform: rotate(45deg);
	width: 30px;
}
#upkey { border-top-left-radius: 100%; bottom: 80px; right: 40px; }
#downkey { border-bottom-right-radius: 100%; bottom: 0px; right: 40px; }
#leftkey { border-bottom-left-radius: 100%; bottom: 40px; right: 80px; }
#rightkey { border-top-right-radius: 100%; bottom: 40px; right: 0px; }
#upkey::before, #downkey::before { border: solid #FFF; content: ""; height: 50%; position: absolute; width: 50%; }
#upkey::before { border-width: 5px 0 0 5px; left: 40%; top: 40%; }
#downkey::before { border-width: 0 5px 5px 0; bottom: 40%; right: 40%; }
#leftkey::before, #rightkey::before {
	border: 3px solid #FFF;
	border-radius: 40%;
	content: "";
	height: 40%;
	position: absolute;
	transform: rotate(-45deg);
	width: 30%;
}
#leftkey::before { border-right: 5px solid transparent; bottom: 40%; left: 25%; }
#rightkey::before { bottom: 20%; left: 5%; }
#leftkey::after, #rightkey::after {
	background-color: #FFF;
	border-radius: 15%;
	content: "";
	height: 50%;
	position: absolute;
		bottom: 15%;
		left: 30%;
	transform: rotate(-45deg);
	width: 70%;
}
#leftkey::after { bottom: 25%; left: 40%; }
#rightkey::after { bottom: 5%; left: 20%; }
.lock { background-color: #006699; border-radius: 100%; height: 15%; position: absolute; transform: rotate(-45deg); width: 15%; z-index: 1; }
.lock:after { background-color: inherit; content: ""; height: 90%; position: absolute; left: 32%; top: 90%; width: 40%; }
#leftkey .lock { left: 60%; top: 40%; }
#rightkey .lock { left: 40%; top: 60%; }
/* BOAT */
.boat, .boat::before, .boat::after { height: 0; width: 0; }
.boat { border-left: 11px solid transparent; border-right: 10px solid transparent; border-top: 5px solid #666; display: inline-block; }
.boat::before, .boat::after { content: ""; display: block; position: relative; }
.boat::before { border-bottom: 12px solid #666; border-left: 7px solid transparent; border-right: 0px solid transparent; right: 8px; top: -19px; }
.boat::after { border-bottom: 15px solid #666; border-left: 0px solid transparent; border-right: 7px solid transparent; bottom: 34px; }
/* MOBILE */
@media (max-width: 499px) { h1 { display: none; } }