Pedigree chart - styling for root arrow childbox

7 files changed, 61 insertions, 312 deletions

diff --git a/themes/_common/css-2.0.0/style.css b/themes/_common/css-2.0.0/style.css
index 88e5fa23f1..59fec90ec1 100755
--- a/themes/_common/css-2.0.0/style.css
+++ b/themes/_common/css-2.0.0/style.css
@@ -373,9 +373,69 @@
  *
  * wt-chart, wt-pedigree-chart
  */
+
+.pedigree_form {
+	width: 45px;
+}
+
+#pedigree_chart {
+	position: relative;
+	margin: 20px auto;
+}
+
+#pedigree_canvas {
+	z-index: -1000;
+}
+ 
 .wt-pedigree-chart .person_box_template {
 	line-height: 1.0;
 }
+
+#childbox-pedigree {
+	border: 1px solid;
+	background-color: #fff;
+}
+
+#pedigree-page #childbox-pedigree {
+	border: 1px solid;
+	background-color: #fff;
+}
+
+#childbox-pedigree {
+	padding: 5px;
+	position: absolute;
+	display: none;
+	text-align: start;
+	white-space: nowrap;
+	left: 0;
+	z-index: 9999;
+}
+wt-pedigree-chart .spacer {
+	background-image: url(images/spacer.png);
+	height:           20px;
+	width:            1px;
+}
+
+#childarrow,
+.ancestorarrow {
+	text-align: center;
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.layout3 #childbox-pedigree {
+	top: auto;
+}
+
+#childbox-pedigree a.name1 {
+	display: block;
+	margin-left: 5px;
+}
+
+[dir=rtl] #childbox-pedigree a.name1 {
+	left: auto;
+	margin-right: 5px;
+}
 /*
  * Pedigree map
  *
diff --git a/themes/clouds/css-2.0.0/style.css b/themes/clouds/css-2.0.0/style.css
index ff75aafa67..f7b5b8fc22 100755
--- a/themes/clouds/css-2.0.0/style.css
+++ b/themes/clouds/css-2.0.0/style.css
@@ -3511,66 +3511,8 @@ color: #ldlelf;
 }
 
 /*-- Pedigree ---- */
-#pedigree_chart {
-	position: relative;
-	margin: 20px auto;
-}
-
 #pedigree_canvas {
 	color:   #81a9cb;
-	z-index: -1000;
-}
-
-#pedigree-page .layout0 .shadow > div,
-#pedigree-page .layout1 .shadow > div {
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree-page .spacer {
-	background-image: url(images/spacer.png);
-	height:           20px;
-	width:            1px;
-}
-
-#childarrow,
-.ancestorarrow {
-	text-align: center;
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree_chart .person_box_template {
-	display: inline-block;
-}
-
-#pedigree_chart .shadow {
-	white-space: nowrap;
-}
-
-#pedigree-page #childarrow {
-	position: relative;
-}
-
-#pedigree-page #childbox {
-	border:           1px solid;
-	background-color: #fff;
-}
-
-.pedigree_form {
-	width: 45px;
-}
-
-#pedigree-page table.list_table {
-	margin: 0 auto;
-	width:  500px;
-}
-
-.pedigree_chart_table {
-	border:          0;
-	border-collapse: collapse;
-	padding:         0;
-	width:           100%;
 }
 
 /*-- timeline  --*/
diff --git a/themes/colors/css-2.0.0/style.css b/themes/colors/css-2.0.0/style.css
index cfeb65cd03..4ae9c4439d 100755
--- a/themes/colors/css-2.0.0/style.css
+++ b/themes/colors/css-2.0.0/style.css
@@ -3329,66 +3329,9 @@ div.faq_body {
 }
 
 /*-- Pedigree ---- */
-#pedigree_chart {
-	position: relative;
-	margin: 20px auto;
-}
 
 #pedigree_canvas {
 	color:   #81a9cb;
-	z-index: -1000;
-}
-
-#pedigree-page .layout0 .shadow > div,
-#pedigree-page .layout1 .shadow > div {
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree-page .spacer {
-	background-image: url(images/spacer.png);
-	height:           20px;
-	width:            1px;
-}
-
-#childarrow,
-.ancestorarrow {
-	text-align: center;
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree_chart .person_box_template {
-	display: inline-block;
-}
-
-#pedigree_chart .shadow {
-	white-space: nowrap;
-}
-
-#pedigree-page #childarrow {
-	position: relative;
-}
-
-#pedigree-page #childbox {
-	border:           1px solid;
-	background-color: #fff;
-}
-
-.pedigree_form {
-	width: 45px;
-}
-
-#pedigree-page table.list_table {
-	margin: 0 auto;
-	width:  500px;
-}
-
-.pedigree_chart_table {
-	border:          0;
-	border-collapse: collapse;
-	padding:         0;
-	width:           100%;
 }
 
 /*-- timeline  --*/
diff --git a/themes/fab/css-2.0.0/style.css b/themes/fab/css-2.0.0/style.css
index 1287f07f10..b398a37488 100755
--- a/themes/fab/css-2.0.0/style.css
+++ b/themes/fab/css-2.0.0/style.css
@@ -2948,68 +2948,15 @@ div.faq_body {
 }
 
 /*-- Pedigree ---- */
