Major updates to form CSS. Now using unordered lists for layouts. Added .gInline for forms like login, search, tags. Updated comment, login, search, and tagging forms. All form styles live in screen.css now. Still a lot to do, but this is a good foundation.

7 files changed, 380 insertions, 357 deletions

diff --git a/modules/comment/views/comment_form.html.php b/modules/comment/views/comment_form.html.php
index 163fd180..1561035f 100644
--- a/modules/comment/views/comment_form.html.php
+++ b/modules/comment/views/comment_form.html.php
@@ -1,21 +1,25 @@
 <? defined("SYSPATH") or die("No direct script access."); ?>
-<form id="gCommentAdd" class="gExpandedForm">
+<form id="gCommentAdd">
   <fieldset>
     <legend>Add comment</legend>
-    <div class="row">
-      <label for="gCommentAuthor"><?= _("Your Name") ?></label>
-      <input type="text" name="author" id="gCommentAuthor" class="text" />
-    </div>
-    <div class="row">
-      <label for="gCommentEmail"><?= _("Your Email (not displayed)") ?></label>
-      <input type="text" name="email" id="gCommentEmail" class="text" />
-    </div>
-    <div class="row">
-      <label for="gCommentText"><?= _("Comment") ?></label>
-      <textarea name="text" id="gCommentText"></textarea>
-    </div>
-    <input type="hidden" id="gItemId" name="item_id" value="<?= $item_id ?>" />
-    <input type="submit" id="gCommentSubmit" value="<?= _("Add") ?>" />
+    <ul>
+      <li>
+        <label for="gCommentAuthor"><?= _("Your Name") ?></label>
+        <input type="text" name="author" id="gCommentAuthor" />
+      </li>
+      <li>
+        <label for="gCommentEmail"><?= _("Your Email (not displayed)") ?></label>
+        <input type="text" name="email" id="gCommentEmail" />
+      </li>
+      <li>
+        <label for="gCommentText"><?= _("Comment") ?></label>
+        <textarea name="text" id="gCommentText"></textarea>
+      </li>
+      <li>
+        <input type="hidden" id="gItemId" name="item_id" value="<?= $item_id ?>" />
+        <input type="submit" id="gCommentSubmit" value="<?= _("Add") ?>" />
+      </li>
+    </ul>
   </fieldset>
 </form>
 
diff --git a/modules/comment/views/comment_list.html.php b/modules/comment/views/comment_list.html.php
index 1545a106..ea824597 100644
--- a/modules/comment/views/comment_list.html.php
+++ b/modules/comment/views/comment_list.html.php
@@ -1,11 +1,11 @@
 <? defined("SYSPATH") or die("No direct script access."); ?>
 <ul id="gCommentThread">
   <? foreach (array_reverse($comments) as $index => $comment): ?>
-  <li id="gComment-<?= $index; ?>" class="gComment <?= $index % 2 ? 'odd' : 'even' ?>">
+  <li id="gComment-<?= $index; ?>" class="gComment <?= $index % 2 ? 'gOdd' : 'gEven' ?>">
     <p>
       <a href="#" class="gAuthor"><?= $comment->author ?></a>
       <?= comment::format_elapsed_time($comment->datetime) ?>,
-      <span class="understate"><?= strftime('%c', $comment->datetime) ?></span>
+      <span class="gUnderstate"><?= strftime('%c', $comment->datetime) ?></span>
     </p>
     <div>
       <?= $comment->text ?>
diff --git a/modules/tags/views/tags_block.html.php b/modules/tags/views/tags_block.html.php
index 40427ee9..f23874ff 100644
--- a/modules/tags/views/tags_block.html.php
+++ b/modules/tags/views/tags_block.html.php
@@ -38,7 +38,9 @@
 </ul>
 
 <form id="gAddTag">
-  <input type="text" class="text" value="add new tags ..." id="newtags" />
-  <input type="submit" class="submit" value="add" />
-  <label for="newtags" class="understate">(separated by commas)</label>
+  <ul class="gInline">
+    <li><input type="text" class="text" value="add new tags..." id="gNewTags" /></li>
+    <li class="gNoLabels"><input type="submit" value="add" /></li>
+  </ul>
+  <label for="gNewTags" class="gUnderState">(separated by commas)</label>
 </form>
