/* font details for all boxes */
.name {
    font-size: small;
    font-weight: bolder;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:70px;
}

.name_small {
    font-size: x-small;
    font-weight: bolder;
    margin-top:5px;
    margin-bottom:3px;
    margin-left:5px;
}

.name_spouse {
    font-size: normal;
    font-weight: normal;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:110px;
}

.name_child {
    font-size: normal;
    font-weight: normal;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:140px;
}

.place {
    font-size: xx-small;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:70px;
}

.place_small {
    font-size: xx-small;
    margin-top:2px;
    margin-bottom:5px;
    margin-left:5px;
}



/* box details */

.male {
    background: #B2D1FF;
}

.female {
    background: #FFD1F0;
}

.root {    
    position: absolute;
    width: 270px; 
    height: 70px; 
    left: 10px; 
    top: 170px;
    border: solid;
}

.ancestors {
    position: absolute;
    width: 270px; 
    height: 70px; 
    border: solid;
}

.ancestors_small {
    position: absolute;
    width: 200px; 
    height: 40px; 
    border: solid;
}

.father {    
    left: 130px; 
    top: 65px;
}

.mother {    
    left: 130px; 
    top: 275px;
}

.p_grandfather {    
    left: 430px; 
    top: 20px;
}

.p_grandmother {    
    left: 430px; 
    top: 115px;
}

.m_grandfather {    
    left: 430px; 
    top: 230px;
}

.m_grandmother {    
    left: 430px; 
    top: 325px;
}

.p_p_grandfather {    
    left: 730px; 
    top: 10px;
}

.p_p_grandmother {    
    left: 730px; 
    top: 58px;
}

.p_m_grandfather {    
    left: 730px; 
    top: 106px;
}

.p_m_grandmother {    
    left: 730px; 
    top: 154px;
}

.m_p_grandfather {    
    left: 730px; 
    top: 220px;
}

.m_p_grandmother {    
    left: 730px; 
    top: 268px;
}

.m_m_grandfather {    
    left: 730px; 
    top: 316px;
}

.m_m_grandmother {    
    left: 730px; 
    top: 364px;
}

.pictures {
    position: absolute;
    left: 0px; 
    top: 0px;
    width: 56px; 
    height: 70px; 
    border-syle: none;
    margin: 0px;
}

.pictures_spouse {
    position: absolute;
    left: 60px;
    width: 56px; 
    height: 70px; 
    border-syle: none;
    margin: 0px;
}

.pictures_child {
    position: absolute;
    left: 90px;
    width: 56px; 
    height: 70px; 
    border-syle: none;
    margin: 0px;
}

/* draws all the lines between boxes */

hr.all {
    position: absolute;
    text-align: left;
    margin: 0px;
    padding: 0px;
    color: black;
    background-color: black;
    border: 0px;
    noshade: noshade;
}

hr.from_root_up {
    left: 78px; 
    top: 100px;
    width: 2px;
    height: 70px;
}

hr.from_root_down {
    left: 78px; 
    top: 245px;
    width: 2px;
    height: 67px;
}

hr.to_father {
    left: 80px; 
    top: 100px;
    width: 50px;
    height: 2px;
}

hr.to_mother {
    left: 80px; 
    top: 310px;
    width: 50px;
    height: 2px;
}

hr.from_father {
    left: 400px; 
    top: 100px;
    width: 15px;
    height: 2px;
}

hr.from_mother {
    left: 400px; 
    top: 310px;
    width: 15px;
    height: 2px;
}

hr.to_p_grandfather {
    left: 415px; 
    top: 55px;
    width: 15px;
    height: 2px;
}

hr.to_p_grandmother {
    left: 415px; 
    top: 150px;
    width: 15px;
    height: 2px;
}

hr.to_m_grandfather {
    left: 415px; 
    top: 265px;
    width: 15px;
    height: 2px;
}

hr.to_m_grandmother {
    left: 415px; 
    top: 360px;
    width: 15px;
    height: 2px;
}

hr.p_grandparents_up {
    left: 415px; 
    top: 55px;
    width: 2px;
    height: 95px;
}

hr.m_grandparents_up {
    left: 415px; 
    top: 265px;
    width: 2px;
    height: 95px;
}

hr.from_p_grandfather {
    left: 700px; 
    top: 55px;
    width: 15px;
    height: 2px;
}

hr.from_p_grandmother {
    left: 700px; 
    top: 150px;
    width: 15px;
    height: 2px;
}

hr.from_m_grandfather {
    left: 700px; 
    top: 265px;
    width: 15px;
    height: 2px;
}

hr.from_m_grandmother {
    left: 700px; 
    top: 360px;
    width: 15px;
    height: 2px;
}

hr.to_p_p_grandfather {
    left: 715px; 
    top: 30px;
    width: 15px;
    height: 2px;
}

hr.to_p_p_grandmother {
    left: 715px; 
    top: 78px;
    width: 15px;
    height: 2px;
}

hr.to_p_m_grandfather {
    left: 715px; 
    top: 126px;
    width: 15px;
    height: 2px;
}

hr.to_p_m_grandmother {
    left: 715px; 
    top: 174px;
    width: 15px;
    height: 2px;
}

hr.to_m_p_grandfather {
    left: 715px; 
    top: 240px;
    width: 15px;
    height: 2px;
}

hr.to_m_p_grandmother {
    left: 715px; 
    top: 288px;
    width: 15px;
    height: 2px;
}

hr.to_m_m_grandfather {
    left: 715px; 
    top: 336px;
    width: 15px;
    height: 2px;
}

hr.to_m_m_grandmother {
    left: 715px; 
    top: 384px;
    width: 15px;
    height: 2px;
}

hr.p_p_grandparents_up {
    left: 715px; 
    top: 30px;
    width: 2px;
    height: 48px;
}

hr.p_m_grandparents_up {
    left: 715px; 
    top: 126px;
    width: 2px;
    height: 48px;
}

hr.m_p_grandparents_up {
    left: 715px; 
    top: 240px;
    width: 2px;
    height: 48px;
}

hr.m_m_grandparents_up {
    left: 715px; 
    top: 336px;
    width: 2px;
    height: 48px;
}