more tweaking of css - menu and general clean up

git-svn-id: http://code.elgg.org/elgg/trunk@8064 36083f99-b078-4883-b0ff-0f9b5a30f544

16 files changed, 91 insertions, 71 deletions

diff --git a/js/lib/ui.js b/js/lib/ui.js
index 2ea0ccc46..72a087aa0 100644
--- a/js/lib/ui.js
+++ b/js/lib/ui.js
@@ -105,7 +105,7 @@ elgg.ui.initHoverMenu = function(parent) {
 	// avatar contextual menu
 	$(".elgg-avatar > .elgg-icon-hover-menu").click(function(e) {
 
-		var $hovermenu = $(this).parent().find(".elgg-hover-menu");
+		var $hovermenu = $(this).parent().find(".elgg-menu-hover");
 
 		// close hovermenu if arrow is clicked & menu already open
 		if ($hovermenu.css('display') == "block") {
@@ -118,13 +118,13 @@ elgg.ui.initHoverMenu = function(parent) {
 		}
 
 		// hide any other open hover menus
-		$(".elgg-hover-menu:visible").not($hovermenu).fadeOut();
+		$(".elgg-menu-hover:visible").not($hovermenu).fadeOut();
 	});
 
 	// hide avatar menu when user clicks elsewhere
 	$(document).click(function(event) {
 		if ($(event.target).parents(".elgg-avatar").length == 0) {
-			$(".elgg-hover-menu").fadeOut();
+			$(".elgg-menu-hover").fadeOut();
 		}
 	});
 }
diff --git a/views/default/css/elements/chrome.php b/views/default/css/elements/chrome.php
index db46b6984..badffb0c9 100644
--- a/views/default/css/elements/chrome.php
+++ b/views/default/css/elements/chrome.php
@@ -1,13 +1,16 @@
 <?php
 /**
+ * Visual styling
  *
+ * @package Elgg.Core
+ * @subpackage UI
  */
 
 /* Colors:
 
 	#4690D6 - elgg light blue
 	#0054A7 - elgg dark blue
-	#e4ecf5 - elgg v light blue
+	#e4ecf5 - elgg very light blue
 */
 
 ?>
@@ -66,7 +69,6 @@ blockquote {
 	-moz-border-radius: 4px;
 }
 
-
 /* ***************************************
 	GENERIC SELECTORS
 *************************************** */
@@ -74,15 +76,6 @@ h2 {
 	padding-bottom:5px;
 }
 
-
-.link {
-	cursor:pointer;
-}
-.divider {
-	border-top:1px solid #cccccc;
-}
-
-
 .radius8 {
 	-webkit-border-radius: 8px;
 	-moz-border-radius: 8px;
@@ -93,6 +86,11 @@ h2 {
 // @todo add a series of dividers and borders
 
 ?>
+
+.divider {
+	border-top:1px solid #cccccc;
+}
+
 <?php //@todo convert to hyphen-separated ?>
 .elgg_hrt {
 	border-top: 1px solid #CCCCCC;
@@ -103,10 +101,6 @@ h2 {
 .elgg-border-plain {
 	border: 1px solid #eeeeee;
 }
-.elgg-rss {
-	float: right;
-}
-
 
 .elgg-text ul, ol {
 	margin: 0 1.5em 1.5em 0;
diff --git a/views/default/css/elements/forms.php b/views/default/css/elements/forms.php
index 57a320d0e..e8916d76d 100644
--- a/views/default/css/elements/forms.php
+++ b/views/default/css/elements/forms.php
@@ -6,6 +6,7 @@
  * @subpackage UI
  */
 ?>
+
 /* ***************************************
 	Form Elements
 *************************************** */
diff --git a/views/default/css/elements/grid.php b/views/default/css/elements/grid.php
index a800a2842..40a5b186d 100644
--- a/views/default/css/elements/grid.php
+++ b/views/default/css/elements/grid.php
@@ -9,6 +9,7 @@
  * the last column (@todo we need broswer-specific test cases for this).
  */
 ?>
+
 /* ***************************************
 	GRID
 *************************************** */
diff --git a/views/default/css/elements/helpers.php b/views/default/css/elements/helpers.php
index 0818fba6e..45b54d789 100644
--- a/views/default/css/elements/helpers.php
+++ b/views/default/css/elements/helpers.php
@@ -3,6 +3,9 @@
  * Helpers CSS
  *
  * Contains generic elements that can be used throughout the site.
+ *
+ * @package Elgg.Core
+ * @subpackage UI
  */
 ?>
 
@@ -38,6 +41,11 @@
 	float: left;
 }
 
+.link {
+	cursor: pointer;
+}
+
+<?php @todo // do we need something like large and small? ?>
 .large {
 	font-size: 120%;
 }
@@ -131,4 +139,4 @@ echo <<<CSS
 .mvm{margin-top:$medium;margin-bottom:$medium}
 .mvl{margin-top:$large;margin-bottom:$large}
 CSS;
-?>
+?>
\ No newline at end of file
diff --git a/views/default/css/elements/icons.php b/views/default/css/elements/icons.php
index fda2840dc..b52503b57 100644
--- a/views/default/css/elements/icons.php
+++ b/views/default/css/elements/icons.php
@@ -1,6 +1,9 @@
 <?php
 /**
  * Elgg icons
+ *
+ * @package Elgg.Core
+ * @subpackage UI
  */
 
 ?>
diff --git a/views/default/css/elements/layout_objects.php b/views/default/css/elements/layout_objects.php
index 4f268e5cf..82524c625 100644
--- a/views/default/css/elements/layout_objects.php
+++ b/views/default/css/elements/layout_objects.php
@@ -1,6 +1,8 @@
 <?php
 /**
- * Core CSS
+ * Layout Object CSS
+ *
+ * Modules, image blocks, lists, tables, gallery, widgets, messages
  *
  * @package Elgg.Core
  * @subpackage UI
@@ -16,6 +18,7 @@
  * @todo check what happens with long <pre> tags or large images
  */
 ?>
+
 /* ***************************************
 	Body
 *************************************** */
@@ -32,6 +35,7 @@
 	font-size: xx-large;
 	content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
 }
+
 /* ***************************************
 	Image Block
 *************************************** */
@@ -42,12 +46,11 @@
 	float: left;
 	margin-right: 5px;
 }
-
-<?php //@todo is this the best way to do it?  Perhaps elgg-image-alt would be cleaner... ?>
-.elgg-image-block .elgg-image.elgg-alt {
+.elgg-image-block .elgg-image-alt {
 	float: right;
 	margin-left: 5px;
 }
+
 /* ***************************************
 	List
 *************************************** */
@@ -80,6 +83,7 @@
 .elgg-list-content {
 	margin: 10px 5px;
 }
+
 /* ***************************************
 	Gallery
 *************************************** */
@@ -125,7 +129,7 @@
 /* ***************************************
 	Modules
 *************************************** */
-.elgg-module-aside {
+.elgg-module {
 	margin-bottom: 20px;
 }
 .elgg-module-aside .elgg-head {
@@ -133,9 +137,6 @@
 	margin-bottom: 5px;
 	padding-bottom: 5px;
 }
-.elgg-module-info {
-	margin-bottom: 20px;
-}
 .elgg-module-info > .elgg-head {
 	background: #e4e4e4;
 	padding: 5px;
@@ -143,31 +144,36 @@
 	-webkit-border-radius: 3px;
 	-moz-border-radius: 3px;
 }
-<?php //@todo should not assume h3 ?>
-.elgg-module-info > .elgg-head h3 {
+.elgg-module-info > .elgg-head * {
 	color: #333333;
 }
 .elgg-module-popup {
 	background-color: white;
 	border: 1px solid #cccccc;
 	z-index: 9999;
+	margin-bottom: 0;
 	padding: 5px;
 	-webkit-border-radius: 6px;
 	-moz-border-radius: 6px;
 	-webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
 	-moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
 }
+.elgg-module-popup > .elgg-head {
+	margin-bottom: 5px;
+}
+.elgg-module-popup > .elgg-head * {
+	color: #0054A7;
+}
 .elgg-module-featured {
 	border: 1px solid #4690D6;
 	-webkit-border-radius: 6px;
 	-moz-border-radius: 6px;
-	margin-bottom: 20px;
 }
 .elgg-module-featured > .elgg-head {
 	padding: 5px;
 	background-color: #4690D6;
 }
-.elgg-module-featured > .elgg-head h3 {
+.elgg-module-featured > .elgg-head * {
 	color: white;
 }
 .elgg-module-featured > .elgg-body {
@@ -203,7 +209,6 @@
 	background: #dedede;
 	border: 2px solid #cccccc;
 }
-
 <?php //@todo location-dependent style: make an extension of elgg-gallery ?>
 .elgg-widgets-add-panel li {
 	float: left;
@@ -424,7 +429,7 @@ a.elgg-widget-edit-button:hover, a.elgg-widget-delete-button:hover {
 .elgg-river-item input[type=submit] {
 	margin: 0 0 0 10px;
 }
-.elgg-river-item > .elgg-alt a {
+.elgg-river-item > .elgg-image-alt a {
 	font-size: 90%;
 	float: right;
 	clear: both;
diff --git a/views/default/css/elements/navigation.php b/views/default/css/elements/navigation.php
index e7b99dd4b..0d275f09c 100644
--- a/views/default/css/elements/navigation.php
+++ b/views/default/css/elements/navigation.php
@@ -41,6 +41,7 @@
 	color: #555555;
 	border-color: #555555;
 }
+
 /* ***************************************
 	TABS
 *************************************** */
@@ -82,6 +83,7 @@
 	top: 2px;
 	background: white;
 }
+
 /* ***************************************
 	BREADCRUMBS
 *************************************** */
@@ -115,10 +117,11 @@
 	top: -6px;
 	left: 0;
 }
+
 /* ***************************************
 	SITE MENU
 *************************************** */
-.elgg-site-menu {
+.elgg-menu-site {
 	position: absolute;
 	height: 23px;
 	bottom: 0;
@@ -126,27 +129,27 @@
 	width: auto;
 	z-index: 7000;
 }
-.elgg-site-menu li {
+.elgg-menu-site li {
 	display: block;
 	float: left;
 	height: 23px;
 }
-.elgg-site-menu > li {
+.elgg-menu-site > li {
 	margin-right: 1px;
 }
-.elgg-site-menu a {
+.elgg-menu-site a {
 	color: white;
 	font-weight: bold;
 	padding: 3px 13px 0px 13px;
 	height: 20px;
 	display: block;
 }
-.elgg-site-menu a:hover {
+.elgg-menu-site a:hover {
 	text-decoration: none;
 }
-.elgg-site-menu li.elgg-state-selected a,
-.elgg-site-menu li a:hover,
-.elgg-site-menu .elgg-more:hover a {
+.elgg-menu-site li.elgg-state-selected a,
+.elgg-menu-site li a:hover,
+.elgg-menu-site .elgg-more:hover a {
 	background: white;
 	color: #555555;
 	-webkit-box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25);
@@ -156,16 +159,16 @@
 	-webkit-border-top-left-radius: 4px;
 	-webkit-border-top-right-radius: 4px;
 }
-.elgg-site-menu .elgg-more {
+.elgg-menu-site .elgg-more {
 	overflow: hidden;
 }
-.elgg-site-menu .elgg-more:hover {
+.elgg-menu-site .elgg-more:hover {
 	overflow: visible;
 }
-.elgg-site-menu .elgg-more:hover span {
+.elgg-menu-site .elgg-more:hover span {
 	background-position: -146px -76px;
 }
-.elgg-site-menu .elgg-more ul {
+.elgg-menu-site .elgg-more ul {
 	z-index: 7000;
 	min-width: 150px;
 	border-left: 1px solid #999999;
@@ -178,10 +181,10 @@
 	-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
 	-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
 }
-.elgg-site-menu .elgg-more ul li {
+.elgg-menu-site .elgg-more ul li {
 	float: none;
 }
-.elgg-site-menu .elgg-more:hover ul li a {
+.elgg-menu-site .elgg-more:hover ul li a {
 	background: white;
 	color: #555555;
 	-webkit-border-radius: 0;
@@ -189,12 +192,12 @@
 	-webkit-box-shadow: none;
 	-moz-box-shadow: none;
 }
-.elgg-site-menu .elgg-more ul li a:hover {
+.elgg-menu-site .elgg-more ul li a:hover {
 	background: #4690D6;
 	color: white;
 }
-.elgg-site-menu .elgg-more ul li:last-child a,
-.elgg-site-menu .elgg-more ul li:last-child a:hover {
+.elgg-menu-site .elgg-more ul li:last-child a,
+.elgg-menu-site .elgg-more ul li:last-child a:hover {
 	-moz-border-radius-bottomleft: 4px;
 	-moz-border-radius-bottomright: 4px;
 	-webkit-border-bottom-left-radius: 4px;
@@ -204,7 +207,7 @@
 /* ***************************************
 	PAGE MENU
 *************************************** */
-.elgg-page-menu a {
+.elgg-menu-page a {
 	display: block;
 	-webkit-border-radius: 8px;
 	-moz-border-radius: 8px;
@@ -212,33 +215,34 @@
 	margin: 0 0 3px 0;
 	padding: 2px 4px 2px 8px;
 }
-.elgg-page-menu a:hover {
+.elgg-menu-page a:hover {
 	background-color: #0054A7;
 	color: white;
 	text-decoration: none;
 }
-.elgg-page-menu li.elgg-state-selected > a {
+.elgg-menu-page li.elgg-state-selected > a {
 	background-color: #4690D6;
 	color: white;
 }
-.elgg-page-menu .elgg-child-menu {
+.elgg-menu-page .elgg-child-menu {
 	display: none;
 	margin-left: 15px;
 }
-.elgg-page-menu .elgg-menu-closed:before, .elgg-menu-opened:before {
+.elgg-menu-page .elgg-menu-closed:before, .elgg-menu-opened:before {
 	display: inline-block;
 	padding-right: 4px;
 }
-.elgg-page-menu .elgg-menu-closed:before {
+.elgg-menu-page .elgg-menu-closed:before {
 	content: "\002B";
 }
-.elgg-page-menu .elgg-menu-opened:before {
+.elgg-menu-page .elgg-menu-opened:before {
 	content: "\002D";
 }
+
 /* ***************************************
 	HOVER MENU
 *************************************** */
-.elgg-hover-menu {
+.elgg-menu-hover {
 	display: none;
 	position: absolute;
 	z-index: 10000;
@@ -252,18 +256,18 @@
 	-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.50);
 	-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.50);
 }
-.elgg-hover-menu > li {
+.elgg-menu-hover > li {
 	border-bottom: 1px solid #dddddd;
 }
-.elgg-hover-menu > li:last-child {
+.elgg-menu-hover > li:last-child {
 	border-bottom: none;
 }
-.elgg-hover-menu a {
+.elgg-menu-hover a {
 	display: block;
 	padding: 2px 8px;
 	font-size: 92%;
 }
-.elgg-hover-menu a:hover {
+.elgg-menu-hover a:hover {
 	background: #cccccc;
 	text-decoration: none;
 }
@@ -278,15 +282,15 @@
 /* ***************************************
 	FOOTER
 *************************************** */
-.elgg-footer-menu li {
+.elgg-menu-footer li {
 	float: left;
 }
-.elgg-footer-menu li:after{
+.elgg-menu-footer li:after{
 	content: "\007C";
 	display: inline-block;
 	padding: 0 4px 0 4px;
 	font-weight: normal;
 }
-.elgg-footer-menu li:last-child:after {
+.elgg-menu-footer li:last-child:after {
 	content: "";
 }
diff --git a/views/default/css/elements/page_layout.php b/views/default/css/elements/page_layout.php
index e7d3ac59a..0346bb0a6 100644
--- a/views/default/css/elements/page_layout.php
+++ b/views/default/css/elements/page_layout.php
@@ -5,6 +5,9 @@
  * Contains CSS for the page shell and page layout
  *
  * Classic layout: 990 wide centered. Used in default page shell
+ *
+ * @package Elgg.Core
+ * @subpackage UI
  */
 ?>
 
diff --git a/views/default/css/elements/typography.php b/views/default/css/elements/typography.php
index ea99bfdda..cc1ee3ed2 100644
--- a/views/default/css/elements/typography.php
+++ b/views/default/css/elements/typography.php
@@ -6,6 +6,7 @@
  * @subpackage UI
  */
 ?>
+
 /* ***************************************
 	Typography
 *************************************** */
diff --git a/views/default/layout/elements/page_links.php b/views/default/layout/elements/page_links.php
index 56eab0bf8..fb9acbfb7 100644
--- a/views/default/layout/elements/page_links.php
+++ b/views/default/layout/elements/page_links.php
@@ -22,7 +22,7 @@ if (isset($autofeed) && $autofeed == true) {
 		'title' => $label,
 		'rel' => 'nofollow',
 		'encode_text' => false,
-		'class' => 'elgg-rss',
+		'class' => 'right',
 	));
 }
 
diff --git a/views/default/layout/objects/image_block.php b/views/default/layout/objects/image_block.php
index 46c58f864..1aecccf28 100644
--- a/views/default/layout/objects/image_block.php
+++ b/views/default/layout/objects/image_block.php
@@ -42,7 +42,7 @@ if ($image) {
 }
 
 if ($alt_image) {
-	$alt_image = "<div class=\"elgg-image elgg-alt\">$alt_image</div>";
+	$alt_image = "<div class=\"elgg-image-alt\">$alt_image</div>";
 }
 
 echo <<<HTML
diff --git a/views/default/navigation/menu/page.php b/views/default/navigation/menu/page.php
index 00fa1ef51..92006e956 100644
--- a/views/default/navigation/menu/page.php
+++ b/views/default/navigation/menu/page.php
@@ -7,7 +7,7 @@
  * @uses $vars['class']
  */
 
-$class = 'elgg-menu elgg-page-menu';
+$class = 'elgg-menu elgg-menu-page';
 if (isset($vars['class'])) {
 	$class = "$class {$vars['class']}";
 }
diff --git a/views/default/navigation/menu/site.php b/views/default/navigation/menu/site.php
index 39fb980a7..706e56fe5 100644
--- a/views/default/navigation/menu/site.php
+++ b/views/default/navigation/menu/site.php
@@ -6,7 +6,7 @@
  * @uses $vars['menu']['more']
  */
 
-echo '<ul class="elgg-menu elgg-site-menu clearfix">';
+echo '<ul class="elgg-menu elgg-menu-site clearfix">';
 foreach ($vars['menu']['default'] as $menu_item) {
 	echo elgg_view('navigation/menu/elements/item', array('item' => $menu_item));
 }
diff --git a/views/default/navigation/menu/user_hover.php b/views/default/navigation/menu/user_hover.php
index 7f64c4a10..10db3a006 100644
--- a/views/default/navigation/menu/user_hover.php
+++ b/views/default/navigation/menu/user_hover.php
@@ -13,7 +13,7 @@ $actions = elgg_get_array_value('action', $vars['menu'], null);
 $main = elgg_get_array_value('default', $vars['menu'], null);
 $admin = elgg_get_array_value('admin', $vars['menu'], null);
 
-echo '<ul class="elgg-menu elgg-hover-menu">';
+echo '<ul class="elgg-menu elgg-menu-hover">';
 
 // name and username
 $name_link = elgg_view('output/url', array(
diff --git a/views/default/page/elements/footer.php b/views/default/page/elements/footer.php
index 1f2d8b604..0c32e5429 100644
--- a/views/default/page/elements/footer.php
+++ b/views/default/page/elements/footer.php
@@ -11,7 +11,7 @@
 ?>
 <div class="elgg-page-footer">
 	<div class="elgg-inner clearfix">
-		<?php echo elgg_view_menu('footer', array('class' => 'elgg-footer-menu')); ?>
+		<?php echo elgg_view_menu('footer', array('class' => 'elgg-menu-footer')); ?>
 		<?php echo elgg_view('footer/links'); ?>
 		<a href="http://www.elgg.org" class="elgg-alt">
 			<img src="<?php echo elgg_get_site_url(); ?>_graphics/powered_by_elgg_badge_drk_bckgnd.gif" alt="Powered by Elgg" />