Bug fix & html tidy

fixes bug #1236995 which necessitates CSS changes. Also restructure
module

7 files changed, 312 insertions, 433 deletions

diff --git a/modules_v3/family_nav/module.php b/modules_v3/family_nav/module.php
index fd62383882..496edca842 100644
--- a/modules_v3/family_nav/module.php
+++ b/modules_v3/family_nav/module.php
@@ -14,7 +14,7 @@
 //
 // This program is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 // GNU General Public License for more details.
 //
 // You should have received a copy of the GNU General Public License
@@ -27,6 +27,11 @@ if (!defined('WT_WEBTREES')) {
 }
 
 class family_nav_WT_Module extends WT_Module implements WT_Module_Sidebar {
+
+	CONST TTL = "<div class='flyout2'>%s</div>";
+	CONST LNK = "<div class='flyout3' data-href='%s'>%s</div>";
+	CONST MSG = "<div class='flyout4'>(%s)</div>"; // class flyout4 not used in standard themes
+
 	// Extend WT_Module
 	public function getTitle() {
 		return /* I18N: Name of a module/sidebar */ WT_I18N::translate('Family navigator');
@@ -50,263 +55,193 @@ class family_nav_WT_Module extends WT_Module implements WT_Module_Sidebar {
 	}
 
 	// Implement WT_Module_Sidebar
+	public function getSidebarAjaxContent() {
+		return '';
+	}
+
+	// Implement WT_Module_Sidebar
 	public function getSidebarContent() {
 		global $controller;
-		global $spouselinks, $parentlinks;
+
+		$controller->addInlineJavascript("
+			jQuery('#sb_family_nav_content')
+				.on('click', '.flyout a', function() {
+					return false;
+				})
+				.on('click', '.flyout3', function() {
+					window.location.href = jQuery(this).data('href');
+					return false;
+				});
+		");
 
 		ob_start();
 
-		echo '<div id="sb_family_nav_content"><table class="nav_content">';
+		?>
+		<div id="sb_family_nav_content">
+			<table class="nav_content">
 
+		<?php
 		//-- parent families -------------------------------------------------------------
 		foreach ($controller->record->getChildFamilies() as $family) {
-			echo '<tr><td style="padding-bottom:4px;" class="center" colspan="2">';
-			echo '<a class="famnav_link" href="' . $family->getHtmlUrl() . '">';
-			echo '<b>' . $controller->record->getChildFamilyLabel($family) . '</b>';
-			echo '</a>';
-			echo '</td></tr>';
-			$this->drawFamily($controller->record, $family);
+			$this->drawFamily($family, $controller->record->getChildFamilyLabel($family));
 		}
-
 		//-- step parents ----------------------------------------------------------------
 		foreach ($controller->record->getChildStepFamilies() as $family) {
-			echo '<tr><td><br></td><td></td></tr>';
-			echo '<tr><td style="padding-bottom: 4px;" class="center" colspan="2">';
-			echo '<a class="famnav_link" href="' . $family->getHtmlUrl() . '">';
-			echo '<b>' . $controller->record->getStepFamilyLabel($family) . '</b>';
-			echo '</a>';
-			echo '</td></tr>';
-			$this->drawFamily($controller->record, $family);
+			$this->drawFamily($family, $controller->record->getStepFamilyLabel($family));
 		}
-
 		//-- spouse and children --------------------------------------------------
 		foreach ($controller->record->getSpouseFamilies() as $family) {
-			echo '<tr><td><br></td><td></td></tr>';
-			echo '<tr><td style="padding-bottom: 4px;" class="center" colspan="2">';
-			echo '<a class="famnav_link" href="' . $family->getHtmlUrl() . '">';
-			echo '<b>' . WT_I18N::translate('Immediate Family') . '</b>';
-			echo '</a>';
-			echo '</td></tr>';
-			$this->drawFamily($controller->record, $family);
+//			$this->drawFamily($family, WT_I18N::translate('Immediate Family'));
+			$this->drawFamily($family, $controller->record->getSpouseFamilyLabel($family));
 		}
 		//-- step children ----------------------------------------------------------------
 		foreach ($controller->record->getSpouseStepFamilies() as $family) {
-			echo '<tr><td><br></td><td></td></tr>';
-			echo '<tr><td style="padding-bottom: 4px;" class="center" colspan="2">';
-			echo '<a class="famnav_link" href="' . $family->getHtmlUrl() . '">';
-			echo '<b>' . $family->getFullName() . '</b>';
-			echo '</a>';
-			echo '</td></tr>';
-			$this->drawFamily($controller->record, $family);
+			$this->drawFamily($family, $family->getFullName());
 		}
-
-		echo '</table></div>';
+		?>
+			</table>
+		</div>
+		<?php
 
 		return ob_get_clean();
 	}
 
-	private function drawFamily(WT_Individual $root, WT_Family $family) {
-		global $controller;
-		global $spouselinks, $parentlinks;
-		global $SHOW_PRIVATE_RELATIONSHIPS;
-
-		if ($SHOW_PRIVATE_RELATIONSHIPS) {
-			$access_level = WT_PRIV_HIDE;
-		} else {
-			$access_level = WT_USER_ACCESS_LEVEL;
-		}
+	private function isPerson($person) {
+		return $person instanceof WT_Individual;
+	}
 
-		foreach ($family->getFacts('HUSB', false, $access_level) as $fact) {
-			$spouse = $fact->getTarget();
-			if ($spouse instanceof WT_Individual) {
-				$menu = new WT_Menu(get_close_relationship_name($root, $spouse));
-				$menu->addClass('', 'submenu flyout2');
-				$submenu = new WT_Menu($this->print_pedigree_person_nav($spouse) . $parentlinks);
-				$menu->addSubMenu($submenu);
-				echo '<tr><td class="facts_label" style="width:75px;">', $menu->getMenu(), '</td><td class="center ', $controller->getPersonStyle($spouse), ' nam">';
-				echo '<a class="famnav_link" href="' . $spouse->getHtmlUrl() . '">';
-				echo $spouse->getFullName();
-				echo '</a>';
-				echo '<div class="font9">' . $spouse->getLifeSpan() . '</div>';
-				echo '</td></tr>';
-			}
-		}
+	private function drawFamily(WT_Family $family, $title) {
+		global $controller, $SHOW_PRIVATE_RELATIONSHIPS;
 
-		foreach ($family->getFacts('WIFE', false, $access_level) as $fact) {
+		?>
+		<tr>
+			<td class="center" colspan="2">
+				<a class="famnav_title" href="<?php echo $family->getHtmlUrl(); ?>">
+					<?php echo $title; ?>
+				</a>
+			</td>
+		</tr>
+		<?php
+		$access_level = $SHOW_PRIVATE_RELATIONSHIPS ? WT_PRIV_HIDE : WT_USER_ACCESS_LEVEL;
+		$facts = array_merge($family->getFacts('HUSB', false, $access_level), $family->getFacts('WIFE', false, $access_level));
+		foreach($facts as $fact) {
 			$spouse = $fact->getTarget();
-			if ($spouse instanceof WT_Individual) {
-				$menu = new WT_Menu(get_close_relationship_name($root, $spouse));
-				$menu->addClass('', 'submenu flyout2');
-				$submenu = new WT_Menu($this->print_pedigree_person_nav($spouse) . $parentlinks);
-				$menu->addSubMenu($submenu);
-				echo '<tr><td class="facts_label" style="width:75px;">', $menu->getMenu(), '</td><td class="center ', $controller->getPersonStyle($spouse), ' nam">';
-				echo '<a class="famnav_link" href="' . $spouse->getHtmlUrl() . '">';
-				echo $spouse->getFullName();
-				echo '</a>';
-				echo '<div class="font9">' . $spouse->getLifeSpan() . '</div>';
-				echo '</td></tr>';
+			if ($this->isPerson($spouse)) {
+				$menu = new WT_Menu(get_close_relationship_name($controller->record, $spouse));
+				$menu->addClass('', 'submenu flyout');
+				$menu->addSubMenu(new WT_Menu($this->getParents($spouse)));
+				?>
+				<tr>
+					<td class="facts_label">
+						<?php echo $menu->getMenu(); ?>
+					</td>
+					<td class="center <?php echo $controller->getPersonStyle($spouse); ?> nam">
+						<a class="famnav_link" href="<?php echo $spouse->getHtmlUrl(); ?>">
+							<?php echo $spouse->getFullName(); ?>
+						</a>
+						<div class="font9">
+							<?php echo $spouse->getLifeSpan(); ?>
+						</div>
+					</td>
+				</tr>
+				<?php
 			}
 		}
 
 		foreach ($family->getFacts('CHIL', false, $access_level) as $fact) {
 			$child = $fact->getTarget();
-			if ($child instanceof WT_Individual) {
-				$menu = new WT_Menu(get_close_relationship_name($root, $child));
-				$menu->addClass('', 'submenu flyout2');
-				$submenu = new WT_Menu($this->print_pedigree_person_nav($child) . $spouselinks);
-				$menu->addSubMenu($submenu);
-				echo '<tr><td class="facts_label" style="width:75px;">';
-				echo $menu->getMenu();
-				echo '</td><td class="center ', $controller->getPersonStyle($child), ' nam">';
-				echo '<a class="famnav_link" href="' . $child->getHtmlUrl() . '">';
-				echo $child->getFullName();
-				echo '</a>';
-				echo '<div class="font9">' . $child->getLifeSpan() . '</div>';
-				echo '</td></tr>';
+			if ($this->isPerson($child)) {
+				$menu = new WT_Menu(get_close_relationship_name($controller->record, $child));
+				$menu->addClass('', 'submenu flyout');
+				$menu->addSubMenu(new WT_Menu($this->getFamily($child)));
+				?>
+				<tr>
+					<td class="facts_label">
+						<?php echo $menu->getMenu(); ?>
+					</td>
+					<td class="center <?php echo $controller->getPersonStyle($child); ?> nam">
+						<a class="famnav_link" href="<?php echo $child->getHtmlUrl(); ?>">
+							<?php echo $child->getFullName(); ?>
+						</a>
+						<div class="font9">
+							<?php echo $child->getLifeSpan(); ?>
+						</div>
+					</td>
+				</tr>
+				<?php
 			}
 		}
 	}
 
-	// Implement WT_Module_Sidebar
-	public function getSidebarAjaxContent() {
-		return '';
+	private function getHTML($person, $showUnknown=false) {
+		if ($this->isPerson($person)) {
+			return sprintf(self::LNK, $person->getHtmlUrl(), $person->getFullName());
+		} elseif ($showUnknown) {
+			return sprintf(self::MSG, WT_I18N::translate('unknown'));
+		} else {
+			return '';
+		}
 	}
 
-	function print_pedigree_person_nav($person) {
+	private function getParents($person) {
 		global $SEARCH_SPIDER;
 
-		global $spouselinks, $parentlinks, $step_parentlinks;
-
-		$persons = '';
-		$person_step = '';
-		$person_parent = '';
-		$natdad = '';
-		$natmom = '';
-
-		$tmp = array('M'=>'','F'=>'F', 'U'=>'NN');
-		$isF = $tmp[$person->getSex()];
-		$spouselinks      = '';
-		$parentlinks      = '';
-		$step_parentlinks = '';
-
-		if ($person->canShowName() && !$SEARCH_SPIDER) {
-			//-- draw a box for the family flyout
-			$parentlinks      .= '<div class="flyout4"><b>' . WT_I18N::translate('Parents') . '</b></div>';
-			$step_parentlinks .= '<div class="flyout4"><b>' . WT_I18N::translate('Parents') . '</b></div>';
-			$spouselinks      .= '<div class="flyout4"><b>' . WT_I18N::translate('Family' ) . '</b></div>';
+		$father = null;
+		$mother = null;
+		$html = sprintf(self::TTL, WT_I18N::translate('Parents'));
+		$family = $person->getPrimaryChildFamily();
+		if (!$SEARCH_SPIDER && $person->canShowName() && $family !== null) {
+			$father = $family->getHusband($person);
+			$mother = $family->getWife($person);
+			$html .= $this->getHTML($father) .
+					 $this->getHTML($mother);
 
-			$persons       = '';
-			$person_parent = '';
-			$person_step   = '';
-
-			//-- parent families --------------------------------------
-			$fams = $person->getChildFamilies();
-			foreach ($fams as $family) {
-
-				if (!is_null($family)) {
-					$husb = $family->getHusband($person);
-					$wife = $family->getWife($person);
-					$children = $family->getChildren();
-
-					// Husband ------------------------------
-					if ($husb || $children) {
-						if ($husb) {
-							$person_parent = 'Yes';
-							$parentlinks .= '<a class="flyout3" href="' . $husb->getHtmlUrl() . '">';
-							$parentlinks .= $husb->getFullName();
-							$parentlinks .= '</a>';
-							$parentlinks .= '<br>';
-							$natdad = 'yes';
-						}
-					}
-
-					// Wife ------------------------------
-					if ($wife || $children) {
-						if ($wife) {
-							$person_parent = 'Yes';
-							$parentlinks .= '<a class="flyout3" href="' . $wife->getHtmlUrl() . '">';
-							$parentlinks .= $wife->getFullName();
-							$parentlinks .= '</a>';
-							$parentlinks .= '<br>';
-							$natmom = 'yes';
-						}
+			// Can only have a step parent if one & only one parent found at this point
+			if ($this->isPerson($father) xor $this->isPerson($mother)) {
+				$stepParents = '';
+				foreach ($person->getChildStepFamilies() as $family) {
+					if (!$this->isPerson($father)) {
+						$stepParents .= $this->getHTML($family->getHusband($person));
+					} else {
+						$stepParents .= $this->getHTML($family->getWife($person));
 					}
 				}
-			}
-
-			//-- step families -----------------------------------------
-			$fams = $person->getChildStepFamilies();
-			foreach ($fams as $family) {
-				if (!is_null($family)) {
-					$husb = $family->getHusband($person);
-					$wife = $family->getWife($person);
-					$children = $family->getChildren();
-
-					if ($natdad != 'yes') {
-						// Husband -----------------------
-						if ($husb || $children) {
-							if ($husb) {
-								$person_step = 'Yes';
-								$parentlinks .= '<a class="flyout3" href="' . $husb->getHtmlUrl() . '">';
-								$parentlinks .= $husb->getFullName();
-								$parentlinks .= '</a>';
-								$parentlinks .= '<br>';
-							}
-						}
-					}
-
-					if ($natmom != 'yes') {
-						// Wife ----------------------------
-						if ($wife || $children) {
-							if ($wife) {
-								$person_step='Yes';
-								$parentlinks .= '<a class="flyout3" href="' . $wife->getHtmlUrl() . '">';
-								$parentlinks .= $wife->getFullName();
-								$parentlinks .= '</a>';
-								$parentlinks .= '<br>';
-							}
-						}
-					}
+				if($stepParents) {
+					$relationship = $this->isPerson($father) ?
+						WT_I18N::translate_c("father’s wife", "step-mother") :
+						WT_I18N::translate_c("mother’s husband", "step-father");
+					$html .= sprintf(self::TTL, $relationship) . $stepParents;
 				}
 			}
+		}
+		if(!($this->isPerson($father) || $this->isPerson($mother))) {
+			$html .= sprintf(self::MSG,  WT_I18N::translate_c('unknown family', 'unknown'));
+		}
+		return $html;
+	}
 
-			// Spouse Families -------------------------------------- @var $family Family
-			foreach ($person->getSpouseFamilies() as $family) {
+	private function getFamily($person) {
+		global $SEARCH_SPIDER;
 
-				// Spouse ------------------------------
+		$html = '';
+		if ($person->canShowName() && !$SEARCH_SPIDER) {
+			foreach ($person->getSpouseFamilies() as $family) {
 				$spouse = $family->getSpouse($person);
-				if ($spouse) {
-					$spouselinks .= '<a class="flyout3" href="' . $spouse->getHtmlUrl() . '">';
-					$spouselinks .= $spouse->getFullName();
-					$spouselinks .= '</a>';
-					$spouselinks .= '<br>';
-					if ($spouse->getFullName() != '') {
-						$persons = 'Yes';
-					}
-				}
-
-				// Children ------------------------------   @var $child Person
+				$html .= $this->getHTML($spouse, true);
 				$children = $family->getChildren();
-				foreach ($children as $child) {
-					$persons='Yes';
-					$spouselinks .= '<ul class="clist">';
-					$spouselinks .= '<li class="flyout3">';
-					$spouselinks .= '<a href="' . $child->getHtmlUrl() . '">';
-					$spouselinks .= $child->getFullName();
-					$spouselinks .= '</a>';
-					$spouselinks .= '</li>';
-					$spouselinks .= '</ul>';
+				if (count($children) > 0) {
+					$html .= "<ul class='clist'>";
+					foreach ($children as $child) {
+						$html .= '<li>' . $this->getHTML($child) . '</li>';
+					}
+					$html .= '</ul>';
 				}
 			}
-			if ($persons != 'Yes') {
-				$spouselinks .= '(' . WT_I18N::translate('none') . ')';
-			}
-			if ($person_parent != 'Yes') {
-				$parentlinks .= '(' . WT_I18N::translate_c('unknown family', 'unknown') . ')';
-			}
-			if ($person_step != 'Yes') {
-				$step_parentlinks .= '(' . WT_I18N::translate_c('unknown family', 'unknown') . ')';
-			}
 		}
+		if (!$html) {
+			$html = sprintf(self::MSG, WT_I18N::translate('none'));
+		}
+		return sprintf(self::TTL, WT_I18N::translate('Family')) . $html;
 	}
+
 }
diff --git a/themes/clouds/css-1.5.3/style.css b/themes/clouds/css-1.5.3/style.css
index eef1e70cbc..4e5b11d626 100644
--- a/themes/clouds/css-1.5.3/style.css
+++ b/themes/clouds/css-1.5.3/style.css
@@ -3884,69 +3884,62 @@ span.link_text {
 	margin-top: 8px;
 }
 
-.flyout {
-	color: #000;
-	margin-top: -20px;
-	padding: 3px;
-	right: 210px;
-	text-align: left;
+.nav_content .facts_label {
+	width: 75px;
+}
+.famnav_title{
+	font-weight: bold;
+	display: block;
+	padding: 5px 0;
 }
 
-.flyout2 {
-	background: #fff;
-	border: 1px solid #ccc;
-	color: #000;
+.flyout {
 	left: 40px;
-	margin-top: -2px;
 	padding: 3px;
-	text-align: left;
+	background-color: #ECF5FF;
+	border: 1px solid #cccccc;
 }
 
-.flyout2 a:hover {
-	color: #2f416f;
-	text-decoration: underline !important;
-}
-
-.flyout3,
-.flyout3 a {
-	background: none;
-	border: none;
-	left: 0;
-	margin-top: 0;
-	padding: 0;
-	text-align: left;
+.flyout a, .flyout a:hover {
+	color: #000000;
+    cursor: default;
 	text-decoration: none;
 }
 
-.flyout4 {
-	color: #000;
-	margin-left: 0;
-	margin-top: 0;
-	padding: 3px;
-	text-align: left;
+.flyout2 {
+	font-weight: 700;
 }
 
-.nam a:hover {
-	color: red;
+.flyout3 {
+    color: #003399;
 }
 
-.nav_content {
-	padding: 0;
-	width: 100%;
+.flyout3:hover {
+	cursor: pointer;
+    color: #FF0000;
 }
 
-[dir=rtl] .flyout3 {
+[dir=rtl] .flyout {
 	text-align: right;
+	right: 40px;
 }
 
-[dir=rtl] .flyout {
+[dir=rtl] .flyout2 {
 	text-align: right;
 	left: 210px;
 }
 
-[dir=rtl] .flyout2 {
+[dir=rtl] .flyout3 {
 	text-align: right;
-	right: 40px;
+}
+
+.nam a:hover {
+	color: red;
+}
+
+.nav_content {
+	padding: 0;
+	width: 100%;
 }
 
 /* Descendancy */
diff --git a/themes/colors/css-1.5.3/css/colors.css b/themes/colors/css-1.5.3/css/colors.css
index 976dd3c91a..2274108cdd 100644
--- a/themes/colors/css-1.5.3/css/colors.css
+++ b/themes/colors/css-1.5.3/css/colors.css
@@ -3753,60 +3753,50 @@ span.link_text {
 	margin-top: 8px;
 }
 
-.flyout {
-	color: #000;
-	margin-top: -20px;
-	padding: 3px;
-	right: 210px;
-	text-align: left;
+.nav_content .facts_label {
+	width: 75px;
 }
 
-.flyout2 {
-	background: #fff;
-	border: 1px solid #ccc;
-	color: #000;
-	left: 40px;
-	margin-top: -2px;
-	padding: 3px;
-	text-align: left;
+.famnav_title{
+	font-weight: bold;
+	display: block;
+	padding: 5px 0;
 }
 
-.flyout2 a:hover {
-	color: #2f416f;
-	text-decoration: underline !important;
+.flyout {
+	left: 40px;
+	padding: 3px;
+	background-color: #FFFFFF;
+	border: 1px solid #CCCCCC;
 }
 
-.flyout3,
-.flyout3 a {
-	background: none;
-	border: none;
-	left: 0;
-	margin-top: 0;
-	padding: 0;
-	text-align: left;
+.flyout a, .flyout a:hover {
+	color: #000000;
+    cursor: default;
 	text-decoration: none;
 }
 
-.flyout4 {
-	color: #000;
-	margin-left: 0;
-	margin-top: 0;
-	padding: 3px;
-	text-align: left;
+.flyout2 {
+	font-weight: 700;
+ }
+
+.flyout3:hover {
+	cursor: pointer;
+	text-decoration: underline;
 }
 
-[dir=rtl] .flyout3 {
+[dir=rtl] .flyout {
 	text-align: right;
+	right: 40px;
 }
 
-[dir=rtl] .flyout {
+[dir=rtl] .flyout2 {
 	text-align: right;
 	left: 210px;
 }
 
-[dir=rtl] .flyout2 {
+[dir=rtl] .flyout3 {
 	text-align: right;
-	right: 40px;
 }
 
 #sb_desc_content {
diff --git a/themes/fab/css-1.5.3/style.css b/themes/fab/css-1.5.3/style.css
index d5a3eedfec..26c9080ae8 100644
--- a/themes/fab/css-1.5.3/style.css
+++ b/themes/fab/css-1.5.3/style.css
@@ -2473,54 +2473,53 @@ dd .deletelink {
 	padding: 10px 0;
 }
 
-.flyout {
-	color: #000;
-	text-align: left;
-	margin-top: -20px;
-	right: 210px;
-	padding: 3px;
+.famnav_link div {
+	padding: 0;
+	width: 100%;
 }
 
-.flyout2 {
-	color: #000;
-	text-align: left;
-	margin-top: -2px;
-	left: 40px;
-	padding: 3px;
+.nav_content .facts_label {
+	width: 75px;
 }
 
-.flyout4 {
-	color: #000;
-	text-align: left;
-	margin-top: 0;
-	margin-left: 0;
+.famnav_title{
+	font-weight: bold;
+	display: block;
+	padding: 5px 0;
+}
+
+.flyout {
+	left: 40px;
 	padding: 3px;
 }
 
-.flyout3,
-.flyout3 a {
-	background: none;
-	border: none;
+.flyout a, .flyout a:hover {
+	color: #000000;
+    cursor: default;
 	text-decoration: none;
-	text-align: left;
-	margin-top: 0;
-	left: 0;
-	padding: 0;
 }
 
-.famnav_link div {
-	padding: 0;
-	width: 100%;
+.flyout2 {
+	font-weight: 700;
+}
+
+.flyout3 {
+	color: #336699;
+}
+
+.flyout3:hover {
+	cursor: pointer;
+	text-decoration: underline;
 }
 
 [dir=rtl] .flyout {
 	text-align: right;
-	left: 210px;
+	right: 40px;
 }
 
 [dir=rtl] .flyout2 {
 	text-align: right;
-	right: 40px;
+	left: 210px;
 }
 
 [dir=rtl] .flyout3 {
diff --git a/themes/minimal/css-1.5.3/style.css b/themes/minimal/css-1.5.3/style.css
index efb73c1e6c..31866d92f4 100644
--- a/themes/minimal/css-1.5.3/style.css
+++ b/themes/minimal/css-1.5.3/style.css
@@ -1404,25 +1404,6 @@ a.showit:hover > span {
 
 /* End of Autocomplete styles*/
 
-/* Flyout menu Styles */
-.flyout {
-	color: #000;
-	text-align: left;
-	margin-top: -20px;
-	right: 210px;
-	padding: 3px;
-}
-
-.flyoutrtl {
-	color: #000;
-	text-align: right;
-	margin-top: -20px;
-	left: 210px;
-	padding: 3px;
-}
-
-/* End of Flyout Menu styles*/
-
 .nowrap {
 	white-space: nowrap;
 }
@@ -2928,59 +2909,50 @@ dd .deletelink {
 	padding: 10px 0 0 0;
 }
 
-.flyout {
-	color: #000;
-	text-align: left;
-	margin-top: -20px;
-	right: 210px;
-	padding: 3px;
+.famnav_link {
+	font-size: 12px;
+	padding: 0;
+	width: 100%;
 }
 
-.flyout2 {
-	color: #000;
-	text-align: left;
-	margin-top: -2px;
-	left: 40px;
-	padding: 3px;
+.nav_content .facts_label {
+	width: 75px;
 }
 
-.flyout2 a:hover {
-	color: #555;
+.famnav_title{
+	font-weight: bold;
+	display: block;
+	padding: 5px 0;
 }
 
-.flyout4 {
-	color: #000;
-	text-align: left;
-	margin-top: 0;
-	margin-left: 0;
-	padding: 3px;
+.flyout {
+    left: 40px;
+    padding: 3px;
 }
 
-.flyout3,
-.flyout3 a {
-	background: none;
-	border: none;
+.flyout a, .flyout a:hover{
+	color: #000000;
+    cursor: default;
 	text-decoration: none;
-	text-align: left;
-	margin-top: 0;
-	left: 0;
-	padding: 0;
 }
 
-.famnav_link {
-	font-size: 12px;
-	padding: 0;
-	width: 100%;
+.flyout2 {
+	font-weight: 700;
+}
+
+.flyout3:hover {
+	cursor: pointer;
+	text-decoration: underline;
 }
 
 [dir=rtl] .flyout {
 	text-align: right;
-	left: 210px;
+	right: 40px;
 }
 
 [dir=rtl] .flyout2 {
 	text-align: right;
-	right: 40px;
+	left: 210px;
 }
 
 [dir=rtl] .flyout3 {
diff --git a/themes/webtrees/css-1.5.3/style.css b/themes/webtrees/css-1.5.3/style.css
index 215d71edaf..f8039d94aa 100644
--- a/themes/webtrees/css-1.5.3/style.css
+++ b/themes/webtrees/css-1.5.3/style.css
@@ -1188,12 +1188,6 @@ a.showit:hover > span {
 	white-space: normal;
 }
 
-ul.clist {
-	list-style-image: none;
-	text-decoration: none;
-	margin: 0;
-}
-
 .statistics-page {
 	text-align: center;
 }
@@ -3724,50 +3718,51 @@ dd .deletelink {
 	padding: 0;
 }
 
-.flyout {
-	text-align: left;
-	margin-top: -20px;
-	right: 210px;
-	padding: 3px;
+.nav_content .facts_label{
+	width: 75px;
 }
 
-.flyout2 {
-	text-align: left;
-	margin-top: -2px;
-	left: 40px;
-	padding: 3px;
+#sb_family_nav_content .clist {
+	margin: 0;
 }
 
-.flyout2 a:hover {
-	color: #f00;
+.famnav_title{
+	font-weight: bold;
+	display: block;
+	padding: 5px 0;
 }
 
-.flyout4 {
-	text-align: left;
-	margin-top: 0;
-	margin-left: 0;
-	padding: 3px;
+.flyout {
+    left: 40px;
 }
 
-.flyout3,
-.flyout3 a {
-	background: none;
-	border: none;
+.flyout a, .flyout a:hover {
+	color: #000000;
+    cursor: default;
 	text-decoration: none;
-	text-align: left;
-	margin-top: 0;
-	left: 0;
-	padding: 0;
+}
+
+.flyout2 {
+    font-weight: 700;
+ }
+
+.flyout3 {
+    color: #362B36;
+}
+
+.flyout3:hover {
+	cursor: pointer;
+    color: #FF0000;
 }
 
 [dir=rtl] .flyout {
 	text-align: right;
-	left: 210px;
+	right: 40px;
 }
 
 [dir=rtl] .flyout2 {
 	text-align: right;
-	right: 40px;
+	left: 210px;
 }
 
 [dir=rtl] .flyout3 {
diff --git a/themes/xenea/css-1.5.3/style.css b/themes/xenea/css-1.5.3/style.css
index 18ca31c5d9..c93e5f7cef 100644
--- a/themes/xenea/css-1.5.3/style.css
+++ b/themes/xenea/css-1.5.3/style.css
@@ -3889,59 +3889,54 @@ dd .deletelink {
 	padding: 10px 0;
 }
 
-.flyout {
-	color: #000;
-	text-align: left;
-	margin-top: -20px;
-	right: 210px;
-	padding: 3px;
+.nav_content .facts_label {
+	width: 75px;
 }
 
-.flyout2 {
-	color: #000;
-	text-align: left;
-	margin-top: -2px;
-	left: 40px;
-	padding: 3px;
+.famnav_link {
+	font-size: 12px;
+	padding: 0;
+	width: 100%;
 }
 
-.flyout2 a:hover {
-	color: #f00;
+.famnav_title{
+	font-weight: bold;
+	display: block;
+	padding: 5px 0;
 }
 
-.flyout4 {
-	color: #000;
-	text-align: left;
-	margin-top: 0;
-	margin-left: 0;
+.flyout {
+	left: 40px;
 	padding: 3px;
 }
 
-.flyout3,
-.flyout3 a {
-	background: none;
-	border: none;
+.flyout a, .flyout a:hover {
+	color: #000000;
+    cursor: default;
 	text-decoration: none;
-	text-align: left;
-	margin-top: 0;
-	left: 0;
-	padding: 0;
 }
 
-.famnav_link {
-	font-size: 12px;
-	padding: 0;
-	width: 100%;
+.flyout2 {
+	font-weight: 700;
+}
+
+.flyout3 {
+	cursor: pointer;
+	color: #362B36;
+}
+
+.flyout3:hover {
+	color: #FF0000;
 }
 
 [dir=rtl] .flyout {
 	text-align: right;
-	left: 210px;
+	right: 40px;
 }
 
 [dir=rtl] .flyout2 {
 	text-align: right;
-	right: 40px;
+	left: 210px;
 }
 
 [dir=rtl] .flyout3 {