Updated CSS organization and headings, removed unused styles, added placeholders for a few styles, including gThumbnail. Simplified album grid loop, the thumbnail container markup for albums and items was almost identical, no need to repeat all of it. Switched album grid markup from <div> to <ul>. Updated element nesting in photo template.

3 files changed, 441 insertions, 490 deletions

diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index 0f12b789..cafe21de 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -4,23 +4,22 @@
  * @requires YUI reset, font, grids, and base CSS
  *
  * Sheet organization:
- * 1) Global element styles
- * 2) Text (fonts, headings, links)
- * 3) Layout containers
- * 4) Generic blocks
- * 5) Primary content blocks
- * 6) Navigation and menus
- * 7) Tables
- * 8) Forms, additional form CSS stored in css/forms.css (temporarily)
- * 9) General browser hacks
+ * 1) HTML elements (headings, links, lists, tables, forms)
+ * 2) Layout containers (view, header, content, sidebar, footer)
+ * 3) Generic content containers (item, block)
+ * 4) Specific content containers and blocks (albums, metadata, comments)
+ * 5) Navigation and menus (menus, breadcrumbs, pagination, tab cloud)
+ * 6) Specific text styles (different headings, font sizes, etc.)
+ * 7) Generic styles ()
+ * 8) Browser hacks (clear fix)
  */
 
- @import url('css/forms.css');
+ @import url('forms.css');
 
 /**
- ** **************************************************
- * 1) Global unique styles
- ** **************************************************
+ ** *******************************************************************
+ * 1) HTML elements (body, headings, links, lists, tables, forms)
+ ** *******************************************************************
  */
 
 /* ~~~~~~~~~ general elements ~~~~~~~~~~ */
@@ -28,33 +27,33 @@ body, html {
   background-color: #ccc;
 }
 
-/* ~~~~~~~~~ text elements ~~~~~~~~~~ */
+/* ~~~~~~~~~ text ~~~~~~~~~~ */
 h1 {
-	margin-top: 0px;
+  margin-top: 0;
 }
 a {
-	color: #6B8CB7;
-	text-decoration: none;
+  color: #6B8CB7;
+  text-decoration: none;
 }
 a:hover {
-	color: #FF3300;
-	text-decoration: underline;
+  color: #FF3300;
+  text-decoration: underline;
 }
 
-/* ~~~~~~~~~ list elements ~~~~~~~~~~ */
+/* ~~~~~~~~~ list ~~~~~~~~~~ */
 li {
-	list-style-type: none;
+  list-style-type: none;
 }
 
-/* ~~~~~~~~~ table elements ~~~~~~~~~~ */
+/* ~~~~~~~~~ table ~~~~~~~~~~ */
 caption {
-	text-align: left;
+  text-align: left;
 }
 th {
-	text-align: left;
+  text-align: left;
 }
 
-/* ~~~~~~~~~ form elements ~~~~~~~~~~ */
+/* ~~~~~~~~~ form ~~~~~~~~~~ */
 form {
 
 }
@@ -72,34 +71,32 @@ textarea {
 }
 
 /**
- ** **************************************************
- * 2) High level content containers (header, content, sidebar, footer)
- ** **************************************************
+ ** *******************************************************************
+ * 2) Layout containers (view, header, content, sidebar, footer)
+ ** *******************************************************************
  */
 
-/* ~~~~~ View Container ??? ~~~~~~ */
-.gView,
-.gAlbumView,
-.gItemView {
+/* ~~~~~ View Container ~~~~~~ */
+.gView {
   background-color: #fff;
   border: 1px solid #ccc;
   border-width: 0 1px 1px 1px;
 }
 
-/* ~~~~~~~~ high level content containers ~~~~~~~~ */
+/* ~~~ Layout Containers ~~~~~ */
 
 #gHeader {
-	position: relative;
-
+  position: relative;
 }
 
 #gContent {
   border-right: 1px solid #ccc;
   padding: 20px;
-	clear: both;
+  clear: both;
 }
 
 #gSidebar {
+  background-color: #fff;
   width: 18.4615em;
   padding: 1.5em 0 0 0;
 }