diff --git a/modules/user/views/login.html.php b/modules/user/views/login.html.php
index fb770f3f..fa7dbc9b 100644
--- a/modules/user/views/login.html.php
+++ b/modules/user/views/login.html.php
@@ -2,22 +2,20 @@
 <form id="gLogin" action="<?= url::site("login/process") ?>">
   <fieldset>
     <legend>Login</legend>
-    <ul>
+    <ul class="gInline">
       <li>
-        <label for="username">Username</label>
+        <label for="gUsername">Username</label>
         <input type="text" id="gUsername" />
       </li>
       <li>
-        <label for="password">Password</label>
+        <label for="gPassword">Password</label>
         <input type="password" id="gPassword" />
       </li>
       <li>
-        <input type="submit" class="submit" value="<?= _("Login")?>" />
+        <input type="submit" value="<?= _("Login")?>" />
       </li>
     </ul>
-  </fieldset>
-  <fieldset>
-    <div class="gStatus gError gDisplayNone" id="gLoginMessage">
+    <div id="gLoginMessage" class="gStatus gError gDisplayNone">
     </div>
   </fieldset>
 </form>
diff --git a/themes/default/css/forms.css b/themes/default/css/forms.css
deleted file mode 100644
index 03f6527a..00000000
--- a/themes/default/css/forms.css
+++ /dev/null
@@ -1,191 +0,0 @@
-/** *************************************************************************
- * Base form styles
- */
-
-/* Zero out padding and margin, adjust where needed later */
-form, fieldset, label, input, .checkbox, textarea, select, option, form div {
-        margin: 0;
-        padding: 0;
-}
-fieldset {
-        margin: 1em 0;
-        padding: 1em;
-        border: 1px solid #999;
-}
-legend {
-        font-weight: bold;
-        margin: 0 2% .5em 0;
-        padding: .2em .5em;
-}
-input.text, textarea, select, input.password {
-        border: 1px solid #666;
-        border-right: 1px solid #ccc;
-        border-bottom: 1px solid #ccc;
-}
-option {
-        float: none;
-        clear: both;
-        margin-right: 2em;
-}
-input.radio, input.checkbox {
-        margin-right: .5em;
-}
-/* Create a bit of padding for text inputs and selects */
-input.text, input.password, input.button, textarea, select {
-        padding: .2em;
-}
-input.button {
-        margin-right: 1em;
-        padding: .2em .6em;
-}
-.readonly {
-        color: #999;
-        background: #e7e7e7;
-}
-/* standard widths */
-.w12 { width: 12% }
-.w25 { width: 25% }
-.w37 { width: 37% }
-.w50 { width: 50% }
-.w62 { width: 62% }
-.w75 { width: 75% }
-.w87 { width: 87% }
-.wauto { width: auto; }
-
-
-/** *************************************************************************
- * Provide proper vertical alignment for expanded and compact forms
- */
-
-.gExpandedForm .row div,
-.gCompactForm div div label {
-        padding-top: .5em;
-}
-
-
-/** *************************************************************************
- * Expanded form layout styles
- */
-
-.gExpandedForm { overflow: hidden; }
-.gExpandedForm .row {
-        padding: .3em 0;
-        white-space: nowrap;
-        overflow: hidden;
-        clear: both;
-}
-.gExpandedForm label,
-.gExpandedForm .row p,
-.gExpandedForm .row div,
-.gExpandedForm input,
-.gExpandedForm select,
-.gExpandedForm textarea {
-        float: left;
-}
-/* change column widths for labels and inputs */
-.gExpandedForm .text, textarea { width: 80%; }
-.gExpandedForm label, .gExpandedForm .row p {
-        width: 15%;
-        margin: .5em 1em .5em 0;
-        text-align: right;
-        white-space: normal;
-        overflow: hidden;
-}
-.gExpandedForm .row div {
-        white-space: nowrap;
-        overflow: hidden;
-        clear: none;
-}
-/* labels and form inputs inside of divs should not float */
-.gExpandedForm .row div * {
-        float: none;
-        clear: none;
-}
-.expanded input.checkbox,
-.expanded input.radio,
-.expanded select {
-        margin-top: 1.5em;
-}
-.gExpandedForm div div input {
-        margin-right: 0;
-}
-
-
-/** *************************************************************************
- * Compact form layout styles
- */
-
-.gCompactForm { overflow: hidden; }
-.gCompactForm div,
-.gCompactForm label,
-.gCompactForm input,
-.gCompactForm select,
-.gCompactForm textarea {
-        float: left;
-}
-.gCompactForm input.text,
-.gCompactForm select,
-.gCompactForm textarea {
-        /* set width: auto to allow form element content
-        to set width otherwise 90% is a good setting */
-        width: 90%; /* determines space between form elements */
-}
-/* Increase width of elements in twoper
-   columns to provide better alignment */
-.gCompactForm .twoper input.text,
-.gCompactForm .twoper select,
-.gCompactForm .twoper textarea {
-        width: 95%;
-}
-.gCompactForm div {
-        width: 99%;
-        margin-bottom: 1em; /* space between rows */
-        clear: both;
-}
-/* Nested divs shouldn't clear floated elements */
-/* keeps nested divs from compounding margin value */
-.gCompactForm div div {
-        margin-bottom: 0;
-        clear: none;
-}
-/* Nested div label contents should determine their own width */
-.gCompactForm div div label {
-        width: auto;
-        white-space: normal;
-        /* unccomment to stack form inputs inside a row */
-        /* clear: left; */
-        margin-right: 1em;
-}
-/* Fix paragraph white space in Safari */
-.gCompactForm div div p {
-        margin: 0;
-        padding: 0;
-}
-
-/* Compact layout - Set item width within rows */
-.oneper label, .oneper div     { width: 99%; } /* can't be 100%, IE bug */
-.twoper label, .twoper div     { width: 46%; }
-.threeper label, .threeper div { width: 32%; }
-.fourper label, .fourper div   { width: 23%; }
-.fiveper label, .fiveper div   { width: 19%; }
-.sixper label, .sixper div     { width: 15%; }
-.sevenper label, .sevenper div { width: 13%; }
-.eightper label, .eightper div { width: 11%; }
-.nineper label, .nineper div   { width: 10%; }
-.tenper label, .tenper div     { width: 8.7%; }
-
-.oneper label, .oneper div,
-.twoper label, .twoper div,
-.threeper label, .threeper div,
-.fourper label, .fourper div,
-.fiveper label, .fiveper div,
-.sixper label, .sixper div,
-.sevenper label, .sevenper div,
-.eightper label, .eightper div,
-.nineper label, .nineper div,
-.tenper label, .tenper div {
-        white-space: nowrap;
-        overflow: hidden;
-        border: none;
-        border-collapse: collapse;
-}
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index a00ed05a..56616b5d 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -1,5 +1,5 @@
 /**
- * Gx Styles
+ * Gallery 3 Default Theme Styles
  *
  * @requires YUI reset, font, grids, and base CSS
  *
@@ -9,13 +9,13 @@
  * 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 ()
+ * 6) Generic styles (.gInline, gOdd/gEven, etc.)
+ * 7) Forms (general and specific)
  * 8) Browser hacks (clear fix)
+ *
+ * @todo Disabled, readonly form inputs
  */
 
