Refactored. Simplified organization a bit by combining sections. Restored block titles to h2. Moved #gMessage to #gContent. Removed .gClearFix class in favor of specifying selectors that require a clear fix.

1 files changed, 227 insertions, 234 deletions

diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index 5d2bce56..1b2e8001 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -1,27 +1,29 @@
 /**
- * Gallery 3 Default Theme Styles
+ * Gallery 3 Default Theme Screen Styles
  *
  * @requires YUI reset, font, grids CSS
  *
  * Sheet organization:
  * 1)  Basic HTML elements
- * 2)  Base text styles
- * 3)  Page layout containers
- * 4)  Reusable content containers
- * 5)  Specific content blocks
+ * 2)  Reusable classes
+ * 3)  Reusable content blocks
+ * 4)  Page layout containers
+ * 5)  Content blocks in specific layout containers
  * 6)  Navigation and menus
- * 7)  Generic styles
- * 8)  Browser hacks
- * 9)  Debugging information
- * 10) Ajax/DOM features
- * 11) jQuery UI
+ * 7)  Browser hacks
+ * 8)  jQuery and jQuery UI
+ *
+ * @todo Group Credits and gLoginMenu seperator styles
+ * @todo Drop .gShortForm in favor of styling specific IDs (gSearchForm, gAddTagForm)
+ * @todo Apply :hover bg image to #gViewMenu (will clear fix correct this?)
+ * @todo Refactor form layout styles to reserve room for validation messages in default state. This 
+ *       will eliminate layout shifts when validation messages are displayed.
+ * @todo Move debugging information styles into a core stylesheet.
  */
 
 /** *******************************************************************
  * 1) Basic HTML elements
- ******************************************************************/
-
-/* Basic HTML elements ~~~~~~~~~~~~~~~~ */
+ **********************************************************************/
 
 body, html {
   background-color: #ccc;
@@ -32,6 +34,14 @@ p {
   margin-bottom: 1em;
 }
 
+strong {
+  font-weight: bold;
+}
+
+em {
+  font-style: oblique;
+}
+
 /* Headings ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 h1, h2, h3, h4, h5 {
@@ -195,33 +205,134 @@ li.gError select {
   border: 2px solid red;
 }
 
-/** ****************************************************************
- * 2) Base text styles
- ******************************************************************/
+/** *******************************************************************
+ * 2) Reusable generic classes
+ *********************************************************************/
 
-#gContent, .ui-dialog {
-  font-size: 1.2em;
+/* Not used, yet */
+
+/** *******************************************************************
+ * 3) Reusable content blocks
+ *********************************************************************/
+
+.gBlock {
+  clear: both;
+  margin-bottom: 2.5em;
 }
 
-#gSidebar {
-  font-size: .9em;
+.gBlock h2 {
+  background: #e8e8e8;
+  padding: .3em 1.4em;
+  background-image: url('../images/ico-move-handle.png');
+  background-repeat: no-repeat;
+  cursor: move;
 }
 
-#gHeader, #gFooter {
-  font-size: .8em;
+.gBlockContent {
+  padding: .5em 1em;
 }
 
-#gSiteMenu, #gBreadcrumbs, #gTagCloud ul {
-  font-size: 1.3em;
+/* Metadata ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+.gMetadata td,
+.gMetadata th {
+  padding: 0 1em .5em 0;
+  vertical-align: top;
 }
 
-.gItem {
-  font-size: .7em;
+.gMetadata th,
+.gMetadata td.toggle {
+  text-align: right;
+}
+
+/* Status messages ~~~~~~~~~~~~~~~~~~~~~~~ */
+
+#gSiteStatus li,
+#gMessage li {
+  border: 1px solid #ccc;
+  margin-bottom: .4em;
+}
+
+.gError, .gInfo, .gSuccess, .gWarning {
+  background-color: #e8e8e8;
+  background-position: .4em 50%;
+  background-repeat: no-repeat;
+  padding: .4em .5em .4em 30px;
+}
+
+.gError {
+  background-color: #fcc;
+  background-image: url('../images/ico-error.png');
+}
+
+.gInfo {
+  background-image: url('../images/ico-info.png');
+}
+
+.gSuccess {
+  background-color: #cfc;
+  background-image: url('../images/ico-success.png');
+}
+
+.gWarning {
+  background-color: #ff9;
+  background-image: url('../images/ico-warning.png');
+}
+
+/* Inline layout (forms, lists) ~~~~~~~~~~ */
+
+.gShortForm li {
+  float: left;
+  padding: .4em .5em;
+}
+
+.gShortForm legend,
+.gShortForm label {
+  display: none;
+}
+
+.gShortForm fieldset {
+  border: none;
+}
+
+.gShortForm input[type="text"] {
+  width: 10em;
+}
+
+/* Debugging information ~~~~~~~~~~~~~~~~~ */
+
+.gAnnotatedThemeBlock {
+  position: relative;
+  padding: 1em;
+  margin: 1em;
+  border: 1px solid #C00;
+  clear: both;
 }
 