@@ -110,231 +107,117 @@ textarea {
 }
 
 /**
- ** **************************************************
- * 3) Header styles (logo, login, site menu, breadcrumbs, search)
- ** **************************************************
+ ** ****************************************************************
+ * 3) Generic content containers (item, block)
+ ** ****************************************************************
  */
-
-/* ~~~~~~~~ logo/title  ~~~~~~~~ */
-
-#gLogo {
-  float: left;
-  margin: 10px;
-}
-#gHeader h1 {
-	float: left;
-	margin: 20px 0 0 20px;
-}
-
-/* ~~~~~~~~ login menu ~~~~~~~~ */
-
-#gLoginMenu {
-  position: absolute;
-	top: 0px;
-	right: 13px;
-	border: 1px solid silver;
-	border-width: 0 1px 1px 1px;
-	padding: 5px;
-  text-align: right;
-}
-#gLoginMenu form {
-  margin-top: 5px;
-}
-#gLoginMenu label {
-  font-size: 0.8em;
-}
-#gLoginMenu input.text,
-#gLoginMenu input.password {
-  width: 80px;
-	padding: 0 0 .1em 0;
-}
-#gLoginMenu input.submit {
-	font-size: 0.9em;
-	font-weight: bold;
-}
-
-/* ~~~~~~~~ site menu  ~~~~~~~~ */
-
-#gSiteMenu {
-	height: 31px;
-  margin: 0;
+ 
+.gBlock {
+  margin: 0 1em 2.5em 0;
   padding: 0;
-  list-style-type: none;
-  clear: both;
-}
-#gSiteMenu li {
-  list-style-type: none;
-  float: left;
-  display: block;
-  width: 20%;
-	background: #E6EBF0;
-}
-#gSiteMenu li a {
-	color: #003366;
-	font-weight: bold;
-  height: 20px;
-  display: block;
-  text-align: center;
-	padding: 7px 7px 3px 7px;
-	background: url('images/bg_sitemenu.png') repeat-x;
-	margin-left: 1px;
-	border: 1px solid #336699;
-	border-width: 0 1px 1px 0;
-	text-decoration: none;
-	letter-spacing: .1em;
-}
-#gSiteMenu li a:hover {
-	color: #FF3300;
-	background: url('images/bg_sitemenu_hover.png');
 }
-#gSiteMenu li a.active {
-	background: #DCE6EF;
-	border-color: #DCE6EF;
-	color: #FF3300;
+.gBlockHeader {
+  background-color: #E8E8E8;
+  padding: .3em .4em .3em .4em;
+  height: 1.5em;
+  margin: 0 !important;
+  position: relative;
+  cursor: move;
 }
-
-/* ~~~~~~~~~ breadcrumbs ~~~~~~~~~~ */
-
-#gBreadcrumbs {
-	border-bottom: 1px solid silver;
+.gBlockHeader h2 {
   margin: 0;
-  padding: 0 0 0 14px;
-  height: 28px;
-  list-style-type: none;
-}
-#gBreadcrumbs li {
-  list-style-type: none;
-  background: transparent url(images/icon_breadcrumb_separator.gif) no-repeat scroll left center;
-  padding: 0 0 0 10px;
   float: left;
+  font-size: 1.1em;
+  background-image: url('images/ico_dragable.png');
+  background-repeat: no-repeat;
+  padding-left: 12px;
 }
-#gBreadcrumbs li.root {
-  background: transparent;
-  padding: 0;
+.gBlockHeader .minimize {
+  position: absolute;
+  top: .45em;
+  right: .3em;
+  width: 16px;
+  height: 16px;
+  background-image: url('images/minimize.png');
 }
-#gBreadcrumbs li a,
-#gBreadcrumbs li span {
-  padding: 6px 6px 6px 6px;
-  display: block;
+.gBlockHeader .minimize:hover {
+  background-image: url('images/minimize_active.png');
 }
-#gBreadcrumbs li.active span {
-  font-weight: bold;
+.gBlockContent {
+  margin: .5em .5em 0 .5em;
 }
-
-/* ~~~~~~~~~ search form ~~~~~~~~~~ */
-
-#gSearchForm {
-	position: absolute;
-	right: 13px;
-	top: 103px;
+table.gBlockContent {
+  width: 214px;
+  table-layout: fixed;
 }