- @import url('forms.css');
-
 /**
  ** *******************************************************************
  * 1) HTML elements (body, headings, links, lists, tables, forms)
@@ -23,11 +23,13 @@
  */
 
 /* ~~~~~~~~~ general elements ~~~~~~~~~~ */
+
 body, html {
   background-color: #ccc;
 }
 
 /* ~~~~~~~~~ text ~~~~~~~~~~ */
+
 h1 {
   margin-top: 0;
 }
@@ -41,41 +43,28 @@ a {
   color: #6b8cb7;
   text-decoration: none;
 }
+
 a:hover {
   color: #f30;
   text-decoration: underline;
 }
 
 /* ~~~~~~~~~ list ~~~~~~~~~~ */
+
 li {
   list-style-type: none;
 }
 
 /* ~~~~~~~~~ table ~~~~~~~~~~ */
+
 caption {
   text-align: left;
 }
+
 th {
   text-align: left;
 }
 
-/* ~~~~~~~~~ form ~~~~~~~~~~ */
-form {
-
-}
-legend {
-
-}
-label {
-
-}
-input {
-
-}
-textarea {
-
-}
-
 /**
  ** *******************************************************************
  * 2) Layout containers (view, header, content, sidebar, footer)
@@ -83,6 +72,7 @@ textarea {
  */
 
 /* ~~~~~ View Container ~~~~~~ */
