.body {font-size:100%; background: Cornsilk;}
div.h2 {font-size:1.3em;
font-weight:bold;
text-align:center; 
}
.desc {
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:3px;
border-style:solid;
border-color:green;
background: White;
}


div.kidw
{
width:300px;
padding:5px;
border:3px;
border-style:solid;
border-color:lime;
background: white;
margin-bottom:3px;
}

/* son-daughter 1 */
    
div.son
{
width:300px;
padding:5px;
border:3px;
border-style:solid;
border-color:DeepSkyBlue;
margin-left:150px;
margin-bottom:3px;
background: White;
}
    
div.sonw
{
width:300px;
padding:5px;
border:3px;
border-style:solid;
border-color:LightPink;
margin-top:-3px;
margin-left:150px;
margin-bottom:3px;
background: white;
}

    
div.daughter
{
width:300px;
padding:5px;
border:3px;
border-style:solid;
border-color:DeepPink;
margin-left:150px;
margin-bottom:3px;
background: white;
}
div.daughterh
{
width:300px;
padding:5px;
border:3px;
border-style:solid;
border-color:Turquoise;
margin-top:-3px;
margin-left:150px;
margin-bottom:3px;
background: white;
}


/* son-daughter 2 */

.grandson
{
width:300px;
padding:5px;
border: 3px;
border-style:solid;
border-color:DeepSkyBlue;
margin-left:250px;
margin-bottom:3px;
background: White;
}
.grandsonw
{
width:300px;
padding:5px;
border: 3px;
border-style:solid;
border-color:HotPink;
margin-top:-3px;
margin-left:250px;
margin-bottom:3px;
background: White;
}

.granddaughter
{
width:300px;
padding:5px;
border: 3px;
border-style:solid;
border-color:DeepPink;
margin-left:250px;
margin-bottom:3px;
background: White;
}
.granddaughterh
{
width:300px;
padding:5px;
border: 3px;
border-style:solid;
border-color:Turquoise;
margin-top:-3px;
margin-left:250px;
margin-bottom:3px;
background: White;
}

/* Son-Daughter 3 */

.greatgrandson
{
width:300px;
padding:5px;
border:3px;
border-style:solid;
border-color:DeepSkyBlue;
margin-left:350px;
margin-bottom:3px;
background: White;
}

.greatgrandsonw
{
width:300px;
padding:5px;
border:3px;
border-style:solid;
border-color:DeepSkyBlue;
margin-left:350px;
margin-bottom:3px;
background: White;
}

.greatgranddaughter
{
width:300px;
padding:5px;
border:3px;
border-style:solid;
border-color:DeepPink;
margin-left:350px;
margin-bottom:3px;
background: White;
}

.greatgranddaughterh
{
width:300px;
padding:5px;
border:3px;
border-style:solid;
border-color:Turquoise;
margin-top:-3px;
margin-left:350px;
margin-bottom:3px;
background: White;
}

/* Son-Daughter 4 */

.greatgreatgrandson
{
width:300px;
padding:5px;
border:3px;
border-style:solid;
border-color:DeepSkyBlue;
margin-left:450px;
margin-bottom:3px;
background: White;

}

.greatgreatgranddaughter
{
width:300px;
padding:5px;
border:3px;
border-style:solid;
border-color:DeepPink;
margin-left:450px;
margin-bottom:3px;
background: White;
}


.s {font-size:0.8em; }
.n {font-weight:bold; }

/* for image in box */
div.heading{
font-size: 13pt;
font-weight: bold;
}
img.desc_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;
}