-#gSearchForm input.text {
-	padding: 1px;
+table.gBlockContent th {
+  padding: .3em .3em .3em 0;
 }
-#gSearchForm input.submit {
-	height: 20px;
+table.gBlockContent td {
+  padding: .3em 0 .3em .3em;
 }
 
 /**
- ** **************************************************
- * 4) Generic styles
- ** **************************************************
+ ** ****************************************************************
+ * 4) Specific content containers and blocks (albums, metadata, comments)
+ ** ****************************************************************
  */
 
-.buttonlink {
-	border: 1px solid lightgray;
-	padding: 5px;
-}
-.buttonlink:hover {
-	background-color: #F3F3F3;
-}
-.understate {
-	color: silver;
+ /* ~~~~~~~~ logo  ~~~~~~~~ */
+
+#gLogo {
+  float: left;
+  margin: 10px;
 }
+ 
+ .gThumbnail {
+ 
+ }
 
+/* ~~~~~~~~~ album ~~~~~~~~~~ */
 
-/*
-.gBlock {
-	margin: 0 1em 1.5em 0;
-	border: 1px solid #336699;
-	padding: 0;
-}
-.gBlockHeader {
-	background-color: #E8E8E8;
-	padding: .3em;
-	height: 1.5em;
-	border-bottom: 1px solid #6B8CB7;
-	margin: 0 !important;
-}
-.gBlockHeader h2 {
-	color: #003366;
-	margin: 0;
-	float: left;
-	font-size: 1.1em;
+#gAlbumGridHeader {
+  height: 40px;
+  position: relative;
 }
-.gBlockHeader .minimize {
-	float: right;
+#gAlbumGridHeader h1 {
+  display: inline;
 }
-.gBlockContent {
-	margin: .3em;
+#gAlbumGridHeader span {
+  padding-left: 10px;
 }
-*/
 
-.gBlock {
-	margin: 0 1em 2.5em 0;
-	padding: 0;
-}
-.gBlockHeader {
-	background-color: #E8E8E8;
-	padding: .3em .4em .3em .4em;
-	height: 1.5em;
-	margin: 0 !important;
-	position: relative;
-	cursor: move;
-}
-.gBlockHeader h2 {
-	margin: 0;
-	float: left;
-	font-size: 1.1em;
-	background-image: url('images/ico_dragable.png');
-	background-repeat: no-repeat;
-	padding-left: 12px;
-}
-.gBlockHeader .minimize {
-	position: absolute;
-	top: .45em;
-	right: .3em;
-	width: 16px;
-	height: 16px;
-	background-image: url('images/minimize.png');
+#gAlbumGrid {
+  margin: 0;
 }
-.gBlockHeader .minimize:hover {
-	background-image: url('images/minimize_active.png');
+#gAlbumGrid .gItem {
+  float: left;
+  text-align: center;
+  border: 1px lightgray solid;
+  list-style: none;
+  margin: 0 14px 10px 0;
+  padding: 5px 0 5px 0;
 }
-.gBlockContent {
-	margin: .5em .5em 0 .5em;
+
+#gAlbumGrid .first {
+  clear: left;
 }