+
 .gView {
   background-color: #fff;
   border: 1px solid #ccc;
@@ -120,6 +110,7 @@ textarea {
   margin: 0 1em 2.5em 0;
   padding: 0;
 }
+
 .gBlockHeader {
   background-color: #e8e8e8;
   cursor: move;
@@ -128,6 +119,7 @@ textarea {
   padding: .3em .4em;
   position: relative;
 }
+
 .gBlockHeader h2 {
   background: url('../images/ico_dragable.png') no-repeat;
   float: left;
@@ -135,6 +127,7 @@ textarea {
   margin: 0;
   padding-left: 12px;
 }
+
 .gBlockHeader .gMinimize {
   background-image: url('../images/minimize.png');
   height: 16px;
@@ -143,18 +136,23 @@ textarea {
   top: .45em;
   width: 16px;
 }
+
 .gBlockHeader .gMinimize:hover {
   background-image: url('../images/minimize_active.png');
 }
+
 .gBlockContent {
   margin: .5em .5em 0 .5em;
 }
+
 table.gBlockContent {
   table-layout: fixed;
 }
+
 table.gBlockContent th {
   padding: .3em .3em .3em 0;
 }
+
 table.gBlockContent td {
   padding: .3em 0 .3em .3em;
 }
@@ -172,9 +170,8 @@ table.gBlockContent td {
   margin: 10px;
 }
 
- .gThumbnail {
-
- }
+.gThumbnail {
+}
 
 /* ~~~~~~~~~ Album ~~~~~~~~~~ */
 
@@ -182,9 +179,11 @@ table.gBlockContent td {
   height: 40px;
   position: relative;
 }
+
 #gAlbumHeader h1 {
   display: inline;
 }
+
 #gAlbumHeader span {
   padding-right: 10px;
 }
@@ -192,6 +191,7 @@ table.gBlockContent td {
 #gAlbumGrid {
   margin: 0;
 }
+
 .gItem {
   border: 1px solid #ccc;
   float: left;
@@ -200,12 +200,15 @@ table.gBlockContent td {
   padding: 5px 0 5px 0;
   text-align: center;
 }
+
 .gItem h2 {
   margin: 5px 0;
 }
+
 .gAlbum {
   background-color: #d4daff;
 }
+
 .gAlbum h2 {
   color: #006;
 }
@@ -216,13 +219,16 @@ table.gBlockContent td {
 #gItem {
   margin: 0;
 }
+
 #gItem a.gButtonLink {
   float: right;
 }
+
 #gItem img {
   background-color: #e7e7e7;
   border: 1px solid #c0c0c0;
 }
+
 #gItem h1 {
   margin: 10px 0;
 }
@@ -232,10 +238,12 @@ table.gBlockContent td {
 table.gMetadata {
 
 }
+
 table.gMetadata td,
 table.gMetadata th {
   border: none;
 }
+
 table.gMetadata td.toggle {
   text-align: right;
 }
@@ -247,106 +255,50 @@ table.gMetadata td.toggle {
   border: 1px solid #ccc;
   padding: 10px;
 }
+
 #gComments h2 {
   margin-top: 0;
 }
+
 #gComments ul {
   margin: 0;
 }
+
 #gComments ul li {
   list-style-type: none;
   margin-bottom: 15px;
 }