-/*** ***************************************************************
- * 3) Page layout containers
- ******************************************************************/
+.gAnnotatedThemeBlock_album_top {
+  float: right;
+}
+
+.gAnnotatedThemeBlock_header_bottom {
+  float: right;
+}
+
+.gAnnotatedThemeBlock div.title {
+  position: absolute;
+  top: -1em;
+  right: -1em;
+  border: 1px solid black;
+  background: #C00;
+  color: white;
+  text-align: left;
+  padding: 4px;
+  font-size: 110%;
+  -moz-border-radius: 5% 5% 5% 5%;
+}
+
+/*** ******************************************************************
+ * 4) Page layout containers
+ *********************************************************************/
 
 /* View container ~~~~~~~~~~~~~~~~~~~~~~~~ */
 
@@ -235,75 +346,63 @@ li.gError select {
 
 #gHeader {
   border-bottom: 1px solid #fff;
+  font-size: .8em;
   margin-bottom: 20px;
 }
 
 #gContent {
+  font-size: 1.2em;
   padding-left: 20px;
 }
 
 #gSidebar {
   background-color: #fff;
+  font-size: .9em;
   padding: 0 20px;
   width: 220px;
 }
 
 #gFooter {
   border-top: 1px solid #ccc;
+  font-size: .8em;
   margin-top: 20px;
   padding: 10px 20px;
 }
 
-/** ****************************************************************
- * 4) Reusable content containers
- ******************************************************************/
+/** *******************************************************************
+ * 5) Content blocks in specific layout containers
+ *********************************************************************/
 
-.gBlock {
-  clear: both;
-  margin-bottom: 2.5em;
-}
+/* Header  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
-#gSidebar .gBlock h3 {
-  background: #e8e8e8;
-  padding: .3em 1.4em;
-  background-image: url('../images/ico-move-handle.png');
-  background-repeat: no-repeat;
-  cursor: move;
+#gHeader #gLogo {
+  margin: 5px 10px 10px 20px;
 }
 
-#gSidebar .gBlockContent {
-  padding: .5em 1em;
+#gHeader #gSearchForm {
+  float: right;
+  margin-right: 20px;
 }
 
-/** ****************************************************************
- * 5) Specific content blocks
- ******************************************************************/
-
-/* Logo  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+/* Album content ~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
-#gLogo {
-  margin: 5px 10px 10px 20px;
+#gContent #gAlbumHeader {
 }
 
-.gThumbnail {
+#gContent #gAlbumHeader .gDescription {
 }
 
-/* Album ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-
-#gAlbumHeader {
-  position: relative;
-}
-
-#gAlbumGrid {
+#gContent #gAlbumGrid {
   border-right: 1px solid #e8e8e8;
   margin-top: 20px;
 }
 
-#gAlbumGrid .gItem {
+#gContent #gAlbumGrid .gItem {
   border: 1px solid #e8e8e8;
   border-right-color: #ccc;
   border-bottom-color: #ccc;
   float: left;
+  font-size: .7em;
   height: 240px;
   overflow: hidden;
   padding: 14px 8px;
@@ -311,164 +410,74 @@ li.gError select {
   width: 213px;
 }
 
-.gItem h2 {
+#gContent #gAlbumGrid .gItem .gThumbnail {
+}
+
+#gContent #gAlbumGrid .gItem h2 {
   margin: 5px 0;
 }
 
-.gAlbum {
+#gContent #gAlbumGrid .gAlbum {
   background-color: #e8e8e8;
 }
 
-.gAlbum h2 {
+#gContent #gAlbumGrid .gAlbum h2 {
   color: #006;
 }
 
-/* Individual photo ~~~~~~~~~~~~~~~~~~~~~ */
+/* Individual photo content ~~~~~~~~~~~~~~ */
 