-table.gBlockContent {
-	width: 214px;
-	table-layout: fixed;
+
+.gAlbum {
+  background-color: #D4DAFF;
 }
-table.gBlockContent th {
-	padding: .3em .3em .3em 0;
+.gAlbum h2 {
+  color: #006;
 }
-table.gBlockContent td {
-	padding: .3em 0 .3em .3em;
+
+.gItem h2 {
+  margin: 5px 0 5px 0;
 }
 
-/**
- ** **************************************************
- * 5) Content blocks - inherits from Generic blocks
- ** **************************************************
- */
+ /* ~~~~ individual photo ~~~~~~~ */
 
 #gItem {
-  width: 500px;
-	margin-left: auto;
-  margin-right: auto;
+  margin: 0;
 }
 #gItem a.buttonlink {
   float: right;
@@ -348,7 +231,7 @@ table.gBlockContent td {
 #gItem h1 {
   margin: 10px 0 10px 0;
 }
-
+ 
 /* ~~~~~~~~~ metadata ~~~~~~~~~~ */
 
 table.gMetadata {
@@ -356,28 +239,12 @@ table.gMetadata {
 }
 table.gMetadata td,
 table.gMetadata th {
-	border: 0;
+  border: 0;
 }
 table.gMetadata td.toggle {
-	text-align: right;
-}
-
-/* ~~~~~~~~~ upload ~~~~~~~~~~ */
-
-#gUploadForm .gBreadcrumbs li input, #gUploadForm .gBreadcrumbs li select {
-  width: 140px;
-  margin-left: 5px;
+  text-align: right;
 }
 
-/* ~~~~ individual photo ~~~~~~~ */
-
-.gPhotoView img {
-  width: 400px;
-  height: 300px;
-  margin-right: auto;
-  margin-left: auto;
-  margin-bottom: 20px;
-}
 
 /* ~~~~~~~~~ comments ~~~~~~~~~~ */
 
@@ -404,259 +271,351 @@ table.gMetadata td.toggle {
   padding: 8px;
 }
 
-/* ~~~~~~~~~ album ~~~~~~~~~~ */
+/* ~~~~~~~~~ Status messages ~~~~~~~~~~ */
+
+#gStatusMessages {
 
-#gAlbumGridHeader {
-	height: 40px;
-	position: relative;
 }
-#gAlbumGridHeader h1 {
-	display: inline;
+.gError {
+
 }
-#gAlbumGridHeader span {
-	padding-left: 10px;
+.gWarning {
+
 }
-#gSlideshowLink {
-	position: absolute;
-	top: 0px;
-	right: 0px;
+.gSuccess {
+
 }
+.gInfo {
 
-#gAlbumGrid .gItemContainer,
-#gAlbumGrid .gAlbumContainer {
-	float: left;
-	text-align: center;
-	border: 1px lightgray solid;
-	margin: 0px 0px 10px 1.49%;
-	padding: 5px 0px 5px 0px;
 }
-#gAlbumGrid .first {
-	margin: 0px 0px 10px 0px;
+ 
+/* ~~~~~~~~~ search form ~~~~~~~~~~ */
+
+#gSearchForm {
+  position: absolute;
+  right: 13px;
+  top: 103px;
+}
+#gSearchForm input.text {
+  padding: 1px;
+}
+#gSearchForm input.submit {
+  height: 20px;
+}
+ 
+/* ~~~~~~~~~ comment form ~~~~~~~~~~ */
+ 
+ #gCommentAdd {
+  width: 500px;
 }
 
-.gAlbum {
-	background-color: #D4DAFF;
+/* ----------- upload ----------------- */
+
+#gUploadForm .gBreadcrumbs li input, #gUploadForm .gBreadcrumbs li select {
+  width: 140px;
+  margin-left: 5px;
 }
-.gAlbum h2 {
-	color: #000066;
+#gUploadForm-queue {
+  width: 500px;
+}
+#gUploadForm-queue td, #gUploadForm-queue th {
+  text-align: left;
+  border-color: #e7e7e7;
+}
+#gUploadForm-queue caption {
+  display: none;
+}
+#gUploadForm-queue thead th {
+  text-align: center;
+  border-bottom: 2px solid #000;
+}
+#gUploadForm-queue thead th, #gUploadForm-queue thead td {
+  background-color: #e7e7e7;
+}
+#gUploadForm-queue tfoot td {
+  border-top: 2px solid #000;
+}
+#gUploadForm-queue .filesize {
+  width: 60px;
+}
+#gUploadForm-queue td.filesize {
+  text-align: right;
+}
+#gUploadForm-queue tfoot td.filesize {
+  color: #ccc;
+}
+#gUploadForm-queue .action {
+  width: 40px;
+}
+#gUploadForm-button {
+  width: 130px;
+  margin-left: 370px;
+}
+
+/**
+ ** *******************************************************************
+ * 5) Navigation and menus (menus, breadcrumbs, pagination, tab cloud)
+ ** *******************************************************************
+ */
+
+/* ~~~~~~~~ login menu ~~~~~~~~ */
+
+#gLoginMenu {
+  position: absolute;
+  top: 0;
+  right: 13px;
+  border: 1px solid silver;
+  border-width: 0 1px 1px 1px;
+  padding: 5px;
+  text-align: right;
+}
+#gLoginMenu form {
+  margin-top: 5px;
+}
+#gLoginMenu label {
+  font-size: 0.8em;
+}
+#gLoginMenu input.text,
+#gLoginMenu input.password {
+  width: 80px;
+  padding: 0 0 .1em 0;
+}
+#gLoginMenu input.submit {
+  font-size: 0.9em;
+  font-weight: bold;
+}
+
+/* ~~~~~~~~ site menu  ~~~~~~~~ */
+
+#gSiteMenu {
+  height: 31px;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  clear: both;
+}
+#gSiteMenu li {
+  list-style-type: none;
+  float: left;
+  display: block;
+  width: 20%;
+  background: #E6EBF0;
+}
+#gSiteMenu li a {
+  color: #003366;
+  font-weight: bold;
+  height: 20px;
+  display: block;
+  text-align: center;
+  padding: 7px 7px 3px 7px;
+  background: url('images/bg_sitemenu.png') repeat-x;
+  margin-left: 1px;
+  border: 1px solid #336699;
+  border-width: 0 1px 1px 0;
+  text-decoration: none;
+  letter-spacing: .1em;
+}
+#gSiteMenu li a:hover {
+  color: #FF3300;
+  background: url('images/bg_sitemenu_hover.png');
+}
+#gSiteMenu li a.active {
+  background: #DCE6EF;
+  border-color: #DCE6EF;
+  color: #FF3300;
 }
 