+
 #gComments ul li p {
   background-color: #e8e8e8;
   margin-bottom: 2px;
   padding: 4px;
 }
+
 #gComments ul li div {
   padding: 8px;
 }
 
 /* ~~~~~~~~~ Status messages ~~~~~~~~~~ */
 
-#gStatusMessages {
+.gStatus {
 
 }
+
 .gError {
   color: red;
 }
-.gWarning {
-
-}
-.gSuccess {
 
-}
-.gInfo {
+.gWarning {
 
 }
 
-/* ~~~~~~~~~ search form ~~~~~~~~~~ */
-
-#gSearchForm {
-  float: right;
-  margin-right: 10px;
-}
-#gSearchForm input.text {
-  padding: 1px;
-}
-#gSearchForm input.submit {
-  height: 20px;
-}
-
-/* ~~~~~~~~~ comment form ~~~~~~~~~~ */
+.gSuccess {
 
- #gCommentAdd {
-  width: 500px;
 }
 
-/* ----------- upload ----------------- */
+.gInfo {
 
-#gUploadForm .gBreadcrumbs li input,
-#gUploadForm .gBreadcrumbs li select {
-  width: 140px;
-  margin-left: 5px;
-}
-#gUploadForm-queue {
-  width: 500px;
-}
-#gUploadForm-queue td,
-#gUploadForm-queue th {
-  border-color: #e7e7e7;
-  text-align: left;
-}
-#gUploadForm-queue caption {
-  display: none;
-}
-#gUploadForm-queue thead th {
-  border-bottom: 2px solid #000;
-  text-align: center;
-}
-#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 {
-  margin-left: 370px;
-  width: 130px;
 }
 
 /**
@@ -366,42 +318,6 @@ table.gMetadata td.toggle {
   text-align: right;
 }
 
-#gLoginMenu fieldset {
-  border-width: 0;
-  margin: 0;
-  padding: 0;
-}
-
- #gLoginMenu fieldset legend{
-  display: none;
-}
-
-#gLoginForm {
-  margin-top: 5px;
-}
-#gLoginMenu label {
-  font-size: .8em;
-}
-
-#gLoginMenu ul {
-  margin: 0;
-}
-
-#gLoginMenu li {
-  float: left;
-  list-style-type: none;
-}
-
-#gLoginMenu li input#gUsername,
-#gLoginMenu li input#gPassword {
-  padding: 0 0 .1em 0;
-  width: 80px;
-}
-#gLoginMenu li input.submit {
-  font-size: .9em;
-  font-weight: bold;
-}
-
 /* ~~~~~~~~ Site Menu  ~~~~~~~~ */
 
 #gSiteMenu {
@@ -412,11 +328,13 @@ table.gMetadata td.toggle {
   margin: 8px 0;
   padding: 0;
 }
+
 #gSiteMenu li {
   float: left;
   list-style-type: none;
   width: 19%;
 }
+
 #gSiteMenu li a {
   border: 1px solid #369;
   border-width: 0 1px 1px 0;
@@ -430,10 +348,12 @@ table.gMetadata td.toggle {
   text-align: center;
   text-decoration: none;
 }
+
 #gSiteMenu li a:hover {
   background: url('../images/bg_sitemenu_hover.png') repeat-x;
   color: #f30;
 }
+
 #gSiteMenu li a.active {
   background: #dce6ef;
   border-color: #dce6ef;
@@ -454,19 +374,23 @@ table.gMetadata td.toggle {
   margin: 4px 0;
   padding: 0 0 0 12px;
 }
+
 #gBreadcrumbs li {
   background: transparent url('../images/icon_breadcrumb_separator.gif') no-repeat scroll left center;
   float: left;
   list-style-type: none;
   padding: 0 0 0 12px;
 }
+
 #gBreadcrumbs li.root {
   background: transparent;
 }
+
 #gBreadcrumbs li a,
 #gBreadcrumbs li span {
   display: block;
 }
+
 #gBreadcrumbs li.active span {
   font-weight: bold;
 }
@@ -477,42 +401,51 @@ table.gMetadata td.toggle {
   padding: 0;
   text-align: justify;
 }
