body {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 16px;
    background-color: #333333;
    color: white;
    margin: 0;
    padding: 0;
}

div.header {
    width: 4000px;
    height: 50px;
    background-color: black;
    border-bottom: 1px solid #858585;
}

        div.logo {
            vertical-align: middle;
            font-size: 26px !important;
            font-weight: 600;
            height: 50px;
            padding-top: 10px;
            padding-left: 10px;
        }


div.main {
    text-align: center;
    width: auto;
}


p {
    padding: 0px;
    margin: 0px;
}


div.generace {
    border: 0px solid red;
    min-width: 10px;
    margin: 0 auto 0 auto;
    padding: 10px;
    background-color: rgba(255,255,255,0.1);
    text-align: center;

}

div.family {
    color: black;
    width: auto;
    border-radius: 15px;
}

table.alltable {
    border-spacing: 0px;
    border: 0px;
}

table.alltable td {
    vertical-align: top;
    border-spacing: 0px;
    border: 0px;
}

table.alltable td.linka {
    vertical-align: top;
    min-width: 40px;
    border-spacing: 0px;
    border: 0px;

}

    div.linka {
        width: 7px;
        opacity: 0.4;
        position: relative;
        margin: 5px;
        border-radius: 5px;
    }

table.person {
    margin: 3px;
    border-spacing: 0px;
}

table.person td {
    border: 0px solid green;
    background-color: transparent;
    margin: 0px;
    text-align: left;
    border-spacing: 0px;
}

div.pborder {

    width: 290px;
    height: 80px;
    margin: 4px;

}

div.person {
    border: 0px solid green;
    border-radius: 0px;
    width: 250px;
    height: 70px;
    text-align: left;
    background-color: white;
    display: inline-block;
    margin: 0px;
}

div.left {
    border-radius: 12px 0 0 12px;
    width: 15px;
    height: 70px;
    display: inline-block;
    margin: 0px;
    line-height: 95px;
}

p.left-name {
    transform: rotate(-90deg);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

div.right {
    border-radius: 0 12px 12px 0;
    width: 15px;
    height: 70px;
    display: inline-block;
    margin: 0px;
    line-height: 75px;
    font-size: 24px;
    text-align: center;
}


        div.name {
            font-size: 16px;
            font-weight: 700;
            color: rgba(0,0,0,1.0);
            font-variant: normal;
            font-style: normal;
            padding-left: 10px;
            padding-top: 5px;
        }

        span.job {
            font-size: 14px;
            font-weight: 500;
            color: rgba(0,0,0,1.0);
            font-variant: normal;
            font-style: italic;
            padding-left: 5px;
        }

        div.birth {
            font-size: 12px;
            font-weight: 700;
            color: rgba(0,0,0,0.6);
            font-variant: normal;
            font-style: normal;
            padding-left: 10px;
        }

        div.death {
            font-size: 12px;
            font-weight: 700;
            color: rgba(0,0,0,0.6);
            font-variant: normal;
            font-style: normal;
            padding-left: 10px;
        }

                   div.birth A, div.death A, div.partner A {
                       color: red;
                   }

        div.partner {
            font-size: 11px;
            font-weight: 700;
            color: rgba(0,0,0,0.8);
            font-variant: normal;
            font-style: normal;
            padding-left: 10px;
        }

        div.flag {
            float:right;
        }

        img.flag {
            float:right;
            width: 30px;
            border: 1px solid black;
            margin: 2px;
        }


        div.cousins {
            width: 250px;
            color:  #858585;
            background-color: #505050;
            height: 30px;
            border-radius: 20px;
            line-height: 30px;
            margin-left: 20px;
            opacity: 0.5;

        }


   .red {
        background-color: #BD0300;
    }

   .yellow {
        background-color: #F8E80D;
        color: black !important;
    }

   .green {
        background-color: #61E06A;
    }

   .blue {
        background-color: #43AAE5;
    }

   .darkblue {
        background-color: #1771A6;
    }

   .orange {
        background-color: #FFA514;
    }

   .violet {
        background-color: #B556BD;
    }

   .pink {
        background-color: #E47CBA;
    }

   .black {
        background-color: #0A0300;
    }

   .silver {
        background-color: #D2D2D2;
    }

   .white {
        background-color: white;
        color: grey;
    }










    table,tr,td {
       text-align: center;
       border: 0px;
       margin: 0px;
       padding: 0px;
    }

    table.net {
       border: 0px solid red;
       margin: 0px;
       padding: 0px;
       text-align: center;
       border-spacing: 0px;
       display: inline-block;
    }

    table.net td {
       border: 0px solid red;
       margin: 0px;
       padding: 0px;
       text-align: center;
       border-spacing: 0px;
    }

    table.net td.border {
        width: 87px;
        text-align: center;
       border: 0px solid red;
    }

    div.conn {
        width: 1px;
        background-color: white;
        height: 30px;
    }

    div.connx {
        height: 1px;
        background-color: white;
        width: 100%;
    }