1 files changed, 95 insertions, 137 deletions
diff --git a/views/default/css/elements/core.php b/views/default/css/elements/core.php
index f46ec11d9..74f21ee59 100644
--- a/views/default/css/elements/core.php
+++ b/views/default/css/elements/core.php
@@ -1,159 +1,117 @@
 <?php
 /**
  * Core CSS
- *
- * @package Elgg.Core
- * @subpackage UI
+ * 
+ * This file holds all the complicated/hacky stuff that you really
+ * shouldn't touch or override unless you're sure you know what you're doing.
+ * 
+ * Provides classes that implement cross-browser support for the following features:
+ *   * clearfix
+ *   * fluid-width content area that doesn't wrap around floats
+ *   * menu's with separators
+ *   * inline-block
+ *   * horizontal menus
+ *   * fluid gallery without using tables
  */
 ?>
-/* ***************************************
-	Core
-*************************************** */
-a:hover,
-a.selected {
-	text-decoration: underline;
-}
-p {
-	margin-bottom:15px;
-}
-p:last-child {
-	margin-bottom:0;
-}
-small {
-	font-size: 90%;
-}
-h1, h2, h3, h4, h5, h6 {
-	font-weight: bold;
-	line-height: auto;
-	color:#0054A7;
-}
-h1 { font-size: 1.8em; }
-h2 { font-size: 1.5em; line-height: 1.1em; }
-h3 { font-size: 1.2em; }
-h4 { font-size: 1.0em; }
-h5 { font-size: 0.9em; }
-h6 { font-size: 0.8em; }
-dt {
-	font-weight: bold;
-}
-dd {
-	margin: 0 0 1em 1em;
-}
-pre, code {
-	background:#EBF5FF;
-	color:#000000;
-	overflow:auto;
 
-	overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
-	white-space: pre-wrap; /* css-3 */
-	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
-	white-space: -pre-wrap; /* Opera 4-6 */
-	white-space: -o-pre-wrap; /* Opera 7 */
-	word-wrap: break-word; /* Internet Explorer 5.5+ */
-}
-code {
-	padding:2px 3px;
-}
-pre {
-	padding:3px 15px;
-	margin:0px 0 15px 0;
-	line-height:1.3em;
-}
-blockquote {
-	padding:3px 15px;
-	margin:0px 0 15px 0;
-	background:#EBF5FF;
-	border:none;
-	-webkit-border-radius: 4px;
-	-moz-border-radius: 4px;
+/* Clearfix */
+.clearfix:after,
+.elgg-grid:after,
+.elgg-layout:after,
+.elgg-inner:after,
+.elgg-page-header:after,
+.elgg-page-footer:after,
+.elgg-head:after,
+.elgg-foot:after,
+.elgg-col:after,
+.elgg-image-block:after {
+	content: ".";
+	display: block;
+	height: 0;
+	clear: both;
+	visibility: hidden;	
 }
 
-
-/* ***************************************
-	GENERIC SELECTORS
-*************************************** */
-h2 {
-/*	border-bottom:1px solid #CCCCCC; */
-	padding-bottom:5px;
+/* Fluid width container that does not wrap floats */
+.elgg-body,
+.elgg-col-last {
+	display: block;
+	width: auto;
+	word-wrap: break-word;
+	overflow: hidden;
+	
+	/* IE 6, 7 */
+	zoom:1;
+	*overflow:visible;
 }
 
-.clearfloat { clear:both; }
+<?php
+/**
+ * elgg-body fills the space available to it.
+ * It uses hidden text to expand itself. The combination of auto width, overflow
+ * hidden, and the hidden text creates this effect.
+ *
+ * This allows us to float fixed width divs to either side of an .elgg-body div
+ * without having to specify the body div's width.
+ *
+ * @todo check what happens with long <pre> tags or large images
+ * @todo Move this to its own file -- it is very complicated and should not have to be overridden.
+ */
 
-/* Clearfix! */
-.clearfix:after,
-.listing:after,
-.listing .info:after {
-	content:".";
-	display:block;
-	height:0;
-	clear:both;
-	visibility:hidden;
+//@todo isn't this only needed if we use display:table-cell?
+?>
+.elgg-body:after,
+.elgg-col-last:after {
+	display: block;
+	visibility: hidden;
+	height: 0 !important;
+	line-height: 0;
+	overflow: hidden;
+	
+	/* Stretch to fill up available space */
+	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 ";
 }
 
-.listing .icon { float: left; margin-right: 10px; }
-.listing .icon img { width: auto }
-.listing .info { display: table-cell; }
+/* ***************************************
+ * MENUS
+ *
+ * To add separators to a menu:
+ * .elgg-menu-$menu > li:after {content: '|'; background: ...;}
+ *************************************** */
+/* Enabled nesting of dropdown/flyout menus */
+.elgg-menu > li { position: relative; }
 
-.link {
-	cursor:pointer;
-}
-.small {
-	font-size: 90%;
-}
-.divider {
-	border-top:1px solid #cccccc;
-}
-.hidden {
-	display:none;
-}
-.radius8 {
-	-webkit-border-radius: 8px;
-	-moz-border-radius: 8px;
-}
-.margin-none {
-	margin:0;
-}
-.margin-top {
-	margin-top:10px;
-}
-.rss-link {
-	margin-top:-10px;
-	margin-bottom:10px;
-}
-.rss-link a {
-	display:block;
-	width:14px;
-	height:14px;
-	float:right;
-	background-image:url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png);
-	background-repeat: no-repeat;
-	background-position: -250px top;
-	text-indent: -1000em;
-}
-.elgg-tags {
-	background-image:url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png);
-	background-repeat: no-repeat;
-	background-position: left -196px;
-	padding:1px 0 0 14px;
-	font-size: 85%;
-}
-.elgg-tagcloud {
-	text-align:justify;
+.elgg-menu > li:last-child::after {
+	display: none;
 }
 
+/* Maximize click target */
+.elgg-menu > li > a { display: block }
 
-.right {
-	float: right;
+/* Horizontal menus w/ separator support */
+.elgg-menu-hz > li,
+.elgg-menu-hz > li:after,
+.elgg-menu-hz > li > a,
+.elgg-menu-hz > li > span {
+	vertical-align: middle;
 }
 
-.left {
-	float: left;
-}
+/* Allow inline image blocks in horizontal menus */
+.elgg-menu-hz .elgg-body:after { content: '.'; }
 
-.elgg_hrt {
-	border-top: 1px solid #CCCCCC;
-}
+<?php //@todo This isn't going to work as-is.  Needs testing ?>
+/* Inline block */
+.elgg-gallery > li,
+.elgg-button,
+.elgg-icon,
+.elgg-menu-hz > li,
+.elgg-menu-hz > li:after,
+.elgg-menu-hz > li > a,
+.elgg-menu-hz > li > span {
+	/* Google says do this, but why? */
+	position: relative;
 
-.elgg_hrb {
-	border-bottom: 1px solid #CCCCCC;
+	display: inline-block;
 }