/*
 * fp_layout.css, written by Douglas Woodall, May 2011
 *
 * First page layout for family tree (level 1)
 *
 * The meanings of box, anc, mar, l.h and l.v are described in layout.css.
 * However, the numbering system used here, for the first page, is QUITE
 * DIFFERENT from that used for later pages.  Here, the root and its direct
 * ancestors are numbered from 1 to 15, bottom to top, left to right, but
 * treating all great grandparents as being on the same level.  The three
 * ancestors-by-marriage are numbered 16, 17 and 18.  This seems a sensible
 * numbering system for a single page, but it is inflexible (because the
 * heights of the great grandparents are fixed in the .css file), and so
 * it is not suitable if the same .css file is to be used for many different
 * pages - hence the different numbering system used for the later pages,
 * in layout.css.  (layout.css cannot be used for the first page because
 * it allows for only five rows per page, whereas we need six rows here.)
 */

div { position: absolute; }

div#box1    { top: 87%; left: 43%; height:  8%; width: 14%; }
div#anc1    { top: 83%; left: 49%; height:  4%; width:  2%; }
div#mar1    { top: 74%; left: 48.5%; height:  7%; width:  3%; }
div#l1h	    { top: 76%; left: 30%; height: 2px; width: 40%; }
div#l1v	    { top: 76%; left: 50%; height: 15%; width: 2px; }

div#box2    { top: 72%; left: 23%; height:  8%; width: 14%; }
div#anc2    { top: 68%; left: 29%; height:  4%; width:  2%; }
div#mar2    { top: 59%; left: 28.5%; height:  7%; width:  3%; }
div#l2h	    { top: 61%; left: 20%; height: 2px; width: 20%; }
div#l2v	    { top: 61%; left: 30%; height: 15%; width: 2px; }

div#box3    { top: 72%; left: 63%; height:  8%; width: 14%; }
div#anc3    { top: 68%; left: 69%; height:  4%; width:  2%; }
div#mar3    { top: 59%; left: 68.5%; height:  7%; width:  3%; }
div#l3h	    { top: 61%; left: 60%; height: 2px; width: 20%; }
div#l3v	    { top: 61%; left: 70%; height: 15%; width: 2px; }

div#box4    { top: 57%; left: 13%; height:  8%; width: 14%; }
div#anc4    { top: 53%; left: 19%; height:  4%; width:  2%; }
div#mar4    { top: 44%; left: 18.5%; height:  7%; width:  3%; }
div#l4h	    { top: 46%; left: 10%; height: 2px; width: 20%; }
div#l4v	    { top: 46%; left: 20%; height: 15%; width: 2px; }

div#box5    { top: 57%; left: 33%; height:  8%; width: 14%; }
div#anc5    { top: 53%; left: 39%; height:  4%; width:  2%; }
div#mar5    { top: 14%; left: 38.5%; height:  7%; width:  3%; }
div#l5h	    { top: 16%; left: 30%; height: 2px; width: 20%; }
div#l5v	    { top: 16%; left: 40%; height: 45%; width: 2px; }

div#box6    { top: 57%; left: 53%; height:  8%; width: 14%; }
div#anc6    { top: 53%; left: 59%; height:  4%; width:  2%; }
div#mar6    { top: 29%; left: 58.5%; height:  7%; width:  3%; }
div#l6h	    { top: 31%; left: 50%; height: 2px; width: 20%; }
div#l6v	    { top: 31%; left: 60%; height: 30%; width: 2px; }

div#box7    { top: 57%; left: 73%; height:  8%; width: 14%; }
div#anc7    { top: 53%; left: 79%; height:  4%; width:  2%; }
div#mar7    { top: 44%; left: 78.5%; height:  7%; width:  3%; }
div#l7h	    { top: 46%; left: 70%; height: 2px; width: 20%; }
div#l7v	    { top: 46%; left: 80%; height: 15%; width: 2px; }

div#box8    { top: 42%; left:  3%; height: 8%; width: 14%; }
div#anc8    { top: 38%; left:  9%; height: 4%; width:  2%; }

div#box9    { top: 42%; left: 23%; height: 8%; width: 14%; }
div#anc9    { top: 38%; left: 29%; height: 4%; width:  2%; }

div#box10   { top: 12%; left: 23%; height: 8%; width: 14%; }
div#anc10   { top:  8%; left: 29%; height: 4%; width:  2%; }

div#box11   { top: 12%; left: 43%; height: 8%; width: 14%; }
div#anc11   { top:  8%; left: 49%; height: 4%; width:  2%; }

div#box12   { top: 27%; left: 43%; height: 8%; width: 14%; }
div#anc12   { top: 23%; left: 49%; height: 4%; width:  2%; }

div#box13   { top: 27%; left: 63%; height: 8%; width: 14%; }
div#anc13   { top: 23%; left: 69%; height: 4%; width:  2%; }

div#box14   { top: 42%; left: 63%; height: 8%; width: 14%; }
div#anc14   { top: 38%; left: 69%; height: 4%; width:  2%; }

div#box15   { top: 42%; left: 83%; height: 8%; width: 14%; }
div#anc15   { top: 38%; left: 89%; height: 4%; width:  2%; }

/* 16 and 17 agree with 10 and 11 vertically, 20% either side horizontally */

div#box16   { top: 12%; left:  3%; height: 8%; width: 14%; }
div#anc16   { top:  8%; left:  9%; height: 4%; width:  2%; }

div#box17   { top: 12%; left: 63%; height: 8%; width: 14%; }
div#anc17   { top:  8%; left: 69%; height: 4%; width:  2%; }

/* 18 agrees with 13 vertically, 20% greater horizontally */

div#box18   { top: 27%; left: 83%; height: 8%; width: 14%; }
div#anc18   { top: 23%; left: 89%; height: 4%; width:  2%; }

/* 8 and 9 agree with 5 vertically, 20 either side horizontally */

div#mar8    { top: 14%; left: 18.5%; height:  7%; width:  3%; }
div#l8h	    { top: 16%; left: 10%; height: 2px; width: 20%; }

div#mar9    { top: 14%; left: 58.5%; height:  7%; width:  3%; }
div#l9h	    { top: 16%; left: 50%; height: 2px; width: 20%; }

/* 10 agrees with 6 vertically, 20 greater horizontally */

div#mar10   { top: 29%; left: 78.5%; height:  7%; width:  3%; }
div#l10h    { top: 31%; left: 70%; height: 2px; width: 20%; }