.body {font-size:100%; background: Cornsilk;}
div.h2 {font-size:1.3em;
font-weight:bold;
text-align:center; 
}
.tree {
font-size:1em;
font-family:arial, helvetica;
background: Cornsilk;
/*position: absolute; /* we want to set an absolute position so the div can be moved in reference to the screen */
padding:10px;
top: 10px; 
left: 10px; 
/*z-index: 5; /* this will position it above anything with a lower z-index, sort of like layers. So you could layer these divs using z-index and have them stack on each other. */
}

div.kid
{
width:300px;
padding:5px;
border:2px solid gray;
border-style:solid;
border-color:green;
background: #FFffff;
}
div.dad
{
width:300px;
padding:5px;
border:2px solid gray;
border-style:solid;
border-color:DeepSkyBlue;
margin-left:160px;
background: #FFffff;
}
div.mom
{
width:300px;
padding:5px;
border:2px solid gray;
border-style:solid;
border-color:DeepPink;
margin-left:160px;
background: #FFffff;
}

.gpaln
{
width:10px;
padding:0px;
border:2px;
border-style:solid;
border-color:Cornsilk;
border-left:2px solid SkyBlue;
margin-left:200px;
background: Cornsilk;
}
.gpano
{
width:10px;
padding:0px;
border: 2px;
border-style:solid;
border-color:Cornsilk;
margin-left:200px;
background: Cornsilk;
}
.gpa
{
width:300px;
padding:5px;
border:2px solid gray;
border-style:solid;
border-color:DeepSkyBlue;
margin-left:100px;
margin-top:0px;
margin-bottom:0px;
background: #FFffff;
}

.gmaln
{
width:10px;
padding:0px;
border:2px solid gray;
border-style:solid;
border-color:Cornsilk;
border-left:2px solid DeepPink;
margin-left:200px;
background: Cornsilk;
}
.gmano
{
width:10px;
padding:0px;
border: 2px;
border-style:solid;
border-color:Cornsilk;
margin-left:200px;
background: Cornsilk;
}
.gma 
{
width:300px;
padding:5px; 
border:2px solid gray;
border-style:solid;
border-color:DeepPink;
margin-left:100px;
margin-top:0px;
margin-bottom:10px;
background: #FFffff;
}

.ggpaln1
{
width:10px;
padding:0px;
border: 2px;
border-style:solid;
border-color:Cornsilk;
border-left:2px solid DeepSkyBlue;
margin-left:200px;
background: Cornsilk;
}

.ggpaln2
{
width:10px;
padding:0px;
border: 2px;
border-style:solid;
border-color:Cornsilk;
border-left:2px solid DeepSkyBlue;
margin-left:200px;
background: Cornsilk;
}
.ggpano1
{
width:10px;
padding:0px;
border: 2px;
border-style:solid;
border-color:Cornsilk;
margin-left:200px;
background: Cornsilk;
}

.ggpano2
{
width:10px;
padding:0px;
border: 2px;
border-style:solid;
border-color:Cornsilk;
margin-left:200px;
background: Cornsilk;
}
.ggpa
{
width:300px;
padding:5px;
margin-top:10px;
margin-bottom:10px;
border:2px solid Cornsilk;
border-style:solid;
border-color:DeepSkyBlue;
margin-left:150px;
background: #FFffff;
}


.ggmaln1
{
width:10px;
padding:0px;
border: 2px;
border-style:solid;
border-color:Cornsilk;
border-left:2px solid DeepPink;
margin-left:200px;
background: Cornsilk;
}
.ggmaln2
{
width:10px;
padding:0px;
border: 2px;
border-style:solid;
border-color:Cornsilk;
border-left:2px solid DeepPink;
margin-left:200px;
background: Cornsilk;
}
.ggma
{
width:300px;
padding:5px;
border:2px solid gray;
border-style:solid;
border-color:DeepPink;
margin-left:150px;
margin-top:10px;
margin-bottom:10px;
background: #FFffff;
}
.s {font-size:0.8em; }
.n {font-weight:bold; }

/* for image in box */
div.heading{
font-size: 13pt;
font-weight: bold;
}
img.tree_img{
float: left;
/*padding-right:5px;*/
}
#clear{
margin-top: 20px;
margin-bottom: 20px;
clear: both;
}

/* for rollover box */
div.box {
background-color: #F4F4F4;
border: 2px solid #CCC;
height: 200px;
width: 300px;
padding: 5px;
display:none;
position:absolute;
}