-.gItemContainer h2,
-.gAlbumContainer h2 {
-	margin: 5px 0px 5px 0px;
+ #gSlideshowLink {
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 
+/* ~~~~~~~~~ breadcrumbs ~~~~~~~~~~ */
+
+#gBreadcrumbs {
+  border-bottom: 1px solid silver;
+  margin: 0;
+  padding: 0 0 0 14px;
+  height: 28px;
+  list-style-type: none;
+}
+#gBreadcrumbs li {
+  list-style-type: none;
+  background: transparent url(images/icon_breadcrumb_separator.gif) no-repeat scroll left center;
+  padding: 0 0 0 10px;
+  float: left;
+}
+#gBreadcrumbs li.root {
+  background: transparent;
+  padding: 0;
+}
+#gBreadcrumbs li a,
+#gBreadcrumbs li span {
+  padding: 6px 6px 6px 6px;
+  display: block;
+}
+#gBreadcrumbs li.active span {
+  font-weight: bold;
+}
 
 /* ~~~~~~~~~ tag cloud ~~~~~~~~~~ */
 
 #gTags ul {
-	text-align: justify;
-	padding: 0;
+  text-align: justify;
+  padding: 0;
 }
 #gTags ul li {
-	text-align: justify;
-	display: inline;
+  text-align: justify;
+  display: inline;
 }
 #gTags ul li a {
-	text-decoration: none;
+  text-decoration: none;
 }
 #gTags ul li a.size0 {
-	font-size: 100%;
-	font-weight: 100;
-	color: #99CCFF;
+  font-size: 100%;
+  font-weight: 100;
+  color: #99CCFF;
 }
 #gTags ul li a.size1 {
-	font-size: 110%;
-	font-weight: 300;
-	color: #6699FF;
+  font-size: 110%;
+  font-weight: 300;
+  color: #6699FF;
 }
 #gTags ul li a.size2 {
-	font-size: 120%;
-	font-weight: 500;
-	color: #6699CC;
+  font-size: 120%;
+  font-weight: 500;
+  color: #6699CC;
 }
 #gTags ul li a.size3 {
-	font-size: 130%;
-	font-weight: 700;
-	color: #336699;
+  font-size: 130%;
+  font-weight: 700;
+  color: #336699;
 }
 #gTags ul li a.size4 {
-	font-size: 140%;
-	font-weight: 900;
-	color: #0E2B52;
+  font-size: 140%;
+  font-weight: 900;
+  color: #0E2B52;
 }
 #gTags ul li a:hover {
-	color: #FF3300;
-	text-decoration: underline;
+  color: #FF3300;
+  text-decoration: underline;
 }
 #gTags form {
-	margin-top: 10px;
+  margin-top: 10px;
 }
 
 /* ~~~~~~~~~ tags ~~~~~~~~~~ */
 
 #gTags ul {