-#gItem {
+#gContent #gItem {
   margin: 1em 0;
 }
 
-/* Metadata ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-
-.gMetadata td,
-.gMetadata th {
-  padding: 0 1em .5em 0;
-  vertical-align: top;
+#gContent #gItemHeader {
 }
 
-.gMetadata th,
-.gMetadata td.toggle {
-  text-align: right;
+#gContent #gItemHeader .gDescription {
 }
 
-/* Comments ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-
-#gComments {
+#gContent #gComments {
   margin-top: 2em;
 }
 
-#gComments ul li {
+#gContent #gComments ul li {
   margin: 1em 0;
 }
 
-#gComments ul li p {
+#gContent #gComments ul li p {
   background-color: #e8e8e8;
   margin-bottom: 2px;
   padding: 4px;
 }
 
-#gComments ul li div {
+#gContent #gComments ul li div {
   padding: 8px;
 }
 
-/* Status messages ~~~~~~~~~~~~~~~~~~~~~~~ */
-
-#gMessages {
-  margin: 0 20px 20px;
-}
+/* Footer content ~~~~~~~~~~~~~~~~~~~~~~~~ */
 
-#gMessages li {
-  border: 1px solid #ccc;
-  margin: .4em 0;
-}
-
-.gError, .gInfo, .gSuccess, .gWarning {
-  background-color: #e8e8e8;
-  background-position: .4em .2em;
-  background-repeat: no-repeat;
-  padding: .4em .5em .4em 30px;
-}
-
-.gError {
-  background-color: #fcc;
-  background-image: url('../images/ico-error.png');
-}
-
-.gInfo {
-  background-image: url('../images/ico-info.png');
-}
-
-.gSuccess {
-  background-color: #cfc;
-  background-image: url('../images/ico-success.png');
-}
-
-.gWarning {
-  background-color: #ff9;
-  background-image: url('../images/ico-warning.png');
-}
-
-/* Inline layout (forms, lists) ~~~~~~~~~~ */
-
-.gShortForm li {
-  float: left;
-  padding: .4em .5em;
-}
-
-.gShortForm legend,
-.gShortForm label {
-  display: none;
-}
-
-
-.gShortForm fieldset {
-  border: none;
-}
-
-.gShortForm input[type="text"] {
-  width: 10em;
-}
-
-#gHeader #gSearchForm {
-  float: right;
-  margin-right: 20px;
-}
-
-/* Credits ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-
-#gCredits li {
+#gFooter #gCredits li {
   display: inline;
 }
 
-#gCredits li:before {
+#gFooter #gCredits li:before {
   padding: 0 2px;
   content: "|";
 }
 
-#gCredits li.first:before {
+#gFooter #gCredits li.first:before {
   content: "";
 }
 
 /** *******************************************************************
- * 6) Navigation and menus
- ******************************************************************/
-
-.sf-menu li {
-  background: #bdd2ff url('../images/bg-buttons.png') 0 12% repeat-x;
-}
-
-.sf-menu li:hover,
-.sf-menu a:hover {
-  background: #cfdeff url('../images/bg-buttons.png') 0 50% repeat-x;
-}
-
-.sf-menu li:active,
-.sf-menu a:active {
-  background: #8ab9ff url('../images/bg-buttons.png') 0 87% repeat-x;
-}
-
-.sf-menu a:hover {
-  text-decoration: none;
-}
+ * 5) Navigation and menus
+ *********************************************************************/
 
-.sf-menu li li,
-.sf-menu li li:hover,
-.sf-menu li li a:hover,
-.sf-menu li li li,
-.sf-menu li li li:hover,
-.sf-menu li li li a:hover {
-  background: #bdd2ff;
+#gSiteMenu, 
+#gBreadcrumbs, 
+#gTagCloud ul {
+  font-size: 1.3em;
 }
 
 /* Login menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@@ -683,26 +692,11 @@ li.gError select {
 }
 
 /** *******************************************************************
- * 7) Generic styles
- ******************************************************************/
-
-.gButtonLink {
-  border: 1px solid #ccc;
-  display: block;
-  height: 24px;
-  line-height: 1.7em;
-  padding: 3px 1em 0;
-}
-
-.gButtonLink:hover {
-  background-color: #f3f3f3;
-}
-
-/** *******************************************************************
- * 8) Browser hacks
+ * 6) Browser hacks
  *********************************************************************/
 