+
 #gTags ul li {
   display: inline;
   text-align: justify;
 }
+
 #gTags ul li a {
   text-decoration: none;
 }
+
 #gTags ul li a.size0 {
   color: #9cf;
   font-size: 100%;
   font-weight: 100;
 }
+
 #gTags ul li a.size1 {
   color: #69f;
   font-size: 110%;
   font-weight: 300;
 }
+
 #gTags ul li a.size2 {
   color: #69c;
   font-size: 120%;
   font-weight: 500;
 }
+
 #gTags ul li a.size3 {
   color: #369;
   font-size: 130%;
   font-weight: 700;
 }
+
 #gTags ul li a.size4 {
   color: #0e2b52;
   font-size: 140%;
   font-weight: 900;
 }
+
 #gTags ul li a:hover {
   color: #FF3300;
   text-decoration: underline;
 }
+
 #gTags form {
   margin-top: 10px;
 }
@@ -522,6 +455,7 @@ table.gMetadata td.toggle {
 #gTags ul {
   margin-left: .5em;
 }
+
 #gTags li {
   list-style-image: url('../images/bullet_tag.png');
   margin-bottom: .3em;
@@ -534,50 +468,60 @@ table.gMetadata td.toggle {
   padding: 10px 0 0 0;
   text-align: center;
 }
+
 #gPagination a,
 #gPagination span {
   background-repeat: no-repeat;
   border: 1px solid #d3d3d3;
   padding: 5px;
 }
+
 #gPagination a:hover {
   background-color: #f3f3f3;
 }
+
 #gPagination .first {
   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;
 }
+
 #gPagination .previous {
   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;
 }
+
 #gPagination .next {
   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;
 }
+
 #gPagination .last {
   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;
@@ -591,6 +535,7 @@ table.gMetadata td.toggle {
   margin: 20px 0 20px 0;
   padding: 5px;
 }
+
 #gAlbumTree #gTreeContainer {
   border: 1px solid #d3d3d3;
   padding: 0 0 0 5px;