-	margin-left: .5em;
+  margin-left: .5em;
 }
 #gTags li {
-	list-style-image: url('images/bullet_tag.png');
-	margin-bottom: .3em;
+  list-style-image: url('images/bullet_tag.png');
+  margin-bottom: .3em;
 }
 
-/* ~~~~~~~~~ album tree ~~~~~~~~~~ */
-
-#gAlbumTree {
-	border: 1px solid lightgray;
-	margin: 20px 0 20px 0;
-	padding: 5px;
-}
-#gAlbumTree #gTreeContainer {
-	border: 1px solid lightgray;
-	padding: 0 0 0 5px;
-}
-
-
-/**
- ** **************************************************
- * 6) Navigation and menus
- ** **************************************************
- */
-
-
-
 /* ~~~~~~~~~ pagination ~~~~~~~~~~ */
 
 #gPagination {
-	clear: both;
-	padding: 10px 0px 0px 0px;
-	text-align: center;
+  clear: both;
+  padding: 10px 0 0 0;
+  text-align: center;
 }
 #gPagination a,
 #gPagination span {
-	border: 1px solid lightgray;
-	padding: 5px;
-	background-repeat: no-repeat;
+  border: 1px solid lightgray;
+  padding: 5px;
+  background-repeat: no-repeat;
 }
 #gPagination a:hover {
-	background-color: #F3F3F3;
+  background-color: #F3F3F3;
 }
 #gPagination .first {
-	background-image: url('images/first.png');
-	background-position: left;
-	padding-left: 20px;
+  background-image: url('images/first.png');
+  background-position: left;
+  padding-left: 20px;
 }
 #gPagination .first_inactive {
-	background-image: url('images/first_inactive.png');
-	background-position: left;
-	padding-left: 20px;
+  background-image: url('images/first_inactive.png');
+  background-position: left;
+  padding-left: 20px;
 }
 #gPagination .previous {
-	background-image: url('images/previous.png');
-	background-position: left;
-	padding-left: 17px;
+  background-image: url('images/previous.png');
+  background-position: left;
+  padding-left: 17px;
 }
 #gPagination .previous_inactive {
-	background-image: url('images/previous_inactive.png');
-	background-position: left;
-	padding-left: 17px;
+  background-image: url('images/previous_inactive.png');
+  background-position: left;
+  padding-left: 17px;
 }
 #gPagination .next {
-	background-image: url('images/next.png');
-	background-position: right;
-	padding-right: 17px;
+  background-image: url('images/next.png');
+  background-position: right;
+  padding-right: 17px;
 }
 #gPagination .next_inactive {
-	background-image: url('images/next_inactive.png');
-	background-position: right;
-	padding-right: 17px;
+  background-image: url('images/next_inactive.png');
+  background-position: right;
+  padding-right: 17px;
 }
 #gPagination .last {
-	background-image: url('images/last.png');
-	background-position: right;
-	padding-right: 20px;
+  background-image: url('images/last.png');
+  background-position: right;
+  padding-right: 20px;
 }
 #gPagination .last_inactive {
-	background-image: url('images/last_inactive.png');
-	background-position: right;
-	padding-right: 20px;
-}
-
-
-/**
- ** **************************************************
- * 7) Tables
- ** **************************************************
- */
-
-
-/**
- ** **************************************************
- * 8) Forms
- ** **************************************************
- */
-
-#gCommentAdd {
-  width: 500px;
-}
-
-/* ----------- upload ----------------- */
-
-#gUploadForm .gBreadcrumbs li input, #gUploadForm .gBreadcrumbs li select {
-  width: 140px;
-  margin-left: 5px;
-}
-
-#gUploadForm-queue {
-  width: 500px;
-}
-
-#gUploadForm-queue td, #gUploadForm-queue th {
-  text-align: left;
-  border-color: #e7e7e7;
+  background-image: url('images/last_inactive.png');
+  background-position: right;
+  padding-right: 20px;
 }
 
-#gUploadForm-queue caption {
-  display: none;
-}
+/* ~~~~~~~~~ album tree ~~~~~~~~~~ */
 
-#gUploadForm-queue thead th {
-  text-align: center;
-  border-bottom: 2px solid #000;
+#gAlbumTree {
+  border: 1px solid lightgray;
+  margin: 20px 0 20px 0;
+  padding: 5px;
 }
