Merge some changes from the themes branch

3 files changed, 125 insertions, 121 deletions

diff --git a/themes/clouds/css-1.6.2/images/clouds.png b/themes/clouds/css-1.6.2/images/clouds.png
index 6014b3df1c..5e05257c8e 100644
--- a/themes/clouds/css-1.6.2/images/clouds.png
+++ b/themes/clouds/css-1.6.2/images/clouds.png
diff --git a/themes/clouds/css-1.6.2/style.css b/themes/clouds/css-1.6.2/style.css
index 82b1e8e203..a55b3ee2f2 100644
--- a/themes/clouds/css-1.6.2/style.css
+++ b/themes/clouds/css-1.6.2/style.css
@@ -33,69 +33,81 @@ body {
 	font: 12px tahoma, arial, helvetica, sans-serif;
 }
 
+/* The header and its components */
 header {
-	background-color: #fff;
+	background: #acf url(images/clouds.png) repeat-x;
 	border: 1px solid #039;
 	margin: 10px;
+	height: 63px;
+	position: relative;
 }
 
-main {
-	display: block;
-	padding: 10px;
+.header-search {
+	position: absolute;
+	top: 5px;
+	right: 10px;
 }
 
-* {
-	margin: 0;
+[dir=rtl] .header-search {
+	left: 10px;
+	right: auto;
 }
 
-td {
-	padding: 0;
+header h1 {
+	position: absolute;
+	left: 10px;
+	top: 5px;
+	color: #039;
+	font-size: 20px;
+	font-weight: normal;
 }
 
-/* ================= Header Layout */
-#header {
-	background-image: url(images/clouds.png);
-	height: 30px;
+[dir=rtl] header h1 {
+	right: 10px;
+	left: auto;
 }
 
-/* Set stack level for top menu row */
-.makeMenu ul,
-#main-menu ul {
-	z-index: 210;
+.primary-menu {
+	position: absolute;
+	bottom: 0;
+	left: -20px;
 }
 
-header h1 {
-	color: #039;
-	float: left;
-	font-size: 20px;
-	font-weight: normal;
-	margin: 5px 12px 0;
+[dir=rtl] .primary-menu {
+	right: -20px;
+	left: auto;
 }
 
-[dir=rtl] header h1 {
-	float: right;
+.secondary-menu {
+	position: absolute;
+	bottom: 0;
+	right: 10px;
 }
 
-.hsearch {
+[dir=rtl] .secondary-menu {
+	left: 10px;
+	right: auto;
+}
+
+main {
 	display: block;
-	float: right;
-	padding-right: 10px;
-	padding-top: 5px;
+	padding: 10px;
 }
 
-#header-user-links {
-	float: right;
-	margin-right: 20px;
+* {
+	margin: 0;
 }
 
-[dir=rtl] .hsearch {
-	float: left;
-	padding-left: 10px;
+td {
+	padding: 0;
 }
 
-[dir=rtl] #header-user-links {
-	float: left;
-	margin-left: 20px;
+/* ================= Header Layout */
+
+/* Set stack level for top menu row */
+.secondary-menu ul,
+.primary-menu ul {
+	z-index: 210;
 }
 
 #bodydiv .title {
@@ -118,7 +130,7 @@ header h1 {
 	padding: 0;
 }
 
-#main-menu ul {
+.primary-menu ul {
 	padding: 0;
 	margin: 0;
 	border: 1px solid #ddd;
@@ -130,7 +142,7 @@ header h1 {
 	background: #fff;
 }
 
-#main-menu li {
+.primary-menu li {
 	display: block;
 	position: relative;
 	float: left;
@@ -138,11 +150,11 @@ header h1 {
 	width: 100%;
 }
 
-#main-menu li a {
+.primary-menu li a {
 	display: block;
 }
 
-#main-menu li > ul {
+.primary-menu li > ul {
 	display: block;
 	position: absolute;
 	top: 0;
@@ -151,37 +163,37 @@ header h1 {
 	right: auto;
 }
 
-#main-menu > li > a {
+.primary-menu > li > a {
 	height: 37px;
 	width: 27px;
 }
 
-#main-menu > li > ul {
+.primary-menu > li > ul {
 	left: 0;
 	right: auto;
 	top: 22px;
 }
 
-#main-menu a {
+.primary-menu a {
 	text-decoration: none;
 	padding: 0 10px;
 	margin: 0;
 	white-space: nowrap;
 }
 
-#main-menu ul li:hover a,
-#main-menu li:hover li a {
+.primary-menu ul li:hover a,
+.primary-menu li:hover li a {
 	background: none;
 	border: 0;
 }
 
-#main-menu li:hover > ul {
+.primary-menu li:hover > ul {
 	visibility: visible;
 	opacity: 1;
 }
 
 /* First row submenu style*/
-#main-menu > li > ul > li:first-child {
+.primary-menu > li > ul > li:first-child {
 	text-indent: 0;
 	min-width: 100px;
 	width: 100%;
@@ -196,7 +208,7 @@ header h1 {
 }
 
 /* Mainmenu Icons*/
-#main-menu > li {
+.primary-menu > li {
 	background-image: url(images/sprites-top-menu.png);
 	background-repeat: no-repeat;
 	width: 22px;
@@ -206,7 +218,7 @@ header h1 {
 }
 
 /* Submenu Icons */
-#main-menu li ul li {
+.primary-menu ul li {
 	background-image: url(images/sprites-sub-menu.png);
 	background-repeat: no-repeat;
 	height: 22px;
@@ -215,33 +227,33 @@ header h1 {
 	text-indent: 22px;
 }
 
-[dir=rtl] #main-menu > li {
+[dir=rtl] .primary-menu > li {
 	margin: 4px 16px 0 0;
 }
 
-[dir=rtl] #main-menu li {
+[dir=rtl] .primary-menu li {
 	float: right;
 }
 
-[dir=rtl] #main-menu li:hover > ul {
+[dir=rtl] .primary-menu li:hover > ul {
 	right: 100%;
 	left: auto;
 }
 
-[dir=rtl] #main-menu > li:hover > ul {
+[dir=rtl] .primary-menu > li:hover > ul {
 	left: auto;
 	right: 0;
 }
 
-[dir=rtl] #main-menu li li {
+[dir=rtl] .primary-menu li li {
 	text-align: right;
 }
 
-[dir=rtl] #main-menu li li a {
+[dir=rtl] .primary-menu li li a {
 	display: block;
 }
 
-[dir=rtl] #main-menu > li > ul > li:first-child {
+[dir=rtl] .primary-menu > li > ul > li:first-child {
 	text-align: center;
 }
 
@@ -938,67 +950,66 @@ header h1 {
 /* ===== */
 /* User Links Menu */
 
-#header-user-links {
-	float: right;
-	margin: 10px 10px 4px 0;
-}
-
-.makeMenu li {
+.secondary-menu li {
 	display: inline;
 	position: relative;
 	white-space: nowrap;
 }
 
-.makeMenu li:before {
+.secondary-menu li:before {
 	content: " | ";
 }
 
-.makeMenu li ul {
+.secondary-menu ul {
 	background-color: #eee;
 	border: thin solid #aaa;
 	display: none;
 	left: 0;
 	position: absolute;
-	top: 1.1em !important;
 }
 
-.makeMenu li ul li {
+.secondary-menu ul li {
 	display: block;
 	text-align: left;
 }
 
-.makeMenu li ul li a {
+.secondary-menu ul li a {
 	color: #333;
 	padding: 2px 5px 2px 2px !important;
 }
 
-.makeMenu,
-.makeMenu li ul {
+.secondary-menu {
+	list-style: none;
+	margin-left: 0 !important;
+	padding: 1px;
+}
+
+.secondary-menu ul {
 	list-style: none;
 	margin-left: 0 !important;
 	padding: 1px;
 	top: 5px;
 }
 
-.makeMenu li:hover > ul {
+.secondary-menu li:hover > ul {
 	display: block;
 }
 
-.makeMenu li a {
+.secondary-menu li a {
 	color: #039;
 }
 
-.makeMenu li a:hover {
+.secondary-menu li a:hover {
 	color: #f5003d;
 }
 
-.makeMenu ul li a {
+.secondary-menu ul li a {
 	background-color: #fff;
 	display: block;
 	padding: 0 5px !important;
 }
 
-.makeMenu ul li a:hover {
+.secondary-menu ul li a:hover {
 	background: #c8e7ff;
 	color: #000;
 }
@@ -1009,8 +1020,8 @@ li a.link {
 	margin-right: 5px;
 }
 
-.makeMenu li ul li:before,
-.makeMenu li:first-child:before {
+.secondary-menu ul li:before,
+.secondary-menu li:first-child:before {
 	content: "";
 }
 
@@ -1020,12 +1031,12 @@ li a.link {
 	font-weight: 900;
 }
 
-[dir=rtl] .makeMenu li ul {
+[dir=rtl] .secondary-menu ul {
 	left: auto;
 	right: -20px !important;
 }
 
-[dir=rtl] .makeMenu li ul li {
+[dir=rtl] .secondary-menu ul li {
 	text-align: right;
 }
 
@@ -2695,7 +2706,7 @@ dt {
 	padding: 1px 10px 1px 5px;
 }
 
-.makeMenu.lb-menu li:before {
+.secondary-menu.lb-menu li:before {
 	content: "";
 }
 
diff --git a/themes/clouds/header.php b/themes/clouds/header.php
index f2c3d59357..32f54f9223 100644
--- a/themes/clouds/header.php
+++ b/themes/clouds/header.php
@@ -74,49 +74,42 @@ foreach (WT_MenuBar::getModuleMenus() as $menu) {
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
 	<![endif]-->
 </head>
-<body id="body">
+<body>
 	<?php if ($view !== 'simple') { ?>
 	<header>
-		<div id="header">
-			<h1><?php echo WT_TREE_TITLE; ?></h1>
-			<div class="hsearch">
-				<form style="display:inline;" action="search.php" method="post" role="search">
-					<input type="hidden" name="action" value="general">
-					<input type="hidden" name="ged" value="<?php echo WT_GEDCOM; ?>">
-					<input type="hidden" name="topsearch" value="yes">
-					<input type="search" name="query" size="15" placeholder="<?php echo WT_I18N::translate('Search'); ?>">
-					<input class="search-icon" type="image" src="<?php echo $WT_IMAGES['search']; ?>" alt="<?php echo WT_I18N::translate('Search'); ?>" title="<?php echo WT_I18N::translate('Search'); ?>">
-				</form>
-			</div>
-		</div>
-		<div id="topMenu">
-			<nav>
-				<ul id="main-menu">
-					<?php
-					foreach (array_filter($menu_items) as $menu) {
-						echo getMenuAsCustomList($menu);
-					}
-					?>
-				</ul>
-			</nav>
-			<div id="header-user-links">
-				<ul class="makeMenu">
-					<?php
-					if (Auth::check()) {
-						echo '<li><a href="edituser.php" class="link">', WT_Filter::escapeHtml(Auth::user()->getRealName()), '</a></li><li>', logout_link(), '</li>';
-						if (WT_USER_CAN_ACCEPT && exists_pending_change()) {
-							echo ' <li><a href="#" onclick="window.open(\'edit_changes.php\',\'_blank\', chan_window_specs); return false;" style="color:red;">', WT_I18N::translate('Pending changes'), '</a></li>';
-						}
-					} else {
-						echo '<li>', login_link(),'</li>';
-					}
-					?>
-					<?php echo WT_MenuBar::getFavoritesMenu(); ?>
-					<?php echo WT_MenuBar::getLanguageMenu(); ?>
-					<?php echo WT_MenuBar::getThemeMenu(); ?>
-				</ul>
-			</div>
-		</div>
+		<div class="header-logo"></div>
+		<form class="header-search" style="display:inline;" action="search.php" method="post" role="search">
+			<input type="hidden" name="action" value="general">
+			<input type="hidden" name="ged" value="<?php echo WT_GEDCOM; ?>">
+			<input type="hidden" name="topsearch" value="yes">
+			<input type="search" name="query" size="15" placeholder="<?php echo WT_I18N::translate('Search'); ?>">
+			<input class="search-icon" type="image" src="<?php echo $WT_IMAGES['search']; ?>" alt="<?php echo WT_I18N::translate('Search'); ?>" title="<?php echo WT_I18N::translate('Search'); ?>">
+		</form>
+		<ul class="secondary-menu">
+			<?php
+			if (Auth::check()) {
+				echo '<li><a href="edituser.php" class="link">', WT_Filter::escapeHtml(Auth::user()->getRealName()), '</a></li><li>', logout_link(), '</li>';
+				if (WT_USER_CAN_ACCEPT && exists_pending_change()) {
+					echo ' <li><a href="#" onclick="window.open(\'edit_changes.php\',\'_blank\', chan_window_specs); return false;" style="color:red;">', WT_I18N::translate('Pending changes'), '</a></li>';
+				}
+			} else {
+				echo '<li>', login_link(),'</li>';
+			}
+			?>
+			<?php echo WT_MenuBar::getFavoritesMenu(); ?>
+			<?php echo WT_MenuBar::getLanguageMenu(); ?>
+			<?php echo WT_MenuBar::getThemeMenu(); ?>
+		</ul>
+		<h1><?php echo WT_TREE_TITLE; ?></h1>
+		<nav>
+			<ul class="primary-menu">
+				<?php
+				foreach (array_filter($menu_items) as $menu) {
+					echo getMenuAsCustomList($menu);
+				}
+				?>
+			</ul>
+		</nav>
 	</header>
 	<?php } ?>
 	<?php echo WT_FlashMessages::getHtmlMessages(); ?>