@@ -598,23 +543,29 @@ table.gMetadata td.toggle {
 
 /**
  ** *******************************************************************
- * 6) Specific text styles (different headings, font sizes, etc.)
+ * 6) Generic styles
  ** *******************************************************************
  */
 
-/**
- ** *******************************************************************
- * 7) Generic styles
- ** *******************************************************************
- */
+.gOdd {
+}
+
+.gEvent {
+}
+
+.gInline {
+  float: left;
+}
 
 .gButtonLink {
   border: 1px solid #d3d3d3;
   padding: 5px;
 }
+
 .gButtonLink:hover {
   background-color: #f3f3f3;
 }
+
 .gUnderState {
   color: #c0c0c0;
 }
@@ -625,7 +576,265 @@ table.gMetadata td.toggle {
 
 /**
  ** *******************************************************************
- * 8) Browser hacks
+ * 8) Forms (general and specific) 
+ ** *******************************************************************
+ */
+
+form {
+}
+
+fieldset {
+  border: 1px solid #ccc;
+  padding: 0;
+}
+
+legend {
+  margin-left: 1em;
+}
+
+label {
+  cursor: help;
+}
+
+input[type="text"], 
+input[type="password"],
+textarea, 
+select { 
+  padding: .3em;
+}
+
+input[type="text"], 
+input[type="password"], 
+textarea, 
+.gValidationRule {
+  width: 40%;
+}
+
+input {
+}
+
+input[type="button"] {
+}
+
+input[type="checkbox"] {
+}
+
+input[type="file"] {
+}
+
+input[type="password"] {
+}
+
+input[type="radio"] {
+}
+
+input[type="reset"] {
+}
+
+input[type="submit"] {
+}
+
+input[type="text"] {
+}
+
+option {
+}
+
+optgroup {
+}
+
+select {
+}
+
+textarea { 
+  width: 99%;
+  height: 12em;
+}
+
+button {
+}
+
+/* ~~~~~~~~~ Form layout ~~~~~~~~~~ */
+
+form ul, form li { 
+  list-style: none !important; 
+}
+form ul { 
+  margin: 0; 
+  padding: 0;
+}
+
+form li { 
+  margin-top: .5em; 
+  padding: .3em 1.5em .3em 1em;
+}
+
+form ul ul {
+  clear: both;
+}
+
+form ul ul li {
+  float: left;
+}
+
+input, 
+textarea {
+  display: block; 
+  clear: both;
+}
+
+/* ~~~~~~~~~ Inline fieldsets ~~~~~~~~~~ */
+
+.gInline li {
+  float: left; 
+  margin: 0;
+  padding: .3em .5em .4em;
+  text-align: left;
+}
+
+.gInline input {
+}
+
+.gInline input[type="Submit"] { 
+  margin-top: 1em;
+}
+
+.gInline .gNoLabels input[type="Submit"] {
+  margin-top: 0;
+}
+
+.gInline input[type="text"], 
+.gInline input[type="password"], 
+.gInline textarea, 
+.gInline .gValidationRule { 
+  width: 10em;
+}
+
+input:focus, 
+textarea:focus, 
+option:focus { 
+  background-color: #ffc;
+}
+
+/* ~~~~~~~~~ Validation ~~~~~~~~~~ */
+
+.gRequired {
+}
+
+ul.gError, 
+li.gError { 
+  background-color: #ffdcdc;
+}
+
+.gError label, .gValidationRule { 
+  color: red;
+}
+
+.gValidationRule {
+  font-size: 80%;
+  margin-top: .5em;
+}
+
+.gError input, 
+.gError textarea, 
+.gError select { 
+  border: 2px solid red;
+}
+
+/* ~~~~~~~~~ login form ~~~~~~~~~~ */
+
+#gLoginForm * { 
+  font-size: .94em;
+}
+
+#gLoginForm fieldset {
+  border: none;
+}
+
+#gLoginForm fieldset legend {
+  display: none;
+}
+
+/* ~~~~~~~~~ search form ~~~~~~~~~~ */
+
+#gSearchForm {
+  float: right;
+  margin-right: 10px;
+}
+
+#gSearchForm input.text {
+  padding: 1px;
+}
+
+#gSearchForm input.submit {
+  height: 20px;
+}
+
+/* ~~~~~~~~~ comment form ~~~~~~~~~~ */
+
+ #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 {
+  border-color: #e7e7e7;
+  text-align: left;
+}
+
+#gUploadForm-queue caption {
+  display: none;
+}
+
+#gUploadForm-queue thead th {
+  border-bottom: 2px solid #000;
+  text-align: center;
+}
+
+#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 {
+  margin-left: 370px;
+  width: 130px;
+}
+
+/**
+ ** *******************************************************************
+ * 9) Browser hacks
  ** *******************************************************************
  */
 
diff --git a/themes/default/views/header.html.php b/themes/default/views/header.html.php
index 52c3992b..e427838b 100644
--- a/themes/default/views/header.html.php
+++ b/themes/default/views/header.html.php
@@ -16,8 +16,7 @@
       <?= _("Login") ?> | <a href="javascript:close_login()">X</a>
     </span>
   <? endif; ?>
-  <span id="gLoginForm" class="gDisplayNone" formSrc="<?= url::site("login") ?>" >
-  </span>
+  <span id="gLoginForm" class="gDisplayNone" formSrc="<?= url::site("login") ?>"></span>
 </div>
 <ul id="gSiteMenu">
   <li><a href="<?= url::base() ?>"><?= _("HOME") ?></a></li>
@@ -27,9 +26,11 @@
   <li><a href="#"><?= _("ADMIN") ?></a></li>
 </ul>
 
-<form id="gSearchForm">
-  <input type="text" class="text" value="<?= _("Search Gallery ...") ?>"/>
-  <input type="submit" class="submit" value="search" />
+<form id="gSearchForm" class="gInline">
+  <ul class="gNoLabels">
+    <li><input type="text" value="<?= _("Search Gallery ...") ?>"/></li>
+    <li><input type="submit" value="search" /></li>
+  </ul>
 </form>
 
 <ul id="gBreadcrumbs">