-
-#gUploadForm-queue thead th, #gUploadForm-queue thead td {
-  background-color: #e7e7e7;
+#gAlbumTree #gTreeContainer {
+  border: 1px solid lightgray;
+  padding: 0 0 0 5px;
 }
 
-#gUploadForm-queue tfoot td {
-  border-top: 2px solid #000;
-}
+/**
+ ** *******************************************************************
+ * 6) Specific text styles (different headings, font sizes, etc.)
+ ** *******************************************************************
+ */
 
-#gUploadForm-queue .filesize {
-  width: 60px;
+#gHeader h1 {
+  float: left;
+  margin: 20px 0 0 20px;
 }
 
-#gUploadForm-queue td.filesize {
-  text-align: right;
-}
+/**
+ ** *******************************************************************
+ * 7) Generic styles
+ ** *******************************************************************
+ */
 
-#gUploadForm-queue tfoot td.filesize {
-  color: #ccc;
+.buttonlink {
+  border: 1px solid lightgray;
+  padding: 5px;
 }
-
-#gUploadForm-queue .action {
-  width: 40px;
+.buttonlink:hover {
+  background-color: #F3F3F3;
 }
-
-#gUploadForm-button {
-  width: 130px;
-  margin-left: 370px;
+.understate {
+  color: silver;
 }
 
 /**
- ** **************************************************
- * 9) Browser hacks
- ** **************************************************
+ ** *******************************************************************
+ * 8) Browser hacks
+ ** *******************************************************************
  */
 
 /* Keep containers holding only floated elements from collapsing in Safari */
diff --git a/themes/default/views/album.html.php b/themes/default/views/album.html.php
index ba995276..0d181536 100644
--- a/themes/default/views/album.html.php
+++ b/themes/default/views/album.html.php
@@ -1,39 +1,32 @@
 <? defined("SYSPATH") or die("No direct script access."); ?>
-<div id="gAlbumGrid" class="gAlbumView">
   <div id="gAlbumGridHeader">
     <h1><?= $item->title ?></h1>
     <span class="understate"><?= $item->description ?></span>
     <a href="#" id="gSlideshowLink" class="buttonlink">Slideshow</a>
   </div>
 
+  <ul id="gAlbumGrid">
   <? foreach ($children as $i => $child): ?>
-  <? if ($child->is_album()): ?>
-  <div class="gAlbumContainer gAlbum <?= text::alternate("first", "", "") ?>">
-    <a href="<?= url::site("album/{$child->id}") ?>">
-      <img id="photo-id-<?= $child->id ?>" class="photo"
-           alt="photo" src="<?= $child->thumbnail_url() ?>"
-           width="<?= $child->thumbnail_width ?>"
-           height="<?= $child->thumbnail_height ?>" />
-    </a>
-    <h2>Album title</h2>
-    <ul class="gMetadata">
-      <li>Views: 321</li>
-      <li>By: <a href="#">username</a></li>
-    </ul>
-  </div>
-  <? else: ?>
-  <div class="gItemContainer <?= text::alternate("first", "", "") ?>">
-    <a href="<?= url::site("photo/{$child->id}") ?>">
-      <img id="photo-id-<?= $child->id ?>" class="photo"
-           alt="photo" src="<?= $child->thumbnail_url() ?>"
-           width="<?= $child->thumbnail_width ?>"
-           height="<?= $child->thumbnail_height ?>" />
-    </a>
-    <h2><?= $child->title ?></h2>
-  </div>
-  <? endif ?>
+    <? $album_class = ""; ?>
+    <? if ($child->is_album()): ?>
+      <? $album_class = "gAlbum "; ?>
+    <? endif ?>
+    <li class="gItem <?= $album_class . text::alternate("first", "", "") ?>">
+      <a href="<?= url::site("photo/{$child->id}") ?>">
+        <img id="gPhotoID-<?= $child->id ?>" class="gThumbnail"
+             alt="photo" src="<?= $child->thumbnail_url() ?>"
+             width="<?= $child->thumbnail_width ?>"
+             height="<?= $child->thumbnail_height ?>" />
+      </a>
+      <h2><?= $child->title ?></h2>
+      <ul class="gMetadata">
+        <li>Views: 321</li>
+        <li>By: <a href="#">username</a></li>
+      </ul>
+    </li>  
   <? endforeach ?>
