* {
		margin:0;
      padding:0;
      box-sizing:border-box;
}

html, body {
    margin: 0;
    padding: 0;
    border: none;
    height: 100%;
    background-color:white;
}

body
{
	margin: 0px;
	padding: 0px;
	font-family: Arial, Verdana, sans-serif;
	font-size: 14px;
   font-weight: normal;
	background-position:center 0px;
	text-align: left;
}

a
{
   color: #77472D;
	font-family: Arial, Verdana, sans-serif;
   font-size:14px;
   font-weight:bold;
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

.family-banner
{
	width:100%;
   height:50px;
	background-color: #71CEAC;
}

.banner-text
{
   padding:10px;
   font-size:24px;
   font-weight:bold;
   font-family: Arial, Verdana, san-serif;
   color:#63636B;
   text-align:center;
   text-shadow: 1px 1px #CCCCCC;
}

.home-header-text
{
   padding:10px;
   font-size:24px;
   font-weight:bold;
   font-family: Arial, Verdana, san-serif;
   color:#63636B;
   text-align:left;
   text-shadow: 1px 1px #CCCCCC;
   display:inline-block;
}

.header-family-tree-block
{
	float:left;
	width:70%;
   vertical-align:top;
   display:inline-block;
}

.webpage-header-text
{
   padding:11px;
   width:100%;
   font-size:24px;
   font-weight:bold;
   font-family: Arial, Verdana, san-serif;
   color:#63636B;
   text-align:left;
   text-shadow: 1px 1px #CCCCCC;
   display:inline-block;
}

.tree-text
{
	margin:0px;
   padding:5px;
   font-size:16px;
   font-weight:bold;
   font-family: Arial, Verdana, san-serif;
   color:#63636B;
   text-align:center;
   display:inline-block;
}

.back-one-level
{
	float:left;
   position:absolute;
   top:0px;
   left:0px;
}

.back-button
{
   margin:10px 0px 0px 10px;
   width:100px;
   height:32px;
   border-radius:10px;
	background-color: #63636D;
   cursor:pointer;
   display:inline-block;
}

.back-button:hover
{
	background-color: #83838D;
}

.back-button-text
{
	padding:4px;
	width:100%;
   font-size:20px;
   font-weight:bold;
   color:#FFFFFF;
   text-align:center;
}

.body-block
{
	margin:0px auto;
   text-align:center;
	width:100%;
   overflow:auto;
}

.home-body-block
{
	margin:40px auto;
   text-align:center;
	width:100%;
   min-height:350px;
}

.home-button
{
	margin:10px;
	width:314px;
   height:314px;
   border-radius:10px;
   border: solid 1px #CCCCCC;
   background-color:#C2B280;
   cursor:pointer;
   display:inline-block;
   vertical-align:top;
}

.home-button:hover
{
   background-color:#B2A270;
}


.home-button-text
{
   width: 100%;
   font-size: 24px;
   font-weight: bold;
   color:#63636B;
   text-shadow: 1px 1px #CCCCCC;
   text-align: center;
}

.select-radio
{
	margin-top:1px;
	width:14px;
   height:14px;
   display:inline-block;
}

.select-percentage
{
	width:60px;
   height:24px;
   background-color:#77472D;
   color:white;
   border-radius:5px;
   display:inline-block;
}

.family-tree-image
{
	margin:10px;
	width: 310px;
   height: 320px;
	background-image: url(../images/family-tree.png);
	background-repeat:no-repeat;
   background-size:contain;
   display:inline-block;
}

.census-image
{
	margin:10px;
	width: 320px;
   height: 320px;
	background-image: url(../images/census-image.png);
	background-repeat:no-repeat;
   background-size:contain;
   display:inline-block;
}

.family-silhouette
{
	margin:20px 0px;
	width: 256px;
   height: 236px;
	background-image: url(../images/family.png);
	background-repeat:no-repeat;
   background-size:contain;
   display:inline-block;
}

.stories-image
{
	margin:62px 0px;
	width: 288px;
   height: 149px;
	background-image: url(../images/stories.png);
	background-repeat:no-repeat;
   background-size:contain;
   display:inline-block;
}

.logo-block
{
   margin:3px;
   display:inline-block;
}

.family-tree-logo
{
   margin-left:0px;
	width: 62px;
   height: 64px;
	background-image: url(../images/family-tree-logo.png);
	background-repeat:no-repeat;
   background-size:contain;
   display:inline-block;
}

.logo-caption
{
	margin-top:10px;
   width:60px;
   font-size:14px;
   font-weight:bold;
   font-family: Arial, Verdana, san-serif;
   color:#63636B;
   text-align:center;
   text-shadow: 1px 1px #CCCCCC;
   vertical-align:top;
   display:inline-block;
}

.header-logo
{
	float:left;
   margin:1px;
	width: 46.5px;
   height: 48px;
	background-image: url(../images/family-tree-logo.png);
	background-repeat:no-repeat;
   background-size:contain;
   display:inline-block;
}

.datasonics-logo
{
	float:right;
   margin:6px 10px;
	width: 80px;
   height: 60px;
	background-image: url(../images/datasonicslogoanimatedsmall.gif);
	background-repeat:no-repeat;
   background-size:contain;
   display:inline-block;
}

.person:hover
{
   background-color:#DDDDAA;
}

.person-selected
{
   background-color: #87CEFA;
}

.person-block
{
	width:590px;
   height:553px;
   display:inline-block;
}

.person-field
{
	width:100%;
	font-size:14px;
   font-weight:bold;
   color: #63636D;
   text-align:center;
}

.person-input
{
   padding:2px;
	width:100%;
	font-size:13px;
   font-weight:normal;
   color: #000000;
}

.person-select
{
   padding:2px;
	width:100%;
	font-size:13px;
   font-weight:normal;
   color: #000000;
}

.person-name-block
{
   padding:5px 10px;
	width:190px;
   display:inline-block;
}

.date-block
{
	position:relative;
   padding:5px 10px;
	width:132px;
   display:inline-block;
}

.date-input
{
   padding:2px;
	width:100%;
	font-size:13px;
   font-weight:normal;
   color: #000000;
}

.calendar-icon
{
	position:absolute;
   left:115px;
   top:20px;
	width: 22px;
   height: 22px;
	background-image: url(../images/calendar-icon.png);
	background-repeat:no-repeat;
   display:inline-block;
}

.event-type-block
{
   padding:5px 10px;
	width:120px;
   display:inline-block;
}

.gender-block
{
   padding:5px 10px;
	width:120px;
   display:inline-block;
}

.place-block
{
   padding:5px 10px;
	width:300px;
   display:inline-block;
}

.page-name-block
{
   padding:5px 10px;
	width:430px;
   display:inline-block;
}

.portrait-block
{
   padding:5px 10px;
	width:120px;
   display:inline-block;
}

.portrait-column
{
	width:450px;
   vertical-align:top;
   display:inline-block;
}

.occupation-block
{
   padding:5px 10px;
	width:100%;
   display:inline-block;
}

.notes-input
{
   padding:2px;
	width:100%;
   height:76px;
   font-size:13px;
   font-weight:normal;
   font-family: Arial, Verdana, san-serif;
   color:black;
   display:inline-block;
}

.parent-block
{
   padding:5px 10px;
	width:285px;
   display:inline-block;
}

.position-left
{
	float:left;
   margin-left:20px;
}

.position-right
{
	float:right;
   margin-right:20px;
}

.family-button
{
   margin:0px 20px;
   width:200px;
   height:32px;
   border-radius:10px;
	background-color: #77472D;
   cursor:pointer;
   display:inline-block;
}

.family-button:hover
{
	background-color: #97674D;
}

.family-button-text
{
	padding:4px;
	width:100%;
   font-size:20px;
   font-weight:bold;
   color:#FFFFFF;
   text-align:center;
}

.popup-button
{
   margin:0px 10px;
	padding:3px;
   width:100px;
   height:22px;
   font-size:14px;
   font-weight:bold;
   color:#FFFFFF;
   text-align:center;
   border-radius:10px;
	background-color: #77472D;
   cursor:pointer;
   display:inline-block;
}

.popup-button:hover
{
	background-color: #97674D;
}

.family-table-div
{
   float:left;
	width:100%;
   height:341px;
   overflow:auto;
}

.family-table
{
   margin:0px;
   border-collapse:collapse;
   text-align:center;
   font-size: 14px;
   display:inline-block;
}

.family-table th
{
   border:solid 1px #CCCCCC;
   color: #FFFFFF;
   font-weight:bold;
   background-color:#77472D;
   height:20px;
}

.family-table td
{
	padding:0px 3px;
   border:solid 1px #CCCCCC;
   color: #000000;
   font-weight:normal;
   height:20px;
}

.button
{
   margin-top:0px;
   width:100px;
   height:22px;
   border-radius:10px;
	background-color: #0000CD;
   cursor:pointer;
}

.button:hover
{
	background-color: #0000EF;
}

.button-text
{
	margin-top:3px;
	width:100%;
   font-size:14px;
   font-weight:normal;
   color:#FFFFFF;
   text-align:center;
}

.photo-block
{
   padding:5px 10px;
	width:415px;
   vertical-align:top;
   display:inline-block;
}

.photo-table-div
{
   float:left;
   margin-top:0px;
	width:100%;
   height:100px;
   overflow:auto;
}

.photo-table
{
   float:left;
   margin-top:5px;
   margin-bottom:0px;
   margin-left:0px;
   border-collapse:collapse;
   text-align:center;
   font-size: 14px;
}

.photo-table th
{
   border:solid 1px #CCCCCC;
   color: #FFFFFF;
   font-weight:bold;
   background-color:#0000CD;
   height:20px;
}

.photo-table td
{
   border:solid 1px #CCCCCC;
   color: #000000;
   font-weight:normal;
   height:20px;
}

.census-list-block
{
   float:left;
   margin-top:10px;
   margin-bottom:0px;
   margin-left:10px;
	width:380px;
}

.census-table-div
{
   float:left;
	width:100%;
   height:360px;
   overflow:auto;
}

.census:hover
{
   background-color:#DDDDAA;
}

.census-selected
{
   background-color: #87CEFA;
}

.census-block
{
	margin-top:10px;
	margin-left:10px;
	width:590px;
   display:inline-block;
}

.census-place-block
{
   padding:5px 10px;
	width:420px;
   display:inline-block;
}

.resident-occupation-block
{
   padding:5px 10px;
	width:284px;
   display:inline-block;
}

.census-resident-div
{
   float:left;
	width:100%;
   height:300px;
   overflow:auto;
}

.resident-row
{
	width:100%;
   padding:3px 0px;
}

.person-male
{
	float:left;
   width:450px;
   height:165px;
   color: #63636B;
	font-family: Arial, Verdana, sans-serif;
   font-size:14px;
   font-weight:bold;
	background-image: linear-gradient(lightskyblue, white);
	border-radius:10px;
	border: solid 1px #63636B;
}

.person-male:hover
{
	border: solid 2px #000000;
}

.person-female
{
	float:left;
   width:450px;
   height:165px;
   color: #63636B;
	font-family: Arial, Verdana, sans-serif;
   font-size:14px;
   font-weight:bold;
	background-image: linear-gradient(pink, white);
	border-radius:10px;
	border: solid 1px #63636B;
}

.person-female:hover
{
	border: solid 2px #000000;
}

.person-header
{
   width:100%;
   height:20px;
   background-color:#63636B;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
   color: white;
	font-family: Arial, Verdana, sans-serif;
   font-size:16px;
   font-weight:bold;
   text-align:center;
}

.person-male-small
{
	float:left;
   width:210px;
   height:90px;
   color: #63636B;
	font-family: Arial, Verdana, sans-serif;
   font-size:14px;
   font-weight:bold;
	background-image: linear-gradient(lightskyblue, white);
	border-radius:10px;
	border: solid 1px #63636B;
}

.person-male-small:hover
{
	border: solid 2px #000000;
}

.person-female-small
{
	float:left;
   width:210px;
   height:90px;
   color: #63636B;
	font-family: Arial, Verdana, sans-serif;
   font-size:14px;
   font-weight:bold;
	background-image: linear-gradient(pink, white);
	border-radius:10px;
	border: solid 1px #63636B;
}

.person-female-small:hover
{
	border: solid 2px #000000;
}

.person-small-header
{
   width:100%;
   height:17px;
   background-color:#63636B;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
   color: white;
	font-family: Arial, Verdana, sans-serif;
   font-size:13px;
   font-weight:bold;
   text-align:center;
}

.person-button
{
	float:left;
   margin:0px 4px;
   width:56px;
   height:56px;
   border-radius:5px;
	border: solid 1px #63636B;
	background-image: linear-gradient(lightgrey, white);
   cursor:pointer;
}

.person-button:hover
{
	background-image: linear-gradient(silver, white);
}

.small-person-button
{
	float:left;
   margin:0px 2px;
   width:24px;
   height:24px;
   border-radius:2px;
	border: solid 1px #63636B;
	background-image: linear-gradient(lightgrey, white);
   cursor:pointer;
}

.small-person-button:hover
{
	background-image: linear-gradient(silver, white);
}

.parent-row
{
	margin:0 auto;
	padding:10px 0px 0px 10px;
	width:1006px;
   height:110px;
}

.person-row
{
	margin:0 auto;
	padding-left:10px;
	width:1006px;
   height:175px;
}

.child-row
{
	margin:0 auto;
	padding:0px 10px;
	width:100%;
   min-height:102px;
}

.child-column
{
	float:left;
   width:210px;
   height:100%;
}

.person-inner
{
	padding:10px;
   width:100%;
   height:145px;
}

.person-details
{
	width:320px;
   height:100%;
   display:inline-block;
}

.person-small-inner
{
	padding:8px;
   width:100%;
   height:72px;
}

.person-small-details
{
	width:144px;
   height:100%;
   display:inline-block;
}

.details-row
{
	margin:10px 0px;
   width:100%;
   font-size:16px;
   font-weight:bold;
   font-family: Arial, Verdana, san-serif;
   color:#63636B;
   text-align:center;
   display:inline-block;
}

.small-details-row
{
	margin:1px 0px;
   width:100%;
   font-size:13px;
   font-weight:bold;
   font-family: Arial, Verdana, san-serif;
   color:#63636B;
   text-align:center;
   display:inline-block;
}

.marriage-year
{
   margin-top:30px;
   width:100%;
   font-size:16px;
   font-weight:bold;
   font-family: Arial, Verdana, san-serif;
   color:#63636B;
   text-align:center;
   display:inline-block;
}

.portrait-image
{
	width:102px;
	height:127px;
   background-color:#FFFFFF;
   border: solid 1px #767676;
   display:inline-block;
}

.small-portrait-image
{
	width:42px;
	height:52px;
   background-color:#FFFFFF;
   border: solid 1px #767676;
   display:inline-block;
}

.icon-button
{
   width:30px;
   height:23px;
   border-top: solid 1px white;
   border-left: solid 1px white;
   border-right: solid 1px #696969;
   border-bottom: solid 1px #696969;
   vertical-align:top;
   display:inline-block;
}

.icon-button:hover
{
	background-image: linear-gradient(silver, white);
}

.icon-button-selected
{
   border-top: solid 1px #A0A0A0;
   border-left: solid 1px #A0A0A0;
   border-right: solid 1px #E3E3E3;
   border-bottom: solid 1px #E3E3E3;
   border-width:2px;
}

.icon-inner
{
   width:28px;
   height:21px;
	background-image: linear-gradient(lightgrey, white);
   border-top: solid 1px #E7E7E7;
   border-left: solid 1px #E7E7E7;
   border-right: solid 1px #A0A0A0;
   border-bottom: solid 1px #A0A0A0;
}

.mode-button
{
	float:left;
   margin:10px 0px 10px 5px;
   width:32px;
   height:32px;
   border-top: solid 1px white;
   border-left: solid 1px white;
   border-right: solid 1px #696969;
   border-bottom: solid 1px #696969;
   vertical-align:top;
   display:inline-block;
}

.mode-button:hover
{
	background-image: linear-gradient(silver, white);
}

.mode-button-selected
{
   border-top: solid 1px #A0A0A0;
   border-left: solid 1px #A0A0A0;
   border-right: solid 1px #E3E3E3;
   border-bottom: solid 1px #E3E3E3;
   border-width:2px;
}

.mode-inner
{
   width:30px;
   height:30px;
	background-image: linear-gradient(lightgrey, white);
   border-top: solid 1px #E7E7E7;
   border-left: solid 1px #E7E7E7;
   border-right: solid 1px #A0A0A0;
   border-bottom: solid 1px #A0A0A0;
}

.account-button
{
	margin:7px 5px;
   width:36px;
   height:36px;
	border-radius:18px;
   border: solid 1px #696969;
	background-image: linear-gradient(silver, white);
}

.account-text
{
	margin-top:9px;
	width:100%;
   font-size:14px;
   font-weight:normal;
   color:#222222;
   text-align:center;
}

.login-button
{
	margin:7px 5px;
   width:54px;
   height:36px;
	border-radius:18px;
   border: solid 1px #696969;
	background-image: linear-gradient(silver, white);
}

.birth-image
{
	width: 48px;
   height: 37px;
	background-image: url(../images/birth.png);
	background-repeat:no-repeat;
   background-size:contain;
   display:inline-block;
}

.baptism-image
{
	width: 36px;
   height: 48px;
	background-image: url(../images/baptism-font.png);
	background-repeat:no-repeat;
   background-size:contain;
   display:inline-block;
}

.death-image
{
   text-align:center;
	width: 39px;
   height: 48px;
	background-image: url(../images/tombstone.png);
	background-repeat:no-repeat;
   background-size:contain;
   display:inline-block;
}

.rings-image
{
   text-align:center;
	width: 48px;
   height: 44px;
	background-image: url(../images/wedding-rings.png);
	background-repeat:no-repeat;
   background-size:contain;
   display:inline-block;
}

.couple-image
{
   text-align:center;
	width: 41px;
   height: 52px;
	background-image: url(../images/marriage.png);
	background-repeat:no-repeat;
   background-size:contain;
   display:inline-block;
}

.notes-image
{
   text-align:center;
	width: 45px;
   height: 48px;
	background-image: url(../images/notes.png);
	background-repeat:no-repeat;
   background-size:contain;
   display:inline-block;
}

.male-head
{
	margin:auto;
   text-align:center;
	width: 100%;
   height: 100%;
	background-image: url(../images/male-head.png);
	background-repeat:no-repeat;
   background-size:contain;
   display:inline-block;
}

.male-silhouette
{
   text-align:center;
	width: 100%;
   height: 100%;
	background-image: url(../images/male-silhouette.png);
	background-repeat:no-repeat;
   background-size:contain;
   display:inline-block;
}

.female-silhouette
{
   text-align:center;
	width: 100%;
   height: 100%;
	background-image: url(../images/female-silhouette.png);
	background-repeat:no-repeat;
   background-size:contain;
   display:inline-block;
}

.parent-joiner
{
	float:left;
	width: 30px;
   height: 100px;
	background-image: url(../images/parent-joiner.png);
	background-repeat:no-repeat;
   display:inline-block;
}

.marriage-joiner
{
	float:left;
	width: 80px;
   height: 175px;
	background-image: url(../images/marriage-joiner.png);
	background-repeat:no-repeat;
   background-size:contain;
   display:inline-block;
}

.marriage-border
{
	position:relative;
   top:56px;
   left:0px;
   width:16px;
   height:16px;
   border:solid 2px #000000;
   display:inline-block;
}

.child-joiner
{
	float:left;
	width: 210px;
   height: 10px;
	background-image: url(../images/child-joiner.png);
	background-repeat:no-repeat;
   display:inline-block;
}

.right-child-joiner
{
	float:left;
	width: 210px;
   height: 10px;
	background-image: url(../images/right-child-joiner.png);
	background-repeat:no-repeat;
   display:inline-block;
}

.left-child-joiner
{
	float:left;
	width: 210px;
   height: 10px;
	background-image: url(../images/left-child-joiner.png);
	background-repeat:no-repeat;
   display:inline-block;
}

.one-child-joiner
{
	float:left;
	width: 210px;
   height: 10px;
	background-image: url(../images/one-child-joiner.png);
	background-repeat:no-repeat;
   display:inline-block;
}

.gap-joiner
{
	float:left;
	width: 30px;
   height: 80px;
	border-top:solid 1px #63636D;
   display:inline-block;
}

.reveal-modal-bg {
	position: fixed;
	height: 100%;
	width: 100%;
	background: rgba(218,218,218,.8);
	z-index: 100;
	display: none;
	top: 0;
	left: 0;
}


.imagefile
{
   position:absolute;
   left:-1000px;
}

.evimagefile
{
   position:absolute;
   left:-1000px;
}

.content-block
{
   padding:5px;
   width:100%;
   font-family: Arial, Verdana, san-serif;
   font-size:14px;
   font-weight:normal;
   display:inline-block;
}

.content-block H1
{
    margin-top: 20px;
    margin-bottom: 5px;
    width: 100%;
    font-family: Verdana, Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #77472D;
    text-align: center;
    text-shadow: 3px 3px 2px #CCCCCC;
    display: inline-block;
}

.content-block H2
{
	float: left;
   width:100%;
   margin-left:0px;
   margin-top:20px;
   margin-bottom:0px;
	font-family: Verdana, Arial, sans-serif;
   font-size:16px;
   font-weight:bold;
	color:#63636D;
	text-align:left;
}

.content-block H3
{
	float: left;
   width:100%;
   margin-left:0px;
   margin-top:10px;
   margin-bottom:0px;
	font-family: Verdana, Arial, sans-serif;
   font-size:14px;
   font-weight:bold;
	color:#666666;
	text-align:left;
}

.content-block p
{
	float: left;
   padding:5px 0px;
   margin-left:0px;
   margin-top:5px;
   margin-bottom:0px;
   width:100%;
	font-family: Verdana, Arial, sans-serif;
   font-size:14px;
   font-weight:normal;
	color:#000000;
	text-align:left;
}

.content-block a
{
	font-family: Verdana, Arial, sans-serif;
   font-size:14px;
   font-weight:normal;
	color:#0000FF;
	text-align:left;
   text-decoration:underline;
}

.content-block a:hover
{
   text-decoration:underline;
}

.content-block ul
{
	float: left;
   margin-left:0px;
   margin-top:5px;
   margin-bottom:0px;
   width:100%;
	font-family: Verdana, Arial, sans-serif;
   font-size:14px;
   font-weight:normal;
	color:#000000;
	text-align:left;
   list-style-type: circle;
}

.content-block li
{
   margin-left:25px;
   list-style-type: circle;
}

@media only screen and (max-width : 320px)
{
	.home-header-text
	{
		padding:16px 12px;
   	font-size:16px;
   }

	.webpage-header-text
	{
   	padding:13px 11px;
   	font-size:18px;
   }

   .tree-text
	{
   	font-size:14px;
	}

	.content-block H1
	{
    	font-size: 20px;
   }
}