-.gClearFix:after {
+#gSiteMenu:after,
+#gBreadcrumbs:after {
   clear: both;
   content: ".";
   display: block;
@@ -711,54 +705,39 @@ li.gError select {
 }
 
 /** *******************************************************************
- * 9) Debugging information
+ * 7) jQuery and jQuery UI
  *********************************************************************/
 
-div.gAnnotatedThemeBlock {
-  position: relative;
-  padding: 1em;
-  margin: 1em;
-  border: 1px solid #C00;
-  clear: both;
-}
+/* Restyle Superfish menus a bit ~~~~~~~~~ */
 
-div.gAnnotatedThemeBlock_album_top {
-  float: right;
+.sf-menu li {
+  background: #bdd2ff url('../images/bg-buttons.png') 0 12% repeat-x;
 }
 
-div.gAnnotatedThemeBlock_header_bottom {
-  float: right;
+.sf-menu li:hover,
+.sf-menu a:hover {
+  background: #cfdeff url('../images/bg-buttons.png') 0 50% repeat-x;
 }
 
-div.gAnnotatedThemeBlock div.title {
-  position: absolute;
-  top: -1em;
-  right: -1em;
-  border: 1px solid black;
-  background: #C00;
-  color: white;
-  text-align: left;
-  padding: 4px;
-  font-size: 110%;
-  -moz-border-radius: 5% 5% 5% 5%;
+.sf-menu li:active,
+.sf-menu a:active {
+  background: #8ab9ff url('../images/bg-buttons.png') 0 87% repeat-x;
 }
 
-/** *******************************************************************
- * 10) Ajax/DOM features
- *********************************************************************/
-
-#gDialog {
-  text-align: left;
+.sf-menu a:hover {
+  text-decoration: none;
 }
 
-#gDialog fieldset {
-  border: none;
+.sf-menu li li,
+.sf-menu li li:hover,
+.sf-menu li li a:hover,
+.sf-menu li li li,
+.sf-menu li li li:hover,
+.sf-menu li li li a:hover {
+  background: #bdd2ff;
 }
 
-#gDialog legend,
-#gDialog button.submit {
-  display: none;
-}
+/* Ajax loading indicator ~~~~~~~~~~~~~~~~ */
 
 .gLoadingLarge {
   background: #fff url('../images/loading-lg.gif') no-repeat center center;
@@ -770,11 +749,22 @@ div.gAnnotatedThemeBlock div.title {
   font-size: 0;
 }
 
-/** *******************************************************************
- * 11) jQuery UI
- *********************************************************************/
+/* jQuery UI Dialog ~~~~~~~~~~~~~~~~~~~~~~ */
+
+#gDialog {
+  font-size: 1.2em;
+  text-align: left;
+}
+
+#gDialog fieldset {
+  border: none;
+}
+
+#gDialog legend,
+#gDialog button.submit {
+  display: none;
+}
 
-/*dialog*/
 .ui-dialog {
   background: #f3f3f3 url('../images/bg-dialog.png') 0 0 repeat-x;
   color: #362b36;
@@ -789,8 +779,10 @@ div.gAnnotatedThemeBlock div.title {
 .ui-resizable .ui-resizable-handle {
   display: block;
 }
-body .ui-resizable-disabled .ui-resizable-handle { display: none; } /* use 'body' to make it more specific (css order) */
-body .ui-resizable-autohide .ui-resizable-handle { display: none; } /* use 'body' to make it more specific (css order) */
+body .ui-resizable-disabled .ui-resizable-handle,
+body .ui-resizable-autohide .ui-resizable-handle { 
+  display: none;
+}
 .ui-resizable-n {
   cursor: n-resize;
   height: 7px;
@@ -867,7 +859,8 @@ body .ui-resizable-autohide .ui-resizable-handle { display: none; } /* use 'body
   height: 11px;
   z-index: 100;
 }
-.ui-dialog-titlebar-close-hover, .ui-dialog-titlebar-close:hover {
+.ui-dialog-titlebar-close-hover, 
+.ui-dialog-titlebar-close:hover {
   background-position: 0 47%;
 }
 .ui-dialog-titlebar-close:active {