-
+  </ul>
+  
   <div id="gPagination">
     Items 1-10 of 34
     <span class="first_inactive">first</span>
@@ -41,4 +34,3 @@
     <a href="#" class="next">next</a>
     <a href="#" class="last">last</a>
   </div>
-</div>
diff --git a/themes/default/views/photo.html.php b/themes/default/views/photo.html.php
index 74e01050..9448b51e 100644
--- a/themes/default/views/photo.html.php
+++ b/themes/default/views/photo.html.php
@@ -3,53 +3,53 @@
   <a href="" class="buttonlink">Full size (1024x768)</a>
   <a href="" class="buttonlink">Slideshow</a>
 
-  <img id="photo-id-<?= $item->id ?>" alt="photo" src="<?= $item->resize_url() ?>"
+  <img id="gPhotoID-<?= $item->id ?>" alt="photo" src="<?= $item->resize_url() ?>"
        width="<?= $item->resize_width ?>"
        height="<?= $item->resize_height ?>" />
   <h1><?= $item->title ?></h1>
-  <p><?= $item->description ?></p>
+  <div><?= $item->description ?></div>
+  
+  <div id="gComments">
+    <h2>Comments</h2>
+  
+    <ul id="gCommentThread">
+      <li id="gComment-1" class="gComment odd">
+        <p><a href="#" class="gAuthor">Andy</a> said 2 hours ago <span class="understate">(October 23, 2008 11:30am)</span></p>
+        <div>
+          Lorem ipsum dolor sit amet.
+        </div>
+      </li>
+      <li id="gComment-2" class="gComment even">
+        <p>
+          <a href="#" class="gAuthor">Other user</a> said 30 minutes ago <span class="understate">(October 23, 2008 1:00pm)</span>
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
+          dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
+          was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
+          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+        </div>
+      </li>
+    </ul>
+  
+    <form id="gCommentAdd" class="gExpandedForm">
+      <fieldset>
+        <legend>Add comment</legend>
+        <div class="row">
+          <label for="gCommentAuthor">Your Name</label>
+          <input type="text" id="gCommentAuthor" class="text" />
+        </div>
+        <div>
+          <label for="gCommentEmail">Your Email (not displayed)</label>
+          <input type="text" id="gCommentEmail" class="text" />
+        </div>
+        <div class="row">
+          <label for="gCommentText">Comment</label>
+          <textarea id="gCommentText"></textarea>
+        </div>
+        <input type="submit" class="button" value="Add" />
+      </fieldset>
+    </form>
+  </div><!-- END #gComments -->
 </div>
-
-<div id="gComments">
-  <h2>Comments</h2>
-
-  <ul id="gCommentThread">
-    <li id="gComment-1" class="gComment odd">
-      <p><a href="#" class="gAuthor">Andy</a> said 2 hours ago <span class="understate">(October 23, 2008 11:30am)</span></p>
-      <div>
-        Lorem ipsum dolor sit amet.
-      </div>
-    </li>
-    <li id="gComment-2" class="gComment even">
-      <p>
-        <a href="#" class="gAuthor">Other user</a> said 30 minutes ago <span class="understate">(October 23, 2008 1:00pm)</span>
-      </p>
-      <div>
-        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
-        dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
-        was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
-        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-      </div>
-    </li>
-  </ul>
-
-  <form id="gCommentAdd" class="gExpandedForm">
-    <fieldset>
-      <legend>Add comment</legend>
-      <div class="row">
-        <label for="gCommentAuthor">Your Name</label>
-        <input type="text" id="gCommentAuthor" class="text" />
-      </div>
-      <div>
-        <label for="gCommentEmail">Your Email (not displayed)</label>
-        <input type="text" id="gCommentEmail" class="text" />
-      </div>
-      <div class="row">
-        <label for="gCommentText">Comment</label>
-        <textarea id="gCommentText"></textarea>
-      </div>
-      <input type="submit" class="button" value="Add" />
-    </fieldset>
-  </form>
-</div><!-- END #gComments -->