/* STYLY PRO RODOKMEN - VÝVOD + ROZROD */
/* ================================================================ SPOJNICE */
    /* Všechny spojnice karet jsou přímo na jednotlivých stránkách HTML*/
/* =================================================================== KARTY */ 
/*      1. řádek:  A1  A2  A3  A4  A5  A8
        2. řádek:  B1  B2  B3  B4  B5  B8
rodokmen "VÝVOD" nepoužívá sloupec 8, "ROZROD" nepoužívá sloupce 4 a 5 */

#a1, #b1, #c1, #d1, #e1, #f1, #g1, #h1, #i1, #j1, #k1, #l1, #m1, #n1, #o1, #p1,
#a2, #b2, #c2, #d2, #e2, #f2, #g2, #h2, #i2, #j2, #k2, #l2, #m2, #n2, #o2, #p2,
#a3, #b3, #c3, #d3, #e3, #f3, #g3, #h3, #i3, #j3, #k3, #l3, #m3, #n3, #o3, #p3,
#a4, #b4, #c4, #d4, #e4, #f4, #g4, #h4, #i4, #j4, #k4, #l4, #m4, #n4, #o4, #p4,
#a5, #b5, #c5, #d5, #e5, #f5, #g5, #h5, #i5, #j5, #k5, #l5, #m5, #n5, #o5, #p5,
#a8, #b8, #c8, #d8, #e8, #f8, #g8, #h8, #i8, #j8, #k8, #l8, #m8, #n8, #o8, #p8 {
  position: absolute;
  width: 200px;
  height: 50px;
  text-align: center;
  background: white;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: 3px 3px 15px black;}  

#a8, #b8, #c8, #d8, #e8, #f8, #g8, #h8, #i8, #j8, #k8, #l8, #m8, #n8, #o8, #p8 {
  width: 500px;
  height: 72px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 60%;
  font-style: italic;
  font-weight: normal;
  text-decoration: none;
  text-align: left;
  padding: 5px 5px 5px 10px;}

#a1, #b1, #c1, #d1, #e1, #f1, #g1, #h1, #i1, #j1, #k1, #l1, #m1, #n1, #o1, #p1 {left: 15px;}
#a2, #b2, #c2, #d2, #e2, #f2, #g2, #h2, #i2, #j2, #k2, #l2, #m2, #n2, #o2, #p2 {left: 235px;}
#a3, #b3, #c3, #d3, #e3, #f3, #g3, #h3, #i3, #j3, #k3, #l3, #m3, #n3, #o3, #p3 {left: 455px;}
#a5, #b5, #c5, #d5, #e5, #f5, #g5, #h5, #i5, #j5, #k5, #l5, #m5, #n5, #o5, #p5 {left: 895px;}
#a4, #b4, #c4, #d4, #e4, #f4, #g4, #h4, #i4, #j4, #k4, #l4, #m4, #n4, #o4, #p4,
#a8, #b8, #c8, #d8, #e8, #f8, #g8, #h8, #i8, #j8, #k8, #l8, #m8, #n8, #o8, #p8 {left: 675px;} 

#a1, #a2, #a3, #a4, #a5, #a8 {top:   20px;}
#b1, #b2, #b3, #b4, #b5, #b8 {top:  110px;}  
#c1, #c2, #c3, #c4, #c5, #c8 {top:  200px;}
#d1, #d2, #d3, #d4, #d5, #d8 {top:  290px;}
#e1, #e2, #e3, #e4, #e5, #e8 {top:  380px;}
#f1, #f2, #f3, #f4, #f5, #f8 {top:  470px;}
#g1, #g2, #g3, #g4, #g5, #g8 {top:  560px;}
#h1, #h2, #h3, #h4, #h5, #h8 {top:  650px;}
#i1, #i2, #i3, #i4, #i5, #i8 {top:  740px;}
#j1, #j2, #j3, #j4, #j5, #j8 {top:  830px;}
#k1, #k2, #k3, #k4, #k5, #k8 {top:  920px;}
#l1, #l2, #l3, #l4, #l5, #l8 {top: 1010px;}
#m1, #m2, #m3, #m4, #m5, #m8 {top: 1100px;}
#n1, #n2, #n3, #n4, #n5, #n8 {top: 1190px;}  
#o1, #o2, #o3, #o4, #o5, #o8 {top: 1280px;}
#p1, #p2, #p3, #p4, #p5, #p8 {top: 1370px;}

/* =============================================================== KOMENTÁŘE */
#kom { /* komentáře pro rozrod i vývod */
  position: absolute;
  font-family: Verdana, Arial;
  box-shadow: 3px 3px 15px black;
  padding: 15px;
  font-size: 80%;
  font-style: italic;
  font-weight: normal;
  text-decoration: none;
  border: 1px solid blue;
  border-radius: 10px;
  background: #E6FFE6;
  text-align: center; /* komentář nahoře - pro rozrod */
  top: 20px;
  left: 350px;
  width: 700px;
  height: 20px;}
.r101 #kom, .r201 #kom, .r301 #kom  { /* komentář vpravo - pro vývod */
  text-align: left;
  top: 120px;
  left: 910px;
  width: 220px;
  height: 700px;}
p:first-line {
  color: blue;}
/*
#kom p:first-line {
  color: black;}
*/
.cislo { /* zvýrazněné osobní číslo */
  color: red;
  font-weight: bold;}

#telo.r101, #telo.r201, #telo.r301 {height: 1420px;}
.r101 #pata, .r201 #pata, .r301 #pata {top: 1450px;}

#telo.r121, #telo.r125, #telo.r322, #telo.r323, #telo.r324, #telo.r326, #telo.r327 {height: 470px;} 
.r121 #pata, .r125 #pata, .r322 #pata, .r323 #pata, .r324 #pata, .r326 #pata, .r327 #pata {top: 500px;}

#telo.r122, #telo.r129 {height: 920px;} 
.r122 #pata, .r129 #pata {top: 950px;}

#telo.r123, #telo.r401 {height: 830px;}
.r123 #pata, .r401 #pata {top: 860px;}

#telo.r124, #telo.r221, #telo.r223 {height: 550px;}
.r124 #pata, .r221 #pata, .r223 #pata {top: 580px;}

#telo.r126, #telo.r127, #telo.r128, #telo.r130, #telo.r222, #telo.r402, #telo.r403, #telo.r404, #telo.r405 {height: 280px;}
.r126 #pata, .r127 #pata, .r128 #pata, .r130 #pata, .r222 #pata, .r402 #pata, .r403 #pata, .r404 #pata, .r405 #pata {top: 310px;}

#telo.r131, #telo.r325, #telo.r352 {height: 370px;}
.r131 #pata, .r325 #pata, .r352 #pata {top: 400px;}

#telo.r224, #telo.r225, #telo.r226, #telo.r227, #telo.r228 {height: 200px;}
.r224 #pata, .r225 #pata, .r226 #pata, .r227 #pata, .r228 #pata {top: 230px;}

#telo.r351 {height: 650px;}
.r351 #pata {top: 680px;}

#telo.r321 {height: 1000px;}
.r321 #pata {top: 1030px;}

#telo.r151 {height: 1100px;}
.r151 #pata {top: 1130px;}

.r123 #d8, .r151 #b8 {height: 162px;}