-#pedigree_chart {
-	position: relative;
-	margin: 20px auto;
-}
-
 #pedigree_canvas {
 	color:   #aaa;
-	z-index: -1000;
-}
-
-#pedigree-page .layout0 .shadow > div,
-#pedigree-page .layout1 .shadow > div {
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree-page .spacer {
-	background-image: url(images/spacer.png);
-	height:           20px;
-	width:            1px;
-}
-
-#childarrow,
-.ancestorarrow {
-	text-align: center;
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree_chart .person_box_template {
-	display: inline-block;
-}
-
-#pedigree_chart .shadow {
-	white-space: nowrap;
-}
-
-#pedigree-page #childarrow {
-	position: relative;
 }
 
 #pedigree-page #childbox {
-	border:           1px solid;
+	border: 1px solid;
 	background-color: #fff;
 }
 
-.pedigree_form {
-	width: 45px;
-}
-
-#pedigree-page table.list_table {
-	margin: 0 auto;
-	width:  500px;
-}
-
-.pedigree_chart_table {
-	border:          0;
-	border-collapse: collapse;
-	padding:         0;
-	width:           100%;
-}
-
 /*-- timeline  --*/
 #timeline_chart {
 	position: relative;
diff --git a/themes/minimal/css-2.0.0/style.css b/themes/minimal/css-2.0.0/style.css
index da5991def0..07e5dfb10e 100755
--- a/themes/minimal/css-2.0.0/style.css
+++ b/themes/minimal/css-2.0.0/style.css
@@ -2667,37 +2667,10 @@ div.faq_body {
 }
 
 /*-- Pedigree ---- */
-#pedigree_chart {
-	position: relative;
-	margin: 20px auto;
-}
-
 #pedigree_canvas {
 	color:   #555;
-	z-index: -1000;
-}
-
-#pedigree-page .shadow {
-	position: absolute;
-	white-space: nowrap;
 }
 
-#pedigree-page .layout0 .shadow > div,
-#pedigree-page .layout1 .shadow > div {
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree-page .spacer {
-	background-image: url(images/spacer.png);
-	height:           20px;
-	width:            1px;
-}
-
-#childarrow,
-.ancestorarrow {
-	text-align: center;
-}
 
 .tdtop {
 	vertical-align: top;
diff --git a/themes/webtrees/css-2.0.0/style.css b/themes/webtrees/css-2.0.0/style.css
index a0a92aa7c5..5cceb71042 100755
--- a/themes/webtrees/css-2.0.0/style.css
+++ b/themes/webtrees/css-2.0.0/style.css
@@ -3335,66 +3335,8 @@ div.faq_body {
 }
 
 /*-- Pedigree ---- */
-#pedigree_chart {
-	position: relative;
-	margin: 20px auto;
-}
-
 #pedigree_canvas {
 	color:   #81a9cb;
-	z-index: -1000;
-}
-
-#pedigree-page .layout0 .shadow > div,
-#pedigree-page .layout1 .shadow > div {
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree-page .spacer {
-	background-image: url(images/spacer.png);
-	height:           20px;
-	width:            1px;
-}
-
-#childarrow,
-.ancestorarrow {
-	text-align: center;
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree_chart .person_box_template {
-	display: inline-block;
-}
-
-#pedigree_chart .shadow {
-	white-space: nowrap;
-}
-
-#pedigree-page #childarrow {
-	position: relative;
-}
-
-#pedigree-page #childbox {
-	border:           1px solid;
-	background-color: #fff;
-}
-
-.pedigree_form {
-	width: 45px;
-}
-
-#pedigree-page table.list_table {
-	margin: 0 auto;
-	width:  500px;
-}
-
-.pedigree_chart_table {
-	border:          0;
-	border-collapse: collapse;
-	padding:         0;
-	width:           100%;
 }
 
 /*-- timeline  --*/
diff --git a/themes/xenea/css-2.0.0/style.css b/themes/xenea/css-2.0.0/style.css
index 155e89761b..43506d57ba 100755
--- a/themes/xenea/css-2.0.0/style.css
+++ b/themes/xenea/css-2.0.0/style.css
@@ -3237,66 +3237,8 @@ div.faq_body {
 }
 
 /*-- Pedigree ---- */
-#pedigree_chart {
-	position: relative;
-	margin: 20px auto;
-}
-
 #pedigree_canvas {
 	color:   #81a9cb;
-	z-index: -1000;
-}
-
-#pedigree-page .layout0 .shadow > div,
-#pedigree-page .layout1 .shadow > div {
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree-page .spacer {
-	background-image: url(images/spacer.png);
-	height:           20px;
-	width:            1px;
-}
-
-#childarrow,
-.ancestorarrow {
-	text-align: center;
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree_chart .person_box_template {
-	display: inline-block;
-}
-
-#pedigree_chart .shadow {
-	white-space: nowrap;
-}
-
-#pedigree-page #childarrow {
-	position: relative;
-}
-
-#pedigree-page #childbox {
-	border:           1px solid;
-	background-color: #fff;
-}
-
-.pedigree_form {
-	width: 45px;
-}
-
-#pedigree-page table.list_table {
-	margin: 0 auto;
-	width:  500px;
-}
-
-.pedigree_chart_table {
-	border:          0;
-	border-collapse: collapse;
-	padding:         0;
-	width:           100%;
 }
 
 /*-- timeline  --*/