fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)
fu ([personal profile] fu) wrote in [site community profile] changelog2010-12-28 11:41 am

[dw-free] Need consistent styling across the site

[commit: http://hg.dwscoalition.org/dw-free/rev/0a3ff6232c78]

http://bugs.dwscoalition.org/show_bug.cgi?id=3243

Step one in making styling consistent. Consolidate classes as much as
possible while only slightly tweaking visual appearance. Also adds a new
page under /dev/classes, to help developers.

Patch by [personal profile] fu.


Files modified:
  • bin/upgrading/en.dat
  • bin/upgrading/s2layers/core2.s2
  • cgi-bin/DW/Controller/Dev.pm
  • cgi-bin/DW/Controller/Shop.pm
  • cgi-bin/DW/Logic/UserLinkBar.pm
  • cgi-bin/DW/Setting/XPostAccounts.pm
  • cgi-bin/DW/Widget/PaidAccountStatus.pm
  • cgi-bin/DW/Widget/ShopCartStatusBar.pm
  • cgi-bin/LJ/Customize.pm
  • cgi-bin/LJ/Talk.pm
  • cgi-bin/LJ/Widget/CreateAccount.pm
  • cgi-bin/LJ/Widget/CreateAccountEnterCode.pm
  • cgi-bin/LJ/Widget/CurrentTheme.pm
  • cgi-bin/LJ/Widget/CustomizeTheme.pm
  • cgi-bin/LJ/Widget/InboxFolder.pm
  • cgi-bin/LJ/Widget/InboxFolderNav.pm
  • cgi-bin/LJ/Widget/LayoutChooser.pm
  • cgi-bin/LJ/Widget/LinksList.pm
  • cgi-bin/LJ/Widget/MoodThemeChooser.pm
  • cgi-bin/LJ/Widget/S2PropGroup.pm
  • cgi-bin/LJ/Widget/ShopCart.pm
  • cgi-bin/LJ/Widget/SubmitRequest.pm
  • cgi-bin/LJ/Widget/SubmitRequest/Support.pm
  • cgi-bin/LJ/Widget/ThemeChooser.pm
  • cgi-bin/LJ/Widget/ThemeNav.pm
  • cgi-bin/bml/scheme/blueshift.look
  • cgi-bin/bml/scheme/celerity.look
  • cgi-bin/bml/scheme/gradation-horizontal.look
  • cgi-bin/bml/scheme/gradation-vertical.look
  • cgi-bin/bml/scheme/lynx.look
  • cgi-bin/weblib.pl
  • htdocs/allpics.bml
  • htdocs/changeemail.bml
  • htdocs/changepassword.bml
  • htdocs/community/create.bml
  • htdocs/community/join.bml
  • htdocs/community/manage.bml
  • htdocs/community/members.bml
  • htdocs/community/moderate.bml
  • htdocs/community/sentinvites.bml
  • htdocs/community/settings.bml
  • htdocs/customize/advanced/layerbrowse.bml
  • htdocs/customize/advanced/layers.bml
  • htdocs/customize/index.bml
  • htdocs/customize/options.bml
  • htdocs/delcomment.bml
  • htdocs/directory.bml
  • htdocs/editicons.bml
  • htdocs/editjournal.bml
  • htdocs/editprivacy.bml
  • htdocs/edittags.bml
  • htdocs/export.bml
  • htdocs/inbox/index.bml
  • htdocs/inbox/markspam.bml
  • htdocs/js/esn_inbox.js
  • htdocs/js/tags.js
  • htdocs/latest.bml
  • htdocs/login.bml
  • htdocs/manage/circle/editfilters.bml
  • htdocs/manage/circle/invite.bml
  • htdocs/manage/domain.bml
  • htdocs/manage/emailpost.bml
  • htdocs/manage/externalaccount.bml
  • htdocs/manage/invitecodes.bml
  • htdocs/manage/invites.bml
  • htdocs/manage/profile/index.bml
  • htdocs/manage/pubkey.bml
  • htdocs/manage/settings/index.bml
  • htdocs/manage/subscriptions/filters.bml
  • htdocs/manage/tags.bml
  • htdocs/misc/adult_concepts.bml
  • htdocs/misc/adult_explicit.bml
  • htdocs/misc/adult_explicit_blocked.bml
  • htdocs/moodlist.bml
  • htdocs/poll/create.bml
  • htdocs/preview/entry.bml
  • htdocs/profile.bml
  • htdocs/shop/account.bml
  • htdocs/shop/cart.bml
  • htdocs/shop/checkout.bml
  • htdocs/shop/creditcard.bml
  • htdocs/shop/creditcard_wait.bml
  • htdocs/shop/entercc.bml
  • htdocs/shop/history.bml
  • htdocs/shop/renames.bml
  • htdocs/site/index.bml
  • htdocs/stc/allpics.css
  • htdocs/stc/celerity/celerity.css
  • htdocs/stc/choice-list.css
  • htdocs/stc/collapsible.css
  • htdocs/stc/customize.css
  • htdocs/stc/dev/classes.css
  • htdocs/stc/editicons.css
  • htdocs/stc/esn.css
  • htdocs/stc/faq.css
  • htdocs/stc/gradation/gradation.css
  • htdocs/stc/latest.css
  • htdocs/stc/lj_base-app.css
  • htdocs/stc/lj_settings.css
  • htdocs/stc/lynx/lynx.css
  • htdocs/stc/profile.css
  • htdocs/stc/reset.css
  • htdocs/stc/select-list.css
  • htdocs/stc/settings-colors.css
  • htdocs/stc/settings.css
  • htdocs/stc/shop-colors.css
  • htdocs/stc/shop.css
  • htdocs/stc/simple-form.css
  • htdocs/stc/table-form.css
  • htdocs/stc/tabs.css
  • htdocs/stc/tags.css
  • htdocs/stc/talkpage.css
  • htdocs/stc/vertical-form.css
  • htdocs/stc/widgets/createaccount.css
  • htdocs/stc/widgets/createaccountentercode.css
  • htdocs/stc/widgets/currenttheme.css
  • htdocs/stc/widgets/customizetheme.css
  • htdocs/stc/widgets/layoutchooser.css
  • htdocs/stc/widgets/linkslist.css
  • htdocs/stc/widgets/moodthemechooser.css
  • htdocs/stc/widgets/navstripchooser.css
  • htdocs/stc/widgets/themechooser.css
  • htdocs/stc/widgets/themenav.css
  • htdocs/stc/widgets/verticalfeedentries.css
  • htdocs/support/changenotify.bml
  • htdocs/support/faqsearch.bml
  • htdocs/support/see_request.bml
  • htdocs/support/see_request.bml.text
  • htdocs/talkread.bml
  • htdocs/tools/recent_comments.bml
  • htdocs/tools/tellafriend.bml
  • htdocs/tools/userpicfactory.bml
  • htdocs/view/index.bml
  • views/dev/classes.tt
  • views/dev/classes.tt.text
  • views/interests/enmasse.tt
  • views/login.tt
  • views/rename.tt
  • views/rename/swap.tt
  • views/shop/cartdisplay.tt
--------------------------------------------------------------------------------
diff -r b2b1ca17e24d -r 0a3ff6232c78 bin/upgrading/en.dat
--- a/bin/upgrading/en.dat	Thu Dec 23 10:39:49 2010 -0600
+++ b/bin/upgrading/en.dat	Tue Dec 28 19:40:54 2010 +0800
@@ -41,6 +41,10 @@ cleanhtml.suspend_msg=This is a suspende
 cleanhtml.suspend_msg=This is a suspended entry.
 
 cleanhtml.suspend_msg_with_supportid=This is a suspended entry. <a [[aopts]]>An unsuspension request</a> has been opened, and your entry will be reviewed soon.
+
+collapsible.expanded=Collapse
+
+collapsible.collapsed=Expand
 
 contentflag.viewingconcepts.bycommunity=You are about to view content that a community administrator has advised should be viewed with discretion.
 
diff -r b2b1ca17e24d -r 0a3ff6232c78 bin/upgrading/s2layers/core2.s2
--- a/bin/upgrading/s2layers/core2.s2	Thu Dec 23 10:39:49 2010 -0600
+++ b/bin/upgrading/s2layers/core2.s2	Tue Dec 28 19:40:54 2010 +0800
@@ -3184,7 +3184,7 @@ function EntryPreviewPage::print_standou
 function EntryPreviewPage::print_standout_box(string message)
 "Prints a standout box for warnings, etc "
 {
-    println "<div class='standout'><div class='standout-inner'><p> $message </p></div></div>";
+    println "<div class='highlight-box'><p> $message </p></div>";
 }
 
 function FriendsPage::print_stylesheets() {
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/DW/Controller/Dev.pm
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cgi-bin/DW/Controller/Dev.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -0,0 +1,25 @@
+#!/usr/bin/perl
+#
+# DW::Controller::Dev
+#
+# This controller is for tiny pages related to dev work
+#
+# Authors:
+#      Afuna <coder.dw@afunamatata.com>
+#
+# Copyright (c) 2010 by Dreamwidth Studios, LLC.
+#
+# This program is free software; you may redistribute it and/or modify it under
+# the same terms as Perl itself. For a copy of the license, please reference
+# 'perldoc perlartistic' or 'perldoc perlgpl'.
+#
+
+package DW::Controller::Dev;
+
+use strict;
+use warnings;
+use DW::Routing;
+
+DW::Routing->register_static( '/dev/classes', 'dev/classes.tt', app => 1 );
+
+1;
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/DW/Controller/Shop.pm
--- a/cgi-bin/DW/Controller/Shop.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/DW/Controller/Shop.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -54,7 +54,6 @@ sub _shop_controller {
 
     # the entire shop uses these files
     LJ::need_res( 'stc/shop.css' );
-    LJ::need_res( { priority => $LJ::OLD_RES_PRIORITY }, 'stc/shop-colors.css' );
     LJ::set_active_resource_group( 'jquery' );
 
     # figure out what shop/cart to use
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/DW/Logic/UserLinkBar.pm
--- a/cgi-bin/DW/Logic/UserLinkBar.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/DW/Logic/UserLinkBar.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -162,7 +162,7 @@ sub manage_membership {
                                         'userlinkbar.joincomm.title.closed' :
                                         'userlinkbar.joincomm.title.loggedout';
                 $link->{image}    = 'community_join_disabled.png';
-                $link->{class}    = "join_disabled";
+                $link->{class}    = "join_disabled disabled";
 
             # allowed to join
             } else {
@@ -207,7 +207,7 @@ sub trust {
             }
         } else {
             $link->{title_ml} = 'userlinkbar.addtrust.title.loggedout';
-            $link->{class} = "addtrust_disabled";
+            $link->{class} = "addtrust_disabled disabled";
             $link->{image} = 'access_grant_disabled.png';
         }
 
@@ -266,13 +266,13 @@ sub watch {
     } else {
         $link->{title_ml} = 'userlinkbar.addsub.title.loggedout';
         if ( $u->is_community ) {
-            $link->{class} = "addsub_comm_disabled";
+            $link->{class} = "addsub_comm_disabled disabled";
             $link->{image} = 'subscription_add_disabled.png';
         } elsif ( $u->is_syndicated ) {
-            $link->{class} = "addsub_feed_disabled";
+            $link->{class} = "addsub_feed_disabled disabled";
             $link->{image} = 'subscription_add_disabled.png';
         } else {
-            $link->{class} = "addsub_person_disabled";
+            $link->{class} = "addsub_person_disabled disabled";
             $link->{image} = 'subscription_add_disabled.png';
         }
     }
@@ -314,7 +314,7 @@ sub post {
         return $self->fix_link ( {
             text_ml => 'userlinkbar.post',
             title_ml => $remote ? 'userlinkbar.post.title.cantpost' : 'userlinkbar.post.title.loggedout',
-            class => "postentry_disabled",
+            class => "postentry_disabled disabled",
             image => 'post_disabled.png',
         } );
     }
@@ -356,7 +356,7 @@ sub track {
             $link->{image} = 'track.png';
         } else {
             $link->{title_ml} = $remote ? 'userlinkbar.trackuser.title.cantuseesn' : 'userlinkbar.trackuser.title.loggedout';
-            $link->{class} = "trackuser_disabled";
+            $link->{class} = "trackuser_disabled disabled";
             $link->{image} = 'track_disabled.png';
         }
 
@@ -391,7 +391,7 @@ sub message {
             $link->{image} = 'message.png';
         } else {
             $link->{title_ml} = $remote ? 'userlinkbar.sendmessage.title.cantsendmessage' : 'userlinkbar.sendmessage.title.loggedout';
-            $link->{class} = "sendmessage_disabled";
+            $link->{class} = "sendmessage_disabled disabled";
             $link->{image} = 'message_disabled.png';
         }
 
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/DW/Setting/XPostAccounts.pm
--- a/cgi-bin/DW/Setting/XPostAccounts.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/DW/Setting/XPostAccounts.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -159,7 +159,7 @@ sub option {
 
     $ret .= "<div id='preview_section' style='display: none;'>" . $class->ml('setting.xpost.preview') . "\n";
 
-    $ret .= "<div id='footer_preview' class='xpost_footer_preview'></div></div>\n";
+    $ret .= "<div id='footer_preview' class='xpost_footer_preview highlight-box'></div></div>\n";
 
     # define custom footer
     $ret .= "<tr><td>&nbsp</td><td colspan='2'><label for='${key}crosspost_footer_nocomments'>" . $class->ml( 'setting.xpost.option.footer.nocomments' ) . "</label><br/>";
@@ -177,7 +177,7 @@ sub option {
     }) . "<br/><br/>";
 
     $ret .= "<div id='preview_nocomments' style='display: none;'>" . $class->ml('setting.xpost.preview') . "\n";
-    $ret .= "<div id='footer_nocomments_preview' class='xpost_footer_preview'></div></div>\n";
+    $ret .= "<div id='footer_nocomments_preview' class='xpost_footer_preview highlight-box'></div></div>\n";
 
     my $baseurl = $LJ::SITEROOT;
     my $alttext = $class->ml('setting.xpost.option.footer.vars.comment_image.alt');
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/DW/Widget/PaidAccountStatus.pm
--- a/cgi-bin/DW/Widget/PaidAccountStatus.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/DW/Widget/PaidAccountStatus.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -38,7 +38,7 @@ sub render_body {
                      ? "<br />" . $class->ml( 'widget.paidaccountstatus.expiretime' ) . " " . LJ::mysql_time( $expires_at )
                      : '';
 
-    my $ret = "<div class='shop-account-status'>";
+    my $ret = "<div class='shop-item-highlight shop-account-status'>";
     $ret .= $class->ml( 'widget.paidaccountstatus.accounttype' ) . " ";
     $ret .= "<strong>$account_type</strong>$expires_on";
     $ret .= "</div>";
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/DW/Widget/ShopCartStatusBar.pm
--- a/cgi-bin/DW/Widget/ShopCartStatusBar.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/DW/Widget/ShopCartStatusBar.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -23,8 +23,7 @@ use Carp qw/ croak /;
 
 use DW::Shop;
 
-sub need_res { qw( stc/shop.css stc/shop-colors.css ) }
-sub need_res_opts { priority => $LJ::OLD_RES_PRIORITY }
+sub need_res { qw( stc/shop.css ) }
 
 sub render_body {
     my ( $class, %opts ) = @_;
@@ -40,7 +39,7 @@ sub render_body {
     # render out information about this cart
     my $ret;
     if ( $cart->has_items ) {
-        $ret .= "<div class='shop-cart-status'>";
+        $ret .= "<div class='shop-cart-status highlight-box'>";
         $ret .= "<strong>" . $class->ml( 'widget.shopcartstatusbar.header' ) . "</strong><br />";
         $ret .= $class->ml( 'widget.shopcartstatusbar.itemcount', { num => $cart->num_items, price => $cart->display_total } );
         $ret .= "<br />";
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/LJ/Customize.pm
--- a/cgi-bin/LJ/Customize.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/LJ/Customize.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -637,19 +637,6 @@ sub propgroup_name {
     return $gname;
 }
 
-sub s2_upsell {
-    my $class = shift;
-    my $getextra = shift;
-
-    my $ret .= "<?standout ";
-    $ret .= "<p>This style system is no longer supported.</p>";
-    $ret .= "<p><a href='$LJ::SITEROOT/customize/switch_system$getextra'><strong>Switch to S2</strong></a> for the latest features and themes.</p>";
-    $ret .= " standout?>";
-
-    return $ret;
-}
-
-
 
 sub get_cats {
     my $class = shift;
@@ -683,7 +670,6 @@ sub get_cats {
         },
         map { $_ => {
             text => $_,
-            main => 1,
             order => 3,
         } } LJ::S2Theme->all_categories( special => 0, all => 0 ),
     );
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/LJ/Talk.pm
--- a/cgi-bin/LJ/Talk.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/LJ/Talk.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -180,11 +180,9 @@ sub link_bar
 
     my $ret;
     if ( @linkele ) {
-        $ret = BML::fill_template("standout", {
-            'DATA' => "<table summary=''><tr><td valign='middle'>" .
+        $ret = qq{<div class="action-box">} .
                 join("&nbsp;&nbsp;", @linkele) .
-                "</td></tr></table>",
-            });
+                "</div>";
     }
     return $ret;
 }
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/LJ/Widget/CreateAccount.pm
--- a/cgi-bin/LJ/Widget/CreateAccount.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/LJ/Widget/CreateAccount.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -62,11 +62,11 @@ sub render_body {
     # screen readers to announce it correctly after form submission. If you want to
     # move it, use CSS.
     if ( keys %$errors ) {
-        $ret .= "<div tabindex=1 id='error-list' class='error-list' role='alert'>";
+        $ret .= "<div tabindex=1 id='error-list' class='error-box' role='alert'>";
         $ret .= "<h2 class='nav' id='errorlist_label'>"
                 .  LJ::ejs($class->ml('widget.createaccount.error.list'))
                 .  "</h2>";
-        $ret .= "<ol role='alert' labelledby='errorlist_label'>";
+        $ret .= "<ol role='alert' labelledby='errorlist_label' class='error-list'>";
 
         # Print out all of the error messages that exist.
         # Do this manually as opposed to in a for loop in order to guarantee the order
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/LJ/Widget/CreateAccountEnterCode.pm
--- a/cgi-bin/LJ/Widget/CreateAccountEnterCode.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/LJ/Widget/CreateAccountEnterCode.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -19,6 +19,8 @@ use strict;
 use strict;
 use base qw(LJ::Widget);
 use Carp qw(croak);
+
+sub need_res { qw( stc/widgets/createaccountentercode.css ) }
 
 sub render_body {
     my $class = shift;
@@ -55,7 +57,7 @@ sub render_body {
     $ret .= "<p>" . $class->ml( 'widget.createaccountentercode.info' ) . "</p>";
 
     $ret .= "<form method='get' action='$LJ::SITEROOT/create'>";
-    $ret .= "<?standout " . $class->ml( 'widget.createaccountentercode.code' ) . " ";
+    $ret .= "<div class='highlight-box' id='code_box'>" . $class->ml( 'widget.createaccountentercode.code' ) . " ";
     $ret .= LJ::html_text( {
         name => 'code',
         value => LJ::ehtml( $code ),
@@ -64,7 +66,7 @@ sub render_body {
     } );
     $ret .= " " . LJ::html_submit( $class->ml( 'widget.createaccountentercode.btn.proceed' ) );
     $ret .= $error_msg->( 'code', '<br /><span class="formitemFlag">', '</span>' );
-    $ret .= " standout?>";
+    $ret .= "</div>";
     $ret .= LJ::html_hidden( ssl => $get->{ssl} ) if $get->{ssl};
     $ret .= "</form>";
 
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/LJ/Widget/CurrentTheme.pm
--- a/cgi-bin/LJ/Widget/CurrentTheme.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/LJ/Widget/CurrentTheme.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -44,9 +44,9 @@ sub render_body {
     my $designer = $theme->designer;
 
     my $ret;
-    $ret .= "<h2 class='widget-header'><span>" . $class->ml('widget.currenttheme.title', {'user' => $u->ljuser_display}) . "</span></h2>";
+    $ret .= "<div class='highlight-box'><h2 class='widget-header'><span>" . $class->ml('widget.currenttheme.title', {'user' => $u->ljuser_display}) . "</span></h2>";
     $ret .= "<div class='theme-current-content pkg'>";
-    $ret .= "<img src='" . $theme->preview_imgurl . "' class='theme-current-image' />";
+    $ret .= "<img src='" . $theme->preview_imgurl . "' class='theme-current-image preview-image' />";
     $ret .= "<h3>" . $theme->name . "</h3>";
 
     my $layout_link = "<a href='$LJ::SITEROOT/customize/$getextra${getsep}layoutid=" . $theme->layoutid . "$showarg' class='theme-current-layout'><em>$layout_name</em></a>";
@@ -64,7 +64,7 @@ sub render_body {
     }
     $ret .= "</p>";
 
-    $ret .= "<div class='theme-current-links'>";
+    $ret .= "<div class='theme-current-links inset-box'>";
     $ret .= $class->ml('widget.currenttheme.options');
     $ret .= "<ul class='nostyle'>";
     if ($no_theme_chooser) {
@@ -90,6 +90,7 @@ sub render_body {
     $ret .= "</ul>";
     $ret .= "</div><!-- end .theme-current-links -->";
     $ret .= "</div><!-- end .theme-current-content -->";
+    $ret .= "</div>";
 
     return $ret;
 }
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/LJ/Widget/CustomizeTheme.pm
--- a/cgi-bin/LJ/Widget/CustomizeTheme.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/LJ/Widget/CustomizeTheme.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -40,8 +40,8 @@ sub render_body {
 
     $ret .= $class->start_form( id => "customize-form" );
 
-    $ret .= "<div class='customize-inner-wrapper'>";
-    $ret .= "<div class='customize-nav'>";
+    $ret .= "<div class='customize-inner-wrapper section-nav-inner-wrapper'>";
+    $ret .= "<div class='customize-nav section-nav'>";
 
     my $style = LJ::S2::load_style($u->prop('s2_style'));
     die "Style not found." unless $style && $style->{userid} == $u->id;
@@ -131,12 +131,7 @@ sub render_body {
 
     ### Content ###
 
-    $ret .= "<div class='customize-content'>";
-
-    $ret .= "<div class='customize-buttons'>";
-    $ret .= $class->html_submit( save => $class->ml('widget.customizetheme.btn.save'), { raw => "class='customize-button'" } ) . " ";
-    $ret .= $class->html_submit( reset => $class->ml('widget.customizetheme.btn.reset'), { raw => "class='customize-button' id='reset_btn_top'" } );
-    $ret .= "</div>";
+    $ret .= "<div class='customize-content section-nav-content'>";
 
     # Display Group
     if ($group eq "display") {
@@ -226,7 +221,7 @@ sub render_body {
         $ret .= "</div>";
     }
 
-    $ret .= "<div class='customize-buttons'>";
+    $ret .= "<div class='customize-buttons action-bar'>";
     $ret .= $class->html_submit( save => $class->ml('widget.customizetheme.btn.save'), { raw => "class='customize-button'" } ) . " ";
     $ret .= $class->html_submit( reset => $class->ml('widget.customizetheme.btn.reset'), { raw => "class='customize-button' id='reset_btn_bottom'" } );
     $ret .= "</div>";
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/LJ/Widget/InboxFolder.pm
--- a/cgi-bin/LJ/Widget/InboxFolder.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/LJ/Widget/InboxFolder.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -138,7 +138,7 @@ sub render_body {
 
     unless (@$nitems) {
         $messagetable .= qq {
-            <tr><td class="NoItems" colspan="3" id="NoMessageTD"><?_ml inbox.nomessages _ml?></td></tr>
+            <tr><td class="NoItems status-hint" colspan="3" id="NoMessageTD"><?_ml inbox.nomessages _ml?></td></tr>
             };
     }
 
@@ -154,7 +154,7 @@ sub render_body {
 
         my $qid  = $inbox_item->qid;
 
-        my $read_class = $inbox_item->read ? "InboxItem_Read" : "InboxItem_Unread";
+        my $read_class = $inbox_item->read ? "InboxItem_Read read" : "InboxItem_Unread";
 
         my $title  = $inbox_item->title(mode => $opts{mode});
 
@@ -175,7 +175,7 @@ sub render_body {
         my $when = LJ::diff_ago_text( $inbox_item->when_unixtime );
         my $contents = $inbox_item->as_html || '';
 
-        my $row_class = ($rownum++ % 2 == 0) ? "InboxItem_Meta" : "InboxItem_Meta alt";
+        my $row_class = ($rownum++ % 2 == 0) ? "InboxItem_Meta odd" : "InboxItem_Meta even";
 
         my $expandbtn = '';
         my $content_div = '';
@@ -208,7 +208,7 @@ sub render_body {
                     <span class="$read_class" id="${name}_Title_$qid">$title</span>
                     $content_div
                     </td>
-                    <td class="time">$when</td>
+                    <td class="time detail">$when</td>
                 </tr>
         };
     }
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/LJ/Widget/InboxFolderNav.pm
--- a/cgi-bin/LJ/Widget/InboxFolderNav.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/LJ/Widget/InboxFolderNav.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -47,7 +47,7 @@ sub render_body {
         my $unread = shift || "";
         my $img = shift || 0;
 
-        $class .= " active" if $opts{view} && $opts{view} eq $link_view;
+        $class .= " selected" if $opts{view} && $opts{view} eq $link_view;
 
         my $link = qq{<a href=".?view=$link_view" class="$class" id="esn_folder_$link_view">};
         $link .= BML::ml( $link_label );
@@ -81,7 +81,7 @@ sub render_body {
 
     my $unread_all_html = $unread_html->( $unread_count );
     $body .= '<a href="." id="esn_folder_all"';
-    $body .= ' class="active"' unless $opts{view};
+    $body .= ' class="selected"' unless $opts{view};
     $body .= "><?_ml inbox.menu.all _ml?>$unread_all_html</a>";
     $body .= $subfolder_link->( "usermsg_recvd", "inbox.menu.messages", "subs", 
         $unread_html->( $inbox->usermsg_recvd_event_count ) ) if LJ::is_enabled( 'user_messaging' );
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/LJ/Widget/LayoutChooser.pm
--- a/cgi-bin/LJ/Widget/LayoutChooser.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/LJ/Widget/LayoutChooser.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -38,7 +38,7 @@ sub render_body {
     $ret .= "<h2 class='widget-header'>";
     $ret .= $no_theme_chooser ? $class->ml('widget.layoutchooser.title_nonum') : $class->ml('widget.layoutchooser.title');
     $ret .= "</h2>";
-    $ret .= "<div class='layout-content'>";
+    $ret .= "<ul class='layout-content select-list'>";
 
     # Column option
     my $current_theme = LJ::Customize->get_current_theme($u);
@@ -68,9 +68,9 @@ sub render_body {
     unless (!$current_theme->is_system_layout) {
         foreach my $layout (sort keys %layouts) {
             my $current = (!$layout_prop) || ($layout_prop && $layouts{$layout} eq $prop_value) ? 1 : 0;
-            my $current_class = $current ? " current" : "";
+            my $current_class = $current ? " selected" : "";
 
-            $ret .= "<div class='layout-item$current_class'>";
+            $ret .= "<li class='layout-item$current_class'>";
             $ret .= "<img src='$LJ::IMGPREFIX/customize/layouts/$layout.png' class='layout-preview' />";
             $ret .= "<p class='layout-desc'>$layout_names{$layout}</p>";
             unless ($current) {
@@ -86,7 +86,7 @@ sub render_body {
                 );
                 $ret .= $class->end_form;
             }
-            $ret .= "</div><!-- end .theme-item -->";
+            $ret .= "</li><!-- end .theme-item -->";
         }
     }
 
@@ -142,7 +142,7 @@ sub js {
         applyLayout: function (evt, form) {
             var given_layout_choice = form["Widget[LayoutChooser]_layout_choice"].value + "";
             $("layout_btn_" + given_layout_choice).disabled = true;
-            DOM.addClassName($("layout_btn_" + given_layout_choice), "layout-button-disabled");
+            DOM.addClassName($("layout_btn_" + given_layout_choice), "layout-button-disabled disabled");
 
             this.doPostAndUpdateContent({
                 layout_choice: given_layout_choice,
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/LJ/Widget/LinksList.pm
--- a/cgi-bin/LJ/Widget/LinksList.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/LJ/Widget/LinksList.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -18,8 +18,6 @@ use Carp qw(croak);
 use Carp qw(croak);
 
 sub authas { 1 }
-sub need_res { qw( stc/widgets/linkslist.css ) }
-sub need_res_opts { priority => $LJ::OLD_RES_PRIORITY }
 
 sub render_body {
     my $class = shift;
@@ -109,8 +107,8 @@ sub render_body {
     $ret .= $class->html_hidden( numlinks => $showlinks );
     $ret .= "</table></td>";
 
-    $ret .= "<td><div class='tips-box'><p class='tips-header'><strong>" . $class->ml('widget.linkslist.tips') . "</strong></p>";
-    $ret .= "<ul class='detail'><li>" . $class->ml('widget.linkslist.about.reorder') . "</li>";
+    $ret .= "<td><div class='highlight-box'><p class='tips-header'><strong>" . $class->ml('widget.linkslist.tips') . "</strong></p>";
+    $ret .= "<ul><li>" . $class->ml('widget.linkslist.about.reorder') . "</li>";
     $ret .= "<li>" . $class->ml('widget.linkslist.about.blank') . "</li>";
     $ret .= "<li>" . $class->ml('widget.linkslist.about.heading') . "</li></ul></div>";
     $ret .= "</td></tr></table>";
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/LJ/Widget/MoodThemeChooser.pm
--- a/cgi-bin/LJ/Widget/MoodThemeChooser.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/LJ/Widget/MoodThemeChooser.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -73,7 +73,7 @@ sub render_body {
     if ( $mobj) {
         my $count = 0;
 
-        $ret .= "<div class='moodtheme-preview moodtheme-preview-$show_special'>";
+        $ret .= "<div class='moodtheme-preview moodtheme-preview-$show_special highlight-box'>";
         $ret .= "<table summary=''>";
         $ret .= "<tr>" unless $moodtheme_extra;
         foreach my $mood (@show_moods) {
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/LJ/Widget/S2PropGroup.pm
--- a/cgi-bin/LJ/Widget/S2PropGroup.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/LJ/Widget/S2PropGroup.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -19,7 +19,7 @@ use LJ::Customize;
 use LJ::Customize;
 
 sub authas { 1 }
-sub need_res { qw( stc/widgets/s2propgroup.css js/colorpicker.js ) }
+sub need_res { qw( stc/widgets/s2propgroup.css js/colorpicker.js stc/collapsible.css ) }
 sub need_res_opts { ( priority => $LJ::OLD_RES_PRIORITY ) }
 
 sub render_body {
@@ -54,7 +54,10 @@ sub render_body {
 
         $ret .= "<p class='detail'>" . $class->ml('widget.s2propgroup.presentation.note') . "</p>";
 
-        $ret .= "<div class='subheader subheader-presentation on' id='subheader__presentation__basic'>" . $class->ml('widget.s2propgroup.presentation.basic') . "</div>";
+        $ret .= "<div class='subheader subheader-presentation collapsible expanded' id='subheader__presentation__basic'><div class='collapse-button'>" 
+         . $class->ml('collapsible.expanded')
+         . "</div> "
+         . $class->ml('widget.s2propgroup.presentation.basic') . "</div>";
         $ret .= "<table summary='' cellspacing='0' class='prop-list first' id='proplist__presentation__basic'>";
         $ret .= $class->language_chooser($u) if $opts{show_lang_chooser};
         foreach my $prop_name (@basic_props) {
@@ -62,9 +65,9 @@ sub render_body {
 
             if ($opts{show_lang_chooser}) {
                 # start on gray, since the language chooser will be white
-                $row_class = $count % 2 != 0 ? " graybg" : "";
+                $row_class = $count % 2 != 0 ? " odd" : " even";
             } else {
-                $row_class = $count % 2 == 0 ? " graybg" : "";
+                $row_class = $count % 2 == 0 ? " even" : " odd";
             }
             $ret .= $class->output_prop( $props->{$prop_name}, $prop_name, $row_class, $u, $style, $theme, $props );
             $count++;
@@ -79,11 +82,14 @@ sub render_body {
             # need to print the header inside the foreach because we don't want it printed if
             # there's no props in this group that are also in this subheader
             unless ($header_printed) {
-                $ret .= "<div class='subheader subheader-presentation on' id='subheader__presentation__additional'>" . $class->ml('widget.s2propgroup.presentation.additional') . "</div>";
+                $ret .= "<div class='subheader subheader-presentation collapsible expanded' id='subheader__presentation__additional'><div class='collapse-button'>" 
+                    . $class->ml('collapsible.expanded')
+                    . "</div> "
+                    .  $class->ml('widget.s2propgroup.presentation.additional') . "</div>";
                 $ret .= "<table summary='' cellspacing='0' class='prop-list' id='proplist__presentation__additional'>";
             }
             $header_printed = 1;
-            $row_class = $count % 2 == 0 ? " graybg" : "";
+            $row_class = $count % 2 == 0 ? " even" : " odd";
             $ret .= $class->output_prop( $props->{$prop_name}, $prop_name, $row_class, $u, $style, $theme, $props );
             $count++;
         }
@@ -176,14 +182,16 @@ sub render_body {
                     my $prop_list_class;
                     $prop_list_class = " first" if $subheader_counter == 1;
 
-                    $ret .= "<div class='subheader subheader-modules on' id='subheader__modules__${subheader}'>$subheaders{$subheader}</div>";
+                    $ret .= "<div class='subheader subheader-modules collapsible expanded' id='subheader__modules__${subheader}'><div class='collapse-button'>" 
+                     . $class->ml('collapsible.expanded')
+                     . "</div> $subheaders{$subheader}</div>";
                     $ret .= "<table summary='' cellspacing='0' class='prop-list$prop_list_class' id='proplist__modules__${subheader}'>";
                     $header_printed = 1;
                     $subheader_counter++;
                     $count = 1; # reset counter
                 }
 
-                $row_class = $count % 2 == 0 ? " graybg" : "";
+                $row_class = $count % 2 == 0 ? " even" : " odd";
 
                 $ret .= $class->output_prop( $props->{$prop_name}, $prop_name, $row_class, $u, $style, $theme, $props, \%grouped_prop_override );
                 $count++;
@@ -227,14 +235,16 @@ sub render_body {
                     my $prop_list_class = "";
                     $prop_list_class = " first" if $subheader_counter == 1;
 
-                    $ret .= "<div class='subheader subheader-$propgroup on' id='subheader__${propgroup}__${subheader}'>$subheaders{$subheader}</div>";
+                    $ret .= "<div class='subheader subheader-$propgroup collapsible expanded' id='subheader__${propgroup}__${subheader}'><div class='collapse-button'>" 
+                     . $class->ml('collapsible.expanded')
+                     . "</div>$subheaders{$subheader}</div>";
                     $ret .= "<table summary='' cellspacing='0' class='prop-list$prop_list_class' id='proplist__${propgroup}__${subheader}'>";
                     $header_printed = 1;
                     $subheader_counter++;
                     $count = 1; # reset counter
                 }
 
-                $row_class = $count % 2 == 0 ? " graybg" : "";
+                $row_class = $count % 2 == 0 ? " even" : " odd";
                 $ret .= $class->output_prop( $props->{$prop_name}, $prop_name, $row_class, $u, $style, $theme, $props );
                 $count++;
             }
@@ -577,6 +587,16 @@ sub group_exists_with_props {
 }
 
 sub js {
+    my $collapsed = LJ::ejs_string( LJ::Lang::ml( 'collapsible.collapsed' ) );
+    my $expanded = LJ::ejs_string( LJ::Lang::ml( 'collapsible.expanded' ) );
+
+    qq [
+        ml: {
+            collapsed: $collapsed,
+            expanded: $expanded
+        },
+    ]
+    . 
     q [
         initWidget: function () {
             var self = this;
@@ -619,7 +639,7 @@ sub js {
             var proplistid = subheaderid.replace(/subheader/, 'proplist');
 
             // figure out whether to expand or collapse
-            var expand = !DOM.hasClassName($(subheaderid), 'on');
+            var expand = !DOM.hasClassName($(subheaderid), 'expanded');
             if (override) {
                 if (override == "expand") {
                     expand = 1;
@@ -630,11 +650,25 @@ sub js {
 
             if (expand) {
                 // expand
-                DOM.addClassName($(subheaderid), 'on');
+                DOM.removeClassName($(subheaderid), 'collapsed');
+                DOM.addClassName($(subheaderid), 'expanded');
+
+                DOM.getElementsByClassName($(subheaderid), 'collapse-button')
+                    .forEach( function(button) {
+                        button.innerText = self.ml.expanded;
+                    } );
+
                 $(proplistid).style.display = "block";
             } else {
                 // collapse
-                DOM.removeClassName($(subheaderid), 'on');
+                DOM.removeClassName($(subheaderid), 'expanded');
+                DOM.addClassName($(subheaderid), 'collapsed');
+
+                DOM.getElementsByClassName($(subheaderid), 'collapse-button')
+                    .forEach( function(button) {
+                        button.innerText = self.ml.collapsed;
+                    } );
+
                 $(proplistid).style.display = "none";
             }
         },
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/LJ/Widget/ShopCart.pm
--- a/cgi-bin/LJ/Widget/ShopCart.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/LJ/Widget/ShopCart.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -54,7 +54,8 @@ sub render_body {
     $ret .= $class->start_form
         unless $opts{receipt};
 
-    $ret .= "<table class='shop-cart'>";
+    $ret .= "<table class='shop-cart grid'>";
+    $ret .= "<thead>";
     $ret .= "<tr><th></th>"
         unless $opts{receipt};
     $ret .= "<th>" . $class->ml( 'widget.shopcart.header.item' ) . "</th>";
@@ -65,7 +66,20 @@ sub render_body {
     $ret .= "<th>" . $class->ml( 'widget.shopcart.header.price' ) . "</th>";
     $ret .= "<th>ADMIN</th>" if $opts{admin};
     $ret .= "</tr>";
+    $ret .= "</thead>";
 
+    $ret .= "<tfoot>";
+    my $buttons = '&nbsp;';
+    unless ( $opts{receipt} ) {
+        $buttons = $class->html_submit( removeselected => $class->ml( 'widget.shopcart.btn.removeselected' ) ) . " " .
+                   $class->html_submit( discard => $class->ml( 'widget.shopcart.btn.discard' ) ) . "</p>";
+    }
+    $ret .= "<tr><td class='total' style='border-right: none; text-align: left;' colspan='3'>$buttons</td>";
+    $ret .= "<td style='border-left: none;' colspan='" . ($colspan-3) .
+            "' class='total'>" . $class->ml( 'widget.shopcart.total' ) . " " . $cart->display_total . "</td></tr>";
+    $ret .= "</tfoot>";
+
+    $ret .= "<tbody>";
     foreach my $item ( @{$cart->items} ) {
         $ret .= "<tr>";
         if ( $opts{receipt} ) {
@@ -110,16 +124,8 @@ sub render_body {
         }
         $ret .= "</tr>";
     }
+    $ret .= "</tbody>";
 
-    my $buttons = '&nbsp;';
-    unless ( $opts{receipt} ) {
-        $buttons = $class->html_submit( removeselected => $class->ml( 'widget.shopcart.btn.removeselected' ) ) . " " .
-                   $class->html_submit( discard => $class->ml( 'widget.shopcart.btn.discard' ) ) . "</p>";
-    }
-
-    $ret .= "<tr><td class='total' style='border-right: none; text-align: left;' colspan='3'>$buttons</td>";
-    $ret .= "<td style='border-left: none;' colspan='" . ($colspan-3) .
-            "' class='total'>" . $class->ml( 'widget.shopcart.total' ) . " " . $cart->display_total . "</td></tr>";
     $ret .= "</table>";
 
     unless ( $opts{receipt} ) {
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/LJ/Widget/SubmitRequest.pm
--- a/cgi-bin/LJ/Widget/SubmitRequest.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/LJ/Widget/SubmitRequest.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -123,7 +123,7 @@ sub render_body {
         $ret .= "</div>";
     }
 
-    $ret .= "<br /><?standout <input type='submit' value='" . $class->text_submit(%opts) . "' /> standout?>";
+    $ret .= "<br /><div class='action-box'><input type='submit' value='" . $class->text_submit(%opts) . "' /> </div>";
     $ret .= $class->end_form;
 
     return $ret;
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/LJ/Widget/SubmitRequest/Support.pm
--- a/cgi-bin/LJ/Widget/SubmitRequest/Support.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/LJ/Widget/SubmitRequest/Support.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -22,7 +22,7 @@ sub text_done {
 
     my $ret;
 
-    $ret .= "<div class='right-sidebar'>";
+    $ret .= "<div class='highlight-box' style='float: right; width: 300px;'>";
     $ret .= "<?h2 " . $class->ml('/support/submit.bml.help.header') . " h2?>";
     $ret .= "<?p " . $class->ml('/support/submit.bml.help.text', { aopts => "href='$LJ::SITEROOT/support/help'" }) . " p?>";
     $ret .= "</div>";
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/LJ/Widget/ThemeChooser.pm
--- a/cgi-bin/LJ/Widget/ThemeChooser.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/LJ/Widget/ThemeChooser.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -140,7 +140,7 @@ sub render_body {
         location => "top",
     );
 
-    $ret .= "<div class='themes-area'>";
+    $ret .= "<div class='themes-area'><ul class='select-list'>";
     foreach my $theme (@themes_this_page) {
         next unless defined $theme;
 
@@ -161,7 +161,7 @@ sub render_body {
         if ($theme_types{current}) {
             my $no_layer_edit = LJ::Hooks::run_hook("no_theme_or_layer_edit", $u);
 
-            $theme_class .= " current";
+            $theme_class .= " selected";
             $theme_options .= "<strong><a href='$LJ::SITEROOT/customize/options$getextra'>" . $class->ml('widget.themechooser.theme.customize') . "</a></strong>";
             if (! $no_layer_edit && $theme->is_custom && !$theme_types{upgrade}) {
                 if ($theme->layoutid && !$theme->layout_uniq) {
@@ -187,7 +187,7 @@ sub render_body {
         my $theme_layout_name = $theme->layout_name;
         my $theme_designer = $theme->designer;
 
-        $ret .= "<div class='theme-item$theme_class'>";
+        $ret .= "<li class='theme-item$theme_class'>";
         $ret .= "<img src='" . $theme->preview_imgurl . "' class='theme-preview' />";
 
         $ret .= "<h4>" . $theme->name . "</h4><div class='theme-action'><span class='theme-desc'>";
@@ -231,9 +231,9 @@ sub render_body {
             );
             $ret .= $class->end_form;
         }
-        $ret .= "</div><!-- end .theme-action --></div><!-- end .theme-item -->";
+        $ret .= "</div><!-- end .theme-action --></li><!-- end .theme-item -->";
     }
-    $ret .= "</div><!-- end .themes-area --->";
+    $ret .= "</ul></div><!-- end .themes-area --->";
 
     $ret .= $class->print_paging(
         themes => \@themes,
@@ -406,7 +406,7 @@ sub js {
             var given_themeid = form["Widget[ThemeChooser]_apply_themeid"].value + "";
             var given_layoutid = form["Widget[ThemeChooser]_apply_layoutid"].value + "";
             $("theme_btn_" + given_layoutid + given_themeid).disabled = true;
-            DOM.addClassName($("theme_btn_" + given_layoutid + given_themeid), "theme-button-disabled");
+            DOM.addClassName($("theme_btn_" + given_layoutid + given_themeid), "theme-button-disabled disabled");
 
             this.doPost({
                 apply_themeid: given_themeid,
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/LJ/Widget/ThemeNav.pm
--- a/cgi-bin/LJ/Widget/ThemeNav.pm	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/LJ/Widget/ThemeNav.pm	Tue Dec 28 19:40:54 2010 +0800
@@ -85,8 +85,8 @@ sub render_body {
     $ret .= "</p>";
     $ret .= $class->end_form;
 
-    $ret .= "<div class='theme-nav-inner-wrapper'>";
-    $ret .= "<div class='theme-selector-nav'>";
+    $ret .= "<div class='theme-nav-inner-wrapper section-nav-inner-wrapper'>";
+    $ret .= "<div class='theme-selector-nav section-nav'>";
 
     $ret .= "<ul class='theme-nav nostyle'>";
     $ret .= $class->print_cat_list(
@@ -100,9 +100,9 @@ sub render_body {
     $ret .= "</ul>";
 
     if (scalar @cats_sorted) {
-        $ret .= "<div class='theme-nav-separator'><hr /></div>";
+        $ret .= "<div class='theme-nav-separator section-nav-separator'><hr class='hr' /></div>";
     
-        $ret .= "<ul class='theme-nav nostyle'>";
+        $ret .= "<ul class='theme-nav nostyle section-nav'>";
         $ret .= $class->print_cat_list(
             user => $u,
             selected_cat => $cat,
@@ -113,10 +113,10 @@ sub render_body {
         );
         $ret .= "</ul>";
     
-        $ret .= "<div class='theme-nav-separator'><hr /></div>";
+        $ret .= "<div class='theme-nav-separator section-nav-separator'><hr class='hr' /></div>";
     }
     
-    $ret .= "<ul class='theme-nav-small nostyle'>";
+    $ret .= "<ul class='theme-nav-small nostyle section-nav'>";
     $ret .= "<li class='first'><a href='$LJ::SITEROOT/customize/advanced/'>" . $class->ml('widget.themenav.developer') . "</a>";
     my $upsell = LJ::Hooks::run_hook( 'customize_advanced_area_upsell', $u ) || '';
     $ret .= "$upsell</li>";
@@ -124,7 +124,7 @@ sub render_body {
 
     $ret .= "</div>";
 
-    $ret .= "<div class='theme-nav-content'>";
+    $ret .= "<div class='theme-nav-content section-nav-content'>";
     $ret .= $class->html_hidden({ name => "theme_chooser_id", value => $theme_chooser_id, id => "theme_chooser_id" });
     $ret .= $theme_chooser->render(
         cat => $cat,
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/bml/scheme/blueshift.look
--- a/cgi-bin/bml/scheme/blueshift.look	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/bml/scheme/blueshift.look	Tue Dec 28 19:40:54 2010 +0800
@@ -29,7 +29,8 @@ head<=
 
     <?_code
         LJ::need_res( { priority => $LJ::SCHEME_RES_PRIORITY },
-            qw( stc/jquery/jquery.ui.theme.smoothness.css
+            qw( stc/reset.css
+                stc/jquery/jquery.ui.theme.smoothness.css
                 stc/lj_base-app.css
                 stc/blueshift/blueshift.css
             )
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/bml/scheme/celerity.look
--- a/cgi-bin/bml/scheme/celerity.look	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/bml/scheme/celerity.look	Tue Dec 28 19:40:54 2010 +0800
@@ -29,7 +29,8 @@ head<=
 
     <?_code
         LJ::need_res( { priority => $LJ::SCHEME_RES_PRIORITY },
-            qw( stc/jquery/jquery.ui.theme.smoothness.css
+            qw( stc/reset.css
+                stc/jquery/jquery.ui.theme.smoothness.css
                 stc/lj_base-app.css
                 stc/celerity/celerity.css
             )
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/bml/scheme/gradation-horizontal.look
--- a/cgi-bin/bml/scheme/gradation-horizontal.look	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/bml/scheme/gradation-horizontal.look	Tue Dec 28 19:40:54 2010 +0800
@@ -29,7 +29,8 @@ head<=
 
     <?_code
         LJ::need_res( { priority => $LJ::SCHEME_RES_PRIORITY },
-            qw( stc/jquery/jquery.ui.theme.dark-hive.css
+            qw( stc/reset.css
+                stc/jquery/jquery.ui.theme.dark-hive.css
                 stc/lj_base-app.css
                 stc/gradation/gradation.css
             )
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/bml/scheme/gradation-vertical.look
--- a/cgi-bin/bml/scheme/gradation-vertical.look	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/bml/scheme/gradation-vertical.look	Tue Dec 28 19:40:54 2010 +0800
@@ -29,7 +29,8 @@ head<=
 
     <?_code
         LJ::need_res( { priority => $LJ::SCHEME_RES_PRIORITY },
-            qw( stc/jquery/jquery.ui.theme.dark-hive.css
+            qw( stc/reset.css
+                stc/jquery/jquery.ui.theme.dark-hive.css
                 stc/lj_base-app.css
                 stc/gradation/gradation.css
             )
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/bml/scheme/lynx.look
--- a/cgi-bin/bml/scheme/lynx.look	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/bml/scheme/lynx.look	Tue Dec 28 19:40:54 2010 +0800
@@ -35,6 +35,7 @@ page<=
     LJ::need_res( { priority => $LJ::SCHEME_RES_PRIORITY },
         qw( stc/jquery/jquery.ui.theme.smoothness.css
             stc/lj_base-app.css
+            stc/lynx/lynx.css
         )
     );
 
diff -r b2b1ca17e24d -r 0a3ff6232c78 cgi-bin/weblib.pl
--- a/cgi-bin/weblib.pl	Thu Dec 23 10:39:49 2010 -0600
+++ b/cgi-bin/weblib.pl	Tue Dec 28 19:40:54 2010 +0800
@@ -404,26 +404,25 @@ sub paging_bar
 
     my $href_opts = $opts->{'href_opts'} || sub { '' };
 
-    my $navcrap;
+    my $nav;
     if ($pages > 1) {
-        $navcrap .= "<center><font face='Arial,Helvetica' size='-1'><b>";
-        $navcrap .= BML::ml('ljlib.pageofpages',{'page'=>$page, 'total'=>$pages}) . "<br />";
+        $nav .= "<b>";
+        $nav .= BML::ml('ljlib.pageofpages',{'page'=>$page, 'total'=>$pages}) . "<br />";
         my $left = "<b>&lt;&lt;</b>";
         if ($page > 1) { $left = "<a href='" . $self_link->($page-1) . "'" . $href_opts->($page-1) . ">$left</a>"; }
         my $right = "<b>&gt;&gt;</b>";
         if ($page < $pages) { $right = "<a href='" . $self_link->($page+1) . "'" . $href_opts->($page+1) . ">$right</a>"; }
-        $navcrap .= $left . " ";
+        $nav .= $left . " ";
         for (my $i=1; $i<=$pages; $i++) {
             my $link = "[$i]";
             if ($i != $page) { $link = "<a href='" . $self_link->($i) . "'" .  $href_opts->($i) . ">$link</a>"; }
-            else { $link = "<font size='+1'><b>$link</b></font>"; }
-            $navcrap .= "$link ";
+            else { $link = "<b>$link</b>"; }
+            $nav .= "$link ";
         }
-        $navcrap .= "$right";
-        $navcrap .= "</font></center>\n";
-        $navcrap = BML::fill_template("standout", { 'DATA' => $navcrap });
+        $nav .= "$right";
+        $nav = "<div class='action-box'>$nav</div>";
     }
-    return $navcrap;
+    return $nav;
 }
 
 # drop-in replacement for BML::paging in non-BML context
@@ -2740,7 +2739,7 @@ sub control_strip
         my $userpic = $remote->userpic;
         if ( $userpic ) {
             my $wh = $userpic->img_fixedsize( width => 43, height => 43 );
-            $ret .= "<td id='lj_controlstrip_userpic' style='background-image: none;'><a href='$LJ::SITEROOT/editicons'>";
+            $ret .= "<td id='lj_controlstrip_userpic'><a href='$LJ::SITEROOT/editicons'>";
             $ret .= "<img src='" . $userpic->url . "' alt=\"$BML::ML{'web.controlstrip.userpic.alt'}\" title=\"$BML::ML{'web.controlstrip.userpic.title'}\" $wh /></a></td>";
         } else {
             my $tinted_nouserpic_img = "";
@@ -2757,7 +2756,7 @@ sub control_strip
                     }
                 }
             }
-            $ret .= "<td id='lj_controlstrip_userpic' style='background-image: none;'><a href='$LJ::SITEROOT/editicons'>";
+            $ret .= "<td id='lj_controlstrip_userpic'><a href='$LJ::SITEROOT/editicons'>";
             if ($tinted_nouserpic_img eq "") {
                 $ret .= "<img src='$LJ::IMGPREFIX/controlstrip/nouserpic.gif' ";
             } else {
@@ -3325,8 +3324,8 @@ sub subscribe_interface {
             if (!ref $pending_sub) {
                 next if $u->is_identity && $pending_sub->disabled($u);
 
-                my $disabled_class = $pending_sub->disabled($u) ? "Disabled" : "";
-                my $altrow_class = $sub_count % 2 == 1 ? "altrow" : "";
+                my $disabled_class = $pending_sub->disabled($u) ? "inactive" : "";
+                my $altrow_class = $sub_count % 2 == 1 ? "odd" : "even";
                 my $hidden = $pending_sub->selected($u) ? "" : " style='visibility: hidden;'";
                 my $sub_title = " " . $pending_sub->htmlcontrol_label($u);
                 $sub_title = LJ::Hooks::run_hook("disabled_esn_sub", $u) . $sub_title if $pending_sub->disabled($u);
@@ -3400,9 +3399,9 @@ sub subscribe_interface {
 
             my $selected = $special_selected || $pending_sub->default_selected;
 
-            my $inactiveclass = $pending_sub->active ? '' : 'Inactive';
-            my $disabledclass = $pending_sub->enabled ? '' : 'Disabled';
-            my $altrowclass = $sub_count % 2 == 1 ? "altrow" : "";
+            my $inactiveclass = $pending_sub->active ? '' : 'inactive';
+            my $disabledclass = $pending_sub->enabled ? '' : 'disabled';
+            my $altrowclass = $sub_count % 2 == 1 ? "odd" : "even";
 
             $cat_html  .= "<tr class='$inactiveclass $disabledclass $altrowclass'><td>";
 
@@ -3611,11 +3610,11 @@ sub subscribe_interface {
     $referer =~ s/index\.bml//;
 
     unless ($settings_page) {
-        $ret .= '<?standout ' .
+        $ret .= '<div class="action-box">' .
             LJ::html_submit(BML::ml('subscribe_interface.save')) . ' ' .
             ($referer && $referer ne $uri ? "<input type='button' value='".BML::ml('subscribe_interface.cancel')."' onclick='window.location=\"$referer\"' />" : '')
             . '';
-        $ret .= "standout?>";
+        $ret .= "</div>";
     }
 
     $ret .= "</div>";
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/allpics.bml
--- a/htdocs/allpics.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/allpics.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -20,6 +20,7 @@ _c?>
     use vars qw(%GET $title $body $head);
 
     BML::set_language_scope( '/allpics.bml' );
+    LJ::need_res( 'stc/allpics.css' );
 
     $title = "$ML{'.title'}";
     $body = "";
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/changeemail.bml
--- a/htdocs/changeemail.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/changeemail.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -71,7 +71,7 @@ body<=
 
         my $old_email = $is_identity_no_email ? "<em>$ML{'.noemail'}</em>" : $u->email_raw;
 
-        $ret .= "<?standout\n";
+        $ret .= "<div class='highlight-box'>\n";
 
         $ret .= LJ::make_authas_select($remote, { 'authas' => $FORM{'authas'} });
 
@@ -86,11 +86,11 @@ body<=
             $ret .= "<input type='password' name='password' size='50' maxlength='50' tabindex='2' /></div>\n";
         }
 
-        $ret .= "standout?>\n";
+        $ret .= "</div>\n";
         $ret .= "<br />\n";
-        $ret .= "<?standout\n";
+        $ret .= "<div class='action-box'>\n";
         $ret .= "<input type='submit' tabindex='3' value=\"$ML{'.btn.change'}\" />\n";
-        $ret .= "standout?>\n";
+        $ret .= "</div>\n";
         $ret .= "</form>\n";
         return $ret;
     };
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/changepassword.bml
--- a/htdocs/changepassword.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/changepassword.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -82,7 +82,7 @@ body<=
          $ret .= " warningbar?><br />";
      }
 
-     $ret .= "<?standout\n";
+     $ret .= "<div class='highlight-box'>";
      $ret .= "$ML{'.header.username'}:<br />\n";
 
      # we make the field for the new password *longer* than the max length
@@ -102,14 +102,14 @@ body<=
      $ret .= "<input type='password' name='newpass1' size='30' maxlength='31' /><br />\n";
      $ret .= "$ML{'.newpasswordagain'}<br />\n";
      $ret .= "<input type='password' name='newpass2' size='30' maxlength='31' /><br />\n";
-     $ret .= "standout?>\n";
+     $ret .= "</div>\n";
 
      $ret .= "<?h1 $ML{'.proceed.header'} h1?>\n";
      $ret .= "<?p $ML{'.proceed.instructions'} p?>\n";
 
-     $ret .= "<?standout\n";
+     $ret .= "<div class='action-box'>";
      $ret .= "<input type='submit' value='$ML{'.btn.proceed'}' />\n";
-     $ret .= "standout?>\n";
+     $ret .= "</div>";
      $ret .= "</form>\n";
      return $ret;
  };
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/community/create.bml
--- a/htdocs/community/create.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/community/create.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -126,7 +126,7 @@ SUBMIT:
         $ret = "<?h1 $ML{'.success.head'} h1?><?p $ML{'.success.text1'} p?>";
         my $uri = $u->journal_base;
         $ret .= "<?p $ML{'.success.text2'} p?>\n";
-        $ret .= "<?standout <font size='+1' face='arial'><b><a href='$uri'>$uri/</a></b></font> standout?>\n";
+        $ret .= "<div class='highlight-box'><b><a href='$uri'>$uri/</a></b></div>\n";
         $ret .= "<?p $ML{'.success.text3'} p?>\n";
 
         $ret .= "<form method='get' action='$LJ::SITEROOT/manage/profile/'>";
@@ -244,7 +244,7 @@ SUBMIT:
 
         $ret .= "</ol>";
 
-        $ret .= "<?standout <input type='submit' value=\"$ML{'.btn.create'}\"> standout?>";
+        $ret .= "<div class='action-box'><input type='submit' value=\"$ML{'.btn.create'}\"></div>";
         $ret .= "</form>";
 
         return $ret;
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/community/join.bml
--- a/htdocs/community/join.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/community/join.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -162,8 +162,8 @@ body<=
             $ret .= BML::ml('.request.body', { comm => LJ::ljuser($cu) }) . "<br /> p?>";
             $ret .= "<form method='post' action='join?comm=$commuser'>";
             $ret .= LJ::form_auth();
-            $ret .= "<?standout <input type='submit' value=\"$ML{'.button.join2'}\" /> ";
-            $ret .= "$cancel_btn standout?></form>";
+            $ret .= "<div class='action-box'> <input type='submit' value=\"$ML{'.button.join2'}\" /> ";
+            $ret .= "$cancel_btn </div></form>";
             return $ret;
         }
 
@@ -183,8 +183,8 @@ body<=
         $ret .= "</td></tr><tr>";
         $ret .= "<td>&nbsp;</td><td><span style='font-size: smaller;'>$ML{'.label.addtofriends.note2'}</span></td>";
         $ret .= "</tr></table>";
-        $ret .= "<?standout <input type='submit' value=\"$ML{'.button.join2'}\" /> ";
-        $ret .= "$cancel_btn standout?></form>";
+        $ret .= "<div class='action-box'><input type='submit' value=\"$ML{'.button.join2'}\" /> ";
+        $ret .= "$cancel_btn</div></form>";
     }
 
     return $ret;
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/community/manage.bml
--- a/htdocs/community/manage.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/community/manage.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -80,7 +80,7 @@ body<=
 
        # Make up the first table row, linking to the other sort methods
        my @snames;
-       $ret .= "<table class='alternating-rows' cellpadding='0' cellspacing='0' style='width: 100%;'><tr>";
+       $ret .= "<table cellpadding='0' cellspacing='0' style='width: 100%;'><tr>";
 
        if (!defined $GET{'sortby'} || $GET{'sortby'} eq 'username') {
            $ret .= "<th>$ML{'.commlist.username'}</th>";
@@ -111,7 +111,7 @@ body<=
        foreach my $id (@snames) {
            my $user = $names{$id}->[0];
            my $name = $names{$id}->[1];
-           my $rstyle = ($rc++ & 1) ? "altrow2" : "altrow1";
+           my $rstyle = ($rc++ & 1) ? "odd" : "even";
            $ret .= "<tr class='$rstyle'><td><?ljcomm $user ljcomm?></td><td>" . LJ::eall($name) . "</td><td nowrap='nowrap'>";
            if ($admin{$id}) {
                $ret .= BML::ml('Actionlink', {
@@ -188,7 +188,7 @@ body<=
                              value => '0', selected => !$mod_emails });
     $ret .= "<label for='modemail_no'>$ML{'.modemail.no'}</label><br />";
     $ret .= "</fieldset> ";
-    $ret .= "<?standout " . LJ::html_submit($ML{'.joinmail.save'}) . " standout?>";
+    $ret .= "<div class='action-box'>" . LJ::html_submit($ML{'.joinmail.save'}) . "</div>";
     $ret .= "</form>";
     $ret .= "</div><!-- end .columns-2-left -->";
     $ret .= "<div class='columns-2-right'>";
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/community/members.bml
--- a/htdocs/community/members.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/community/members.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -527,7 +527,7 @@ body<=
     }
 
     my $sortlink = BML::get_uri() . "?authas=$cname&sort=";
-    $ret .= "<br /><div align='center'><table class='alternating-rows' cellpadding='0' cellspacing='0'>\n<tr>" .
+    $ret .= "<br /><div align='center'><table cellpadding='0' cellspacing='0'>\n<tr>" .
             "<th><a href='${sortlink}name'>$ML{'.key.user'}</a></th>";
     $ret .= "<th><a href='${sortlink}$_'>".$ML{".key.$_"}."</a></th>" for (@attribs);
     $ret .= "</tr>\n";
@@ -536,7 +536,7 @@ body<=
     my $rc = 0;
     my @wstrs;
     foreach(@users) {
-        my $rstyle = ($rc++ & 1) ? "altrow2" : "altrow1";
+        my $rstyle = ($rc++ & 1) ? "odd" : "even";
         $ret .= "<tr class='$rstyle'><td>" . LJ::ljuser($_->{'name'}) . "</td>";
         my $wstr;
         foreach my $key (@attribs) {
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/community/moderate.bml
--- a/htdocs/community/moderate.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/community/moderate.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -451,7 +451,7 @@ body<=
         $actions .= "&nbsp;&nbsp;<input type='submit' name='action:mark_as_spam' value='$ML{'.choice.mark_as_spam'}' style='font-size: 15pt; background: #e08291; color: #000000' />" if $can_spam;
 
         $ret .= "<form method='post' action='/community/moderate'>";
-        $ret .= BML::fill_template("standout", {'DATA'=> $actions});
+        $ret .= "<div class='action-bar'>$actions</div>";
         $ret .= "</form>";
 
         my %current = LJ::currents( $props, $up );
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/community/sentinvites.bml
--- a/htdocs/community/sentinvites.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/community/sentinvites.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -219,7 +219,7 @@ body<=
 </table>
 <br />
 END
-    $ret .= "<table class='alternating-rows' cellpadding='0' cellspacing='0'>\n<tr>" .
+    $ret .= "<table cellpadding='0' cellspacing='0'>\n<tr>" .
             "<th><a href='${sortlink}name'>$ML{'/community/members.bml.key.user'}</a></th>";
     $ret .= "<th><a href='${sortlink}$_'>$_</a></th>" foreach @titleattribs;
     $ret .= "<th><a href='${sortlink}maint'>$ML{'.key.sentby'}</a></th>";
@@ -238,7 +238,7 @@ END
     # rows for existing users
     my $rc = 0;
     foreach(@users) {
-        my $rstyle = ($rc++ & 1) ? "altrow2" : "altrow1";
+        my $rstyle = ($rc++ & 1) ? "odd" : "even";
         $ret .= "<tr class='$rstyle'><td>" . LJ::ljuser($_->{user}) . "</td>";
         foreach my $key (@attribs) {
             $ret .= "<td align='center'>";
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/community/settings.bml
--- a/htdocs/community/settings.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/community/settings.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -32,8 +32,7 @@ head<=
     #left-column, #right-column { float: left; }
     legend { font-size: 1.2em; font-weight: bold; }
     p.input-wrapper { margin-left: 27px; text-indent: -27px; }
-    .standout { clear: left; max-width: 695px; }
-    .standout table { margin: 0 auto; }
+    .action-box { clear: both; }
 </style>
 <=head
 body<=
@@ -258,13 +257,13 @@ body<=
         LJ::set_active_crumb('createcommunity');
           $ret .= "<?h2 $ML{'.label.commheader'} h2?>" .
               ($mode eq 'modify' ? "<?p $ML{'.label.commchange'} p?>" : "<?p " . BML::ml('.label.commcreate2', {'aopts' => "href='$LJ::SITEROOT/create'"}) . " p?>");
-          $ret .= "<?standout <table summary='' width='350' cellpadding='7'><tr valign='top'><td><b>$ML{'.label.maintainer'}</b></td>";
+          $ret .= "<div class='highlight-box'><table summary='' width='350' cellpadding='7'><tr valign='top'><td><b>$ML{'.label.maintainer'}</b></td>";
           $ret .= "<td><?ljuser $remote->{'user'} ljuser?><br />" . BML::ml('.label.maintainer.login2', {'aopts' => "href='$LJ::SITEROOT/login?ret=1'"}) . "</td></tr>";
           $ret .= "<tr valign='top'><td><b>$ML{'.label.community'}</b></td>";
           $ret .= "<td>$ML{'.label.username'}<br /><input name='cuser' maxlength='25' value='$cname' /><br />";
           $ret .= "<?inerr $errors{'username'} inerr?><br />";
           $ret .= "$ML{'.label.password'}<br /><input name='cpassword' type='password' /><br />";
-          $ret .= "<?inerr $errors{'password'} inerr?></td></tr></table> standout?>";
+          $ret .= "<?inerr $errors{'password'} inerr?></td></tr></table> </div>";
     } else {
         LJ::set_active_crumb('commsettings');
           $ret .= LJ::html_hidden('cuser', $cname);
@@ -380,9 +379,9 @@ body<=
 
     $ret .= "</div>";
 
-    $ret .= "<div style='clear: left; max-width: 695px;'><?standout <input type='submit' value='" .
+    $ret .= "<div class='action-box'><input type='submit' value='" .
         ($mode eq 'create' ? "$ML{'.button.createcommunity'}" : "$ML{'.button.changecommunity2'}") .
-        "' /> standout?></div></form>";
+        "' /></div></form>";
 
     return $ret;
 }
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/customize/advanced/layerbrowse.bml
--- a/htdocs/customize/advanced/layerbrowse.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/customize/advanced/layerbrowse.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -177,7 +177,7 @@ _c?>
     # layerinfo
     if (my $info = $s2info->{'info'}) {
         $body .= "<?h1 $ML{'.layerinfo.header'} h1?>";
-        $body .= "<table summary='' id='table_layerbrowse_layerinfo' class='table_layerbrowse' style='margin-bottom: 10px' border='1' cellpadding='2'>";
+        $body .= "<table summary='' id='table_layerbrowse_layerinfo' class='table_layerbrowse grid' style='margin-bottom: 10px' border='1' cellpadding='2'>";
         foreach my $k (sort keys %$info) {
             my ($ek, $ev) = map { LJ::ehtml($_) } ($k, $info->{$k});
             $title = $ev if $k eq "name";
@@ -224,7 +224,7 @@ _c?>
     # sets
     if (my $set = $s2info->{'set'}) {
         $body .= "<?h1 $ML{'.propertiesset.header'} h1?>";
-        $body .= "<table summary='' id='table_layerbrowse_properties' class='table_layerbrowse' style='margin-bottom: 10px' border='1' cellpadding='2' valign='top'>";
+        $body .= "<table summary='' id='table_layerbrowse_properties' class='table_layerbrowse grid' style='margin-bottom: 10px' border='1' cellpadding='2' valign='top'>";
         foreach my $k (sort keys %$set) {
             my $v = $set->{$k};
 
@@ -239,7 +239,7 @@ _c?>
     my $gb = $s2info->{'global'};
     if (ref $gb eq "HASH" && %$gb) {
         $body .= "<?h1 $ML{'.globalfunctions.header'} h1?>";
-        $body .= "<table summary='' id='table_layerbrowse_global' class='table_layerbrowse' style='margin-bottom: 10px' border='1' cellpadding='2' valign='top'>";
+        $body .= "<table summary='' id='table_layerbrowse_global' class='table_layerbrowse grid' style='margin-bottom: 10px' border='1' cellpadding='2' valign='top'>";
         foreach my $fname (sort keys %$gb) {
             my $rt = $gb->{$fname}->{'returntype'};
             if (defined $class->{$rt}) {
@@ -317,7 +317,7 @@ _c?>
             };
             $add->($add, $cname);
 
-            $body .= "<table summary='' id='table_layerbrowse_members' class='table_layerbrowse' style='margin-bottom: 10px' border='1' cellpadding='2' valign='top'><?h2 $ML{'.members.header'} h2?>" if %var;
+            $body .= "<table summary='' id='table_layerbrowse_members' class='table_layerbrowse grid' style='margin-bottom: 10px' border='1' cellpadding='2' valign='top'><?h2 $ML{'.members.header'} h2?>" if %var;
             foreach (sort keys %var) {
                 my $type = $var{$_}->{'type'};
                 $type =~ s/(\w+)/defined $class->{$1} ? "[class[$1]]" : $1/eg;
@@ -334,7 +334,7 @@ _c?>
             }
             $body .= "</table>" if %var;
             
-            $body .= "<table summary='' id='table_layerbrowse_methods' class='table_layerbrowse' style='margin-bottom: 10px' border='1' cellpadding='2' valign='top'><?h2 $ML{'.methods.header'} h2?>" if %func;
+            $body .= "<table summary='' id='table_layerbrowse_methods' class='table_layerbrowse grid' style='margin-bottom: 10px' border='1' cellpadding='2' valign='top'><?h2 $ML{'.methods.header'} h2?>" if %func;
             foreach (sort keys %func) {
                 my $rt = $func{$_}->{'returntype'};
                 if (defined $class->{$rt}) {
@@ -364,15 +364,6 @@ table.table_layerbrowse td.func, table.t
     padding-left: 1.7em;
     text-indent: -1.5em;
 }
-
-table.table_layerbrowse td {
-    padding: 3px;
-}
-
-table#table_layerbrowse_classes ul {
-    list-style: circle outside none;
-    margin-left: 1em;
-}
 </style>
 <=head
 body=><?_code return $body; _code?>
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/customize/advanced/layers.bml
--- a/htdocs/customize/advanced/layers.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/customize/advanced/layers.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -194,7 +194,7 @@ _c?>
     # show list of layers
     $body .= "<?h1 $ML{'.yourlayers.header'} h1?>\n";
     if (%$ulay) {
-        $body .= "<table id='table_yourlayers' style='margin-bottom: 10px' cellpadding='3' border='1'>\n";
+        $body .= "<table id='table_yourlayers' class='grid' cellpadding='3' border='1'>\n";
         $body .= "<tr><th>$ML{'.yourlayers.table.layerid'}</th><th>$ML{'.yourlayers.table.type'}</th><th>$ML{'.yourlayers.table.name'}</th><th>$ML{'.yourlayers.table.actions'}</th></tr>\n";
         my $lastbase = 0;
         foreach my $lid (sort { $ulay->{$a}->{'b2lid'} <=> $ulay->{$b}->{'b2lid'} || $a <=> $b } 
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/customize/index.bml
--- a/htdocs/customize/index.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/customize/index.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -19,7 +19,7 @@ body<=
     use strict;
     use vars qw(%GET %POST $title $headextra @errors @warnings);
     LJ::need_res( { priority => $LJ::OLD_RES_PRIORITY }, "stc/customize.css" );
-    LJ::need_res( "js/customize.js" );
+    LJ::need_res( "js/customize.js", "stc/select-list.css" );
 
     $title = $ML{'.title2'};
 
@@ -65,11 +65,6 @@ body<=
         $ret .= LJ::bad_input(@errors) if @errors;
     }
 
-    my $handler = LJ::BetaFeatures->get_handler('customize2007');
-    if ($LJ::CUSTOMIZE_FEEDBACK_LINK && $handler->is_active) {
-        $ret .= "<div class='beta-feedback'><a href='$LJ::CUSTOMIZE_FEEDBACK_LINK'>$ML{'.customize_area_feedback'}</a></div>";
-    }
-
     $ret .= "<form action='$LJ::SITEROOT/customize/' method='get' class='theme-switcher'>";
     $ret .= LJ::make_authas_select($remote, { authas => $GET{authas}, label => $ML{'.switcher.label'}, button => $ML{'.switcher.btn'} });
     $ret .= "</form>";
@@ -110,7 +105,7 @@ body<=
 
     $ret .= "<form method='POST'><div class='theme-customize'>";
     $ret .= LJ::form_auth();
-    $ret .= LJ::html_submit('nextpage', $ML{'.btn.nextpage'});
+    $ret .= LJ::html_submit( 'nextpage', $ML{'.btn.nextpage'}, { raw => qq{ class="submit" } } );
     $ret .= "</div>";
     $ret .= "</form>";
 
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/customize/options.bml
--- a/htdocs/customize/options.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/customize/options.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -18,7 +18,7 @@ body<=
 {
     use strict;
     use vars qw(%GET %POST $title $headextra @errors @warnings);
-    LJ::need_res(qw( stc/customize.css js/customize.js ));
+    LJ::need_res(qw( stc/customize.css js/customize.js stc/select-list.css));
 
     $title = $ML{'.title'};
 
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/delcomment.bml
--- a/htdocs/delcomment.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/delcomment.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -156,7 +156,7 @@ _info?><?_code
     $body .= "<form method='post' action='delcomment?";
     $body .= "journal=$u->{'user'}&id=$GET{'id'}'>\n";
     $body .= LJ::form_auth();
-    $body .= "<?standout ";
+    $body .= "<div class='highlight-box'>";
 
     $body .= "<div align='center' style='margin: 8px'>" . LJ::html_submit('confirm', $ML{'.confirm.submit'}) . "</div>\n";
 
@@ -177,7 +177,7 @@ _info?><?_code
         $body .= "<label for='delthread'>$ML{'.confirm.delthread'}</label></div>";
     }
 
-    $body .= " standout?>";
+    $body .= "</div>";
 
     if ($can_manage) {
         my $msg = BML::ml('.changeoptions', { 'link' =>
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/directory.bml
--- a/htdocs/directory.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/directory.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -275,7 +275,7 @@ body<=
     my @users     = $res->users;
 
     unless (@users) {
-        $ret .= "<?standout $ML{'.no_results'} standout?>";
+        $ret .= "<div class='warning-box'>$ML{'.no_results'}</div>";
         return $ret;
     }
 
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/editicons.bml
--- a/htdocs/editicons.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/editicons.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -345,13 +345,12 @@ use strict;
 
     # print out upload pic box
     my $emit_upload_box = sub {
-        $body .= '<a name="uploadBox"></a>';
         if (scalar @userpics < $max) {
 
             # upload form (with perlbal upload-tracking)
             $body .= qq {
                 <iframe name='upiframe' width='1' height='1' style='border: none'></iframe>
-                <div id='uploadBox' class='box pkg'><div id='uploadBox-inner'>
+                <div id='uploadBox' class='highlight-box box pkg'><div id='uploadBox-inner'>
                     <form enctype="multipart/form-data" action="editicons$suffix$getextra" method='post' id='uploadPic'>
                     <input type="hidden" id="go_to" name="go_to" value="editicons$suffix$getextra" />
             };
@@ -602,7 +601,7 @@ use strict;
                                   'selected' => $u->{'defaultpicid'} == 0,
                                   'raw' => "id='nodefpic'" });
         $body .= "<label for='nodefpic'>$ML{'.nodefault'}</label></p>";
-        $body .= "<?standout" . LJ::html_submit('action:save', $ML{'.btn.save'}) . "standout?>";
+        $body .= "<div class='action-box'>" . LJ::html_submit('action:save', $ML{'.btn.save'}) . "</div>";
         $body .= "</form>";
         $body .= "</div><!-- end #current_userpics -->";
         $body .= "<script type='text/javascript'>\n";
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/editjournal.bml
--- a/htdocs/editjournal.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/editjournal.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -436,7 +436,7 @@ body<=
             my $onload;
 
             if ( $res{events_1_converted_with_loss} ) {
-                $ret .= "<?standout $ML{'.invalid_encoding'} standout?><br/>";
+                $ret .= "<div class='warning-box'>$ML{'.invalid_encoding'} </div><br/>";
             }
 
             $ret .= LJ::entry_form($entry, \$$head, \$onload);
@@ -550,7 +550,7 @@ body<=
         # edit form
         $ret .= "<form action='editjournal$getextra' method='post'>\n";
         $ret .= LJ::html_hidden("mode","edit");
-        $ret .= "<?standout <table summary=''>\n";
+        $ret .= "<table summary='' class='highlight-box'>\n";
 
         # view type
         $ret .= "<tr valign=\"top\"><td>$ML{'.viewwhat'}</td>\n<td>\n";
@@ -590,7 +590,7 @@ body<=
         # submit button
         $ret .= "<tr><td>&nbsp;</td><td>" . LJ::html_submit(undef, $ML{'.btn.proceed'}) . "</td></tr>\n";
 
-        $ret .= "</table> standout?>\n";
+        $ret .= "</table>\n";
         $ret .= "</form>\n";
 
         my %res;
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/editprivacy.bml
--- a/htdocs/editprivacy.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/editprivacy.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -30,7 +30,7 @@ body<=
     return "This feature is currently disabled."
         unless LJ::is_enabled('mass_privacy');
 
-    return "<?standout $ML{'.unable'} standout?>" unless $u->can_use_mass_privacy;
+    return "<div class='warning-box'>$ML{'.unable'}</div>" unless $u->can_use_mass_privacy;
 
     my $mode = $POST{'mode'} || $GET{'mode'} || "init";
     my $more_public = 0; # flag indiciating if security is becoming more public
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/edittags.bml
--- a/htdocs/edittags.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/edittags.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -135,7 +135,7 @@ body<=
     $ret .= "<tr><td class='l'>" . BML::ml('.users', { user => $u->user }) . "</td><td class='curtags'>";
 
     if ( scalar keys %$usertags ) {
-        $ret .= "<select name='tags' multiple='multiple' class='tagbox_nohist' " .
+        $ret .= "<select name='tags' multiple='multiple' class='multiple-select tagbox_nohist' " .
                 "onChange='edit_tagselect(this)'>";
         foreach (sort { $a->{name} cmp $b->{name} } values %$usertags) {
             $ret .= "<option value='" . LJ::ehtml($_->{name}) . "'>" . LJ::ehtml($_->{name}) . "</option>";
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/export.bml
--- a/htdocs/export.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/export.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -46,8 +46,7 @@ body<=
     # main form
     $ret .= <<'HTMLBLOCK';
 
-<?standout
-<table summary="">
+<table summary="" class="highlight-box">
 <tr valign='top'><td><?_ml .label.what _ml?></td>
 <td>
     <select name="what" id="what">
@@ -109,7 +108,6 @@ HTMLBLOCK
 
 <tr><td></td><td><input type="submit" value="<?_ml .btn.proceed _ml?>" /></td></tr>
 </table>
-standout?>
 </form>
 
 <?h1 <?_ml lostinfo.head _ml?> h1?>
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/inbox/index.bml
--- a/htdocs/inbox/index.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/inbox/index.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -227,7 +227,7 @@ function setup (e) {
         var name = folders[i];
         tableview = new View();
 
-        tableview.init({ "view": $(name + "_Table") });
+        tableview.init({ "view": $(name + "_Table"), "selectedClass": "selected" });
 
         // 2 instances of action buttons
         for (var i=1; i<=2; i++) {
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/inbox/markspam.bml
--- a/htdocs/inbox/markspam.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/inbox/markspam.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -81,9 +81,8 @@ body<=
 
     $body .= "<form method='post'>";
     $body .= LJ::form_auth();
-    $body .= "<?standout ";
 
-    $body .= "<div>" . LJ::html_check({name => 'spam', id => 'spam', checked => "checked"});
+    $body .= "<div class='highlight-box'>" . LJ::html_check({name => 'spam', id => 'spam', checked => "checked"});
     $body .= "<label for='spam'>Mark this message as spam</label></div>";
 
     $body .= "<div>" . LJ::html_check({ 'type' => 'check', 'name' => 'ban', 'id' => 'ban' });
@@ -95,7 +94,6 @@ body<=
     $body .= LJ::html_hidden({name => 'msgid', value => $msg->msgid});
     $body .= LJ::html_submit('confirm', 'Confirm') . "</div>\n";
 
-    $body .= " standout?>";
 
     $body .= "<p><strong>Note:</strong> From the <a href='/manage/profile/'>Edit Profile</a> page, you can change your $LJ::SITENAMEABBREV User Messaging settings.</p>";
 
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/js/esn_inbox.js
--- a/htdocs/js/esn_inbox.js	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/js/esn_inbox.js	Tue Dec 28 19:40:54 2010 +0800
@@ -19,7 +19,7 @@ ESN_Inbox.initTableSelection = function 
     var selectedRows = new SelectableTable;
     selectedRows.init({
         "table": $(folder),
-            "selectedClass": "Selected",
+            "selectedClass": "selected",
             "multiple": true,
             "checkboxClass": "InboxItem_Check",
             "selectableClass": "InboxItem_Row"
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/js/tags.js
--- a/htdocs/js/tags.js	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/js/tags.js	Tue Dec 28 19:40:54 2010 +0800
@@ -104,7 +104,7 @@ function validate_input(btn, field_name,
 
     var re = /\S/;
     if (! field.value.match(re) || field.value.indexOf(badtext) != -1) {
-        field.className = 'tagfield_error';
+        field.className = 'error';
         return false;
     }
 
@@ -151,15 +151,15 @@ function show_props(div, id)
     secimg = secimg + '" />';
     if (tag[1] == "n/a") secimg = "";
 
-    out = "<table class='proptbl' cellspacing='0'>";
+    out = "<table class='proptbl column-table' cellspacing='0'><tbody>";
     out = out + "<tr><td class='h' colspan='2'>" + ml.counts_label + "</td></tr>";
-    out = out + "<tr><td class='t'>" + ml.public_label + "</td><td class='c'>" + tag[2] + "</td></tr>";
-    out = out + "<tr><td class='t'>" + ml.private_label + "</td><td class='c'>" + tag[3] + "</td></tr>";
-    out = out + "<tr><td class='t'>" + ml.trusted_label + "</td><td class='c'>" + tag[4] + "</td></tr>";
-    out = out + "<tr><td class='t'>" + ml.filters_label + "</td><td class='c'>" + tag[5] + "</td></tr>";
-    out = out + "<tr><td class='r'>" + ml.total_label + "</td><td class='rv'>" + tag[6] + "</td></tr>";
-    out = out + "<tr><td class='r' style='height: 16px'>" + ml.security_label + "</td><td class='rv' align='middle'>" + seclabel + secimg + "</td></tr>";
-    out = out + "</table>";
+    out = out + "<tr><th>" + ml.public_label + "</th><td class='c'>" + tag[2] + "</td></tr>";
+    out = out + "<tr><th>" + ml.private_label + "</th><td class='c'>" + tag[3] + "</td></tr>";
+    out = out + "<tr><th>" + ml.trusted_label + "</th><td class='c'>" + tag[4] + "</td></tr>";
+    out = out + "<tr><th>" + ml.filters_label + "</th><td class='c'>" + tag[5] + "</td></tr>";
+    out = out + "<tr class='summary'><th>" + ml.total_label + "</th><td class='highlight'>" + tag[6] + "</td></tr>";
+    out = out + "<tr class='summary'><th style='height: 16px'>" + ml.security_label + "</th><td class='highlight' align='middle'>" + seclabel + secimg + "</td></tr>";
+    out = out + "</tbody></table>";
 
     div.innerHTML = out;
     return;
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/latest.bml
--- a/htdocs/latest.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/latest.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -130,7 +130,7 @@ body<=
     }
 
     # put filtering options in a standout box
-    $tagfeeds = "<?standout $tagfeeds standout?><br />" if $tagfeeds;
+    $tagfeeds = "<div class='highlight-box' id='tagfeeds'>$tagfeeds</div>" if $tagfeeds;
 
     # FIXME: don't english-strip this just yet. Needs some extra work
     # The entire page is cached for efficiency, so if anyone does ?uselang=x
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/login.bml
--- a/htdocs/login.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/login.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -207,7 +207,7 @@ _c?>
             $body .= "<div class='login-create-account'>\n";
             $body .= "<hr class='hr' />\n";
             $body .= "<h4>$ML{'.createaccount.header'}</h4>\n";
-            $body .= "<form action='<?siteroot?>/create' method='get'><input type='submit' value='$ML{'.createaccount.button'}' class='create-account' /></form>\n";
+            $body .= "<form action='<?siteroot?>/create' method='get'><input type='submit' value='$ML{'.createaccount.button'}' class='submit' /></form>\n";
             $body .= "<ul>\n";
             $body .= "<li>$ML{'.createaccount.whylogin.benefit1'}</li>";
             $body .= "<li>$ML{'.createaccount.whylogin.benefit2'}</li>";
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/manage/circle/editfilters.bml
--- a/htdocs/manage/circle/editfilters.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/manage/circle/editfilters.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -113,7 +113,7 @@ _c?>
     my $trusted_us = LJ::load_userids( keys %$trust_list );
 
     # redirect to managing subscription filters
-    $body .= "<?standout " . BML::ml( '.subfilters', { aopts => "href='$LJ::SITEROOT/manage/subscriptions/filters'" } ) . " standout?>\n\n";
+    $body .= "<div class='highlight-box'>" . BML::ml( '.subfilters', { aopts => "href='$LJ::SITEROOT/manage/subscriptions/filters'" } ) . "</div>\n\n";
 
     # authas switcher form
     $body .= "<?p <form method='get' action='editfilters'>\n";
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/manage/circle/invite.bml
--- a/htdocs/manage/circle/invite.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/manage/circle/invite.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -180,15 +180,15 @@ _c?>
                 my $invite_obj = DW::InviteCodes->new( code => $code );
                 $invite_obj->send_code( email => $email );
 
-                $body .= "<?standout " . BML::ml( '.success.code', { email  => $email, invitecode => $code } );
+                $body .= "<div class='highlight-box'>" . BML::ml( '.success.code', { email  => $email, invitecode => $code } );
                 $body .= BML::ml( '.success.invitemore' )
                     if DW::InviteCodes->unused_count( userid => $u->id ) > 1;
-                $body .= " standout?>";
+                $body .= "</div>";
 
                 $code_sent = 1;
 
             } else {
-                $body .= "<?standout " . BML::ml('.success', { email => $email }) . " standout?>";
+                $body .= "<div class='highlight-box'>" . BML::ml('.success', { email => $email }) . "</div>";
             }
 
             # Blank email so the form is redisplayed for a new
@@ -258,7 +258,7 @@ _c?>
     $body .= $inerr->('form_auth');
 
     $body .= "<p>$ML{'.form.input.message'}</p>" . $inerr->("msg", "<br />");
-    $body .= "<div style='color: #000; background-color: #eee; border: 1px solid #000; margin-bottom: 15px; padding: 15px; width: 95%'>";
+    $body .= "<div class='highlight-box'>";
     $body .= "<p style='margin-top: 0;'><strong>$ML{'.msg_subject.header'}</strong> $msg_subject_display</p>";
     $body .= "<p><strong>$ML{'.msg.header'}</strong></p>";
     $body .= "<div style='margin-left: 15px;'>";
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/manage/domain.bml
--- a/htdocs/manage/domain.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/manage/domain.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -140,7 +140,7 @@ body<=
     }
 
     ### ending submit block
-    $ret .= "<?standout " . LJ::html_submit(undef, $ML{'.done.btn.savechanges'}) . " standout?>\n";
+    $ret .= "<div class='action-box'>" . LJ::html_submit(undef, $ML{'.done.btn.savechanges'}) . "</div>\n";
     $ret .= "</form>\n";
 
     return $ret;
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/manage/emailpost.bml
--- a/htdocs/manage/emailpost.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/manage/emailpost.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -456,9 +456,9 @@ body<=
     $ret .= '</div><br />';
 
 
-    $ret .= "<?standout ";
+    $ret .= qq{<div class='action-box'>};
     $ret .= LJ::html_submit( $ML{'.save'} );
-    $ret .= " standout?>";
+    $ret .= "</div>";
     $ret .= "</form>";
     $ret .= LJ::Hooks::run_hook('sms_footer');
     return $ret;
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/manage/externalaccount.bml
--- a/htdocs/manage/externalaccount.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/manage/externalaccount.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -27,7 +27,6 @@ use strict;
     BML::set_language_scope('/manage/externalaccount.bml');
 
     LJ::need_res("stc/settings.css", "js/externalaccount.js");
-    LJ::need_res( { priority => $LJ::OLD_RES_PRIORITY }, "stc/settings-colors.css" );
     LJ::set_active_crumb('manage');
 
     my $remote = LJ::get_remote();
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/manage/invitecodes.bml
--- a/htdocs/manage/invitecodes.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/manage/invitecodes.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -32,7 +32,7 @@ body<=
     if ( LJ::did_post() ) {
         return "<?h1 $ML{'Error'} ?h1> $ML{'error.invalidform'}" unless LJ::check_form_auth();
         if ( DW::InviteCodeRequests->create( userid => $remote->id, reason => $POST{reason} ) ) {
-            $ret .= "<?standout $ML{'.msg.request.success'} standout?>";
+            $ret .= "<div class='highlight-box'>$ML{'.msg.request.success'}</div>";
         } else {
             $ret .= "<?errorbar $ML{'.msg.request.error'} errorbar?>";
         }
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/manage/invites.bml
--- a/htdocs/manage/invites.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/manage/invites.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -111,7 +111,7 @@ body<=
     }
     
     # prepare table
-    $ret .= "<form method='post'>\n<div align='center'><table id='invites-list' class='alternating-rows' cellspacing='0' cellpadding='0'>";
+    $ret .= "<form method='post'>\n<div align='center'><table id='invites-list' cellspacing='0' cellpadding='0'>";
     $ret .= LJ::form_auth();
     $ret .= "<tr><th>$ML{'.community.title'}</th><th>$ML{'.abilities.title'}</th>";
     $ret .= "<th colspan='2'>$ML{'.actions.title'}</th>";
@@ -120,8 +120,8 @@ body<=
     # now list memberships
     my $rc = 0;
     foreach my $invite (@$pending) {
-        # get variables we'll need for HTML generatrion
-        my $rstyle = ($rc++ & 1) ? "altrow2" : "altrow1";
+        # get variables we'll need for HTML generation
+        my $rstyle = ($rc++ & 1) ? "odd" : "even";
         my $cu = $us->{$invite->[0]};
         my $key = "pending_$invite->[0]";
         my @tags = ();
@@ -147,7 +147,7 @@ body<=
 
     # all done
     $ret .= "</table><br />";
-    $ret .= "<?standout" . LJ::html_submit('submit', $ML{'.submit'}) . "standout?>";
+    $ret .= "<div class='action-box'>" . LJ::html_submit('submit', $ML{'.submit'}) . "</div>";
     $ret .= "</div></form>";
         
     return $ret;
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/manage/profile/index.bml
--- a/htdocs/manage/profile/index.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/manage/profile/index.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -130,13 +130,12 @@ body<=
         };
 
         my $stripe = 0;  # two columns
-        my $zebra_row1 = sub { return $stripe % 2 ? ' zebra_row' : '' };
-        my $zebra_row2 = sub { return $stripe++ % 2 ? ' zebra_row' : '' };
+        my $zebra_row = sub { return $stripe++ % 2 ? ' even' : ' odd' };
 
 
         ### Picture Settings
-        $ret .= "<tr class='field_block'><td class='field_name'>$ML{'.fn.userpic2'}</td>\n";
-        $ret .= "<td class='" . $zebra_row1->() . "'>";
+        $ret .= "<tr class='field_block" . $zebra_row->() . "' ><td class='field_name'>$ML{'.fn.userpic2'}</td>\n";
+        $ret .= "<td>";
         $ret .= "<div style='width: 100px; height: 100px; float: left; text-align: center; border: 1px solid #ddd'>";
         if ( $u->{'defaultpicid'} ) {
             my $icon = $u->userpic;
@@ -150,13 +149,13 @@ body<=
         $ret .= "<?p <a href='$LJ::SITEROOT/editicons$getextra'>$ML{'.userpic.change'}</a> p?>\n";
         $ret .= "</td>";
 
-        $ret .= "<td class='selectvis" . $zebra_row2->() . "'>";
+        $ret .= "<td>";
         $ret .= "<?p <i> $ML{'.security.visibility.everybody2'} </i> p?>";
         $ret .= "</td></tr>\n";
 
         # name
-        $ret .= "<tr class='field_block'><td class='field_name'>$ML{'.fn.name2'}</td>\n";
-        $ret .= "<td class='" . $zebra_row1->() . "'>";
+        $ret .= "<tr class='field_block" . $zebra_row->() . "'><td class='field_name'>$ML{'.fn.name2'}</td>\n";
+        $ret .= "<td>";
         if (LJ::text_in($saved{'name'})) {
             $ret .= "<div style='float: left'>";
             $ret .= LJ::html_text( { name => 'name', value => $u->name_orig,
@@ -168,28 +167,28 @@ body<=
             $ret .= "<?inerr " . BML::ml( '.error.invalidname2', {'aopts' => "href='$LJ::SITEROOT/utf8convert'"} ) . " inerr?>";
         }
 
-        $ret .= "</td>\n<td class='selectvis" . $zebra_row2->() . "'>";
+        $ret .= "</td>\n<td class='selectvis'>";
         $ret .= "<?p <i> $ML{'.security.visibility.everybody2'} </i> p?>";
         $ret .= "</td></tr>\n";
 
         if ( $u->is_individual ) {
             # gender
-            $ret .= "<tr class='field_block'><td class='field_name'>$ML{'.fn.gender'}</td>\n";
-            $ret .= "<td class='" . $zebra_row1->() . "'>";
+            $ret .= "<tr class='field_block" . $zebra_row->() . "'><td class='field_name'>$ML{'.fn.gender'}</td>\n";
+            $ret .= "<td>";
             $ret .= LJ::html_select( { name => 'gender', title => $ML{'.fn.gender'},
                                        selected => $u->prop( 'gender' ) || 'U' },
                                      F => $ML{'.gender.female'},
                                      M => $ML{'.gender.male'},
                                      O => $ML{'.gender.other'},
                                      U => $ML{'.gender.unspecified'}, );
-            $ret .= "</td>\n<td class='selectvis" . $zebra_row2->() . "'>";
+            $ret .= "</td>\n<td class='selectvis'>";
             $ret .= "<?p <i> $ML{'.security.visibility.nobody'} </i> p?>";
             $ret .= "</td></tr>\n";
         }
 
         # birthday
-        $ret .= "<tr class='field_block'><td class='field_name'>$ML{'.fn.birthday'}</td>\n";
-        $ret .= "<td class='" . $zebra_row1->() . "'>";
+        $ret .= "<tr class='field_block" . $zebra_row->() . "'><td class='field_name'>$ML{'.fn.birthday'}</td>\n";
+        $ret .= "<td>";
         my %bdpart;
         if ($u->{'bdate'} =~ /^(\d\d\d\d)-(\d\d)-(\d\d)$/) {
             ($bdpart{'year'}, $bdpart{'month'}, $bdpart{'day'}) = ($1, $2, $3);
@@ -221,7 +220,7 @@ body<=
                                  F => $ML{'.show.birthday.full2'} );
         $ret .= "</div>\n";
 
-        $ret .= "</td>\n<td class='selectvis" . $zebra_row2->() . "'>";
+        $ret .= "</td>\n<td class='selectvis'>";
         my $opt_sharebday = ( $u->opt_sharebday =~ m/^(A|F|N|R)$/ ) ? $u->opt_sharebday : 'F';
         $ret .= LJ::html_select( { name => 'opt_sharebday',
                                    title => BML::ml( '.privacy.title',
@@ -234,11 +233,11 @@ body<=
         $ret .= "</td></tr>\n";
 
         #location
-        $ret .= "<tr class='field_block'><td class='field_name'>$ML{'.fn.location'}</td>\n";
-        $ret .= "<td class='" . $zebra_row1->() . "'>";
+        $ret .= "<tr class='field_block" . $zebra_row->() . "'><td class='field_name'>$ML{'.fn.location'}</td>\n";
+        $ret .= "<td>";
         $ret .= LJ::Widget::Location->render( skip_timezone => 1, minimal_display => 1 );
 
-        $ret .= "</td><td class='selectvis" . $zebra_row2->() . "'>";
+        $ret .= "</td><td class='selectvis'>";
         $ret .= LJ::html_select( { name => 'opt_showlocation',
                                    title => BML::ml( '.privacy.title',
                                             { name => $ML{'.fn.location'} } ),
@@ -296,13 +295,10 @@ body<=
         $stripe = 0;  # reset for next block
 
         $ret .= qq {
-    <tr class='field_block'><td class='field_name'>
-    $ML{'.fn.email.system'}</td><td };
-        $ret .= $zebra_row1->();
-        $ret .= qq {style='vertical-align: middle'>
+    <tr class='field_block} . $zebra_row->() . qq{'><td class='field_name'>
+    $ML{'.fn.email.system'}</td><td style='vertical-align: middle'>
     <b>$u_email_raw</b> &nbsp; <a href='$LJ::SITEROOT/changeemail$getextra'>
-    $ML{'.email.change.system'}</a></td><td class='selectvis};
-        $ret .= $zebra_row2->() . "'>\n";
+    $ML{'.email.change.system'}</a></td><td>\n};
 
         # opt_whatemailshow
         my $cur = $u->opt_whatemailshow;
@@ -316,23 +312,23 @@ body<=
                                  N => $ML{'.security.visibility.noshow'} );
         $ret .= "</td></tr>\n";
 
-        $ret .= "<tr class='field_block'><td class='field_name'> $ML{'.fn.email.display'}</td>\n";
-        $ret .= "<td class='" . $zebra_row1->() . "'>";
+        $ret .= "<tr class='field_block" . $zebra_row->() . "'><td class='field_name'> $ML{'.fn.email.display'}</td>\n";
+        $ret .= "<td>";
 
         $ret .= DW::Setting::ProfileEmail->option( $u );
         $ret .= "<br /><span class='helper'>$ML{'.email.profile'}</span>";
 
-        $ret .= "</td><td class='selectvis" . $zebra_row2->() . "'>";
+        $ret .= "</td><td>";
 #        $ret .= "<?p <i> $ML{'.security.visibility.same'} </i> p?>";
 
         $ret .= "</td></tr>\n";
 
         if ( $u->can_have_email_alias && ! $u->prop( "no_mail_alias" ) ) {
-            $ret .= "<tr class='field_block'><td class='field_name'>";
+            $ret .= "<tr class='field_block" . $zebra_row->() . "'><td class='field_name'>";
             $ret .= BML::ml( '.fn.email.site', { siteabbrev => $LJ::SITENAMEABBREV } );
-            $ret .= "</td><td class='" . $zebra_row1->() . "' style='vertical-align: middle'>\n";
+            $ret .= "</td><td style='vertical-align: middle'>\n";
             $ret .= $u->site_email_alias;
-            $ret .= "</td><td class='selectvis" . $zebra_row2->() . "'>";
+            $ret .= "</td><td class='selectvis'>";
             # this is where we get BVL back
             my $checked = ( $u->opt_whatemailshow =~ /[BVL]/ ) ? 'Y' : 'N';
             $ret .= LJ::html_select( { name => 'opt_usesite',
@@ -347,11 +343,11 @@ body<=
         if ( $u->is_person ) {
 
             if ( LJ::is_enabled( 'ljtalk' ) ) {
-                $ret .= "<tr class='field_block'><td class='field_name'>";
+                $ret .= "<tr class='field_block" . $zebra_row->() . "'><td class='field_name'>";
                 $ret .= BML::ml( '.fn.ljtalk.address', { siteabbrev => $LJ::SITENAMEABBREV } );
-                $ret .= "</td><td class='" . $zebra_row1->() . "' style='vertical-align: middle'>" . $u->ljtalk_id;
+                $ret .= "</td><td style='vertical-align: middle'>" . $u->ljtalk_id;
                 # Don't show LJ Talk field? (opt_showljtalk)
-                $ret .= "</td><td class='selectvis" . $zebra_row2->() . "'>";
+                $ret .= "</td><td class='selectvis'>";
                 $ret .= LJ::html_select( { name => 'opt_showljtalk',
                                            id => 'opt_showljtalk',
                                            title => BML::ml( '.display.title',
@@ -362,12 +358,12 @@ body<=
                 $ret .= "</td></tr>\n";
 
                 my $jabber_title = LJ::Hooks::run_hook("jabber_title") || $ML{'/manage/settings/index.bml.jabber.title'};
-                $ret .= "<tr class='field_block'><td class='field_name'>";
+                $ret .= "<tr class='field_block" . $zebra_row->() . "'><td class='field_name'>";
                 $ret .= BML::ml( '.fn.ljtalk.status', { siteabbrev => $LJ::SITENAMEABBREV } );
-                $ret .= "</td><td class='" . $zebra_row1->() . "'>$ML{'.fn.showljtalk'}<br />";
+                $ret .= "</td><td>$ML{'.fn.showljtalk'}<br />";
                 $ret .= "<span class='helper'>" . BML::ml('/manage/settings/index.bml.jabber.text', {'jabbertitle' => $jabber_title}) . "</span>";
                 # Jabber Online Status
-                $ret .= "</td><td class='selectvis" . $zebra_row2->() . "'>";
+                $ret .= "</td><td class='selectvis'>";
                 $ret .= LJ::html_select( { name => 'opt_showonlinestatus',
                                            id => 'opt_showonlinestatus',
                                            title => BML::ml( '.privacy.title',
@@ -381,24 +377,24 @@ body<=
 
             # opt_findbyemail
             if ( LJ::is_enabled( 'opt_findbyemail' ) ) {
-                $ret .= "<tr class='field_block'><td class='field_name'>";
+                $ret .= "<tr class='field_block" . $zebra_row->() . "'><td class='field_name'>";
                 $ret .= LJ::Setting::FindByEmail->label . "</td>";
-                $ret .= "<td class='" . $zebra_row1->() . "'><span class='helper'>";
+                $ret .= "<td><span class='helper'>";
                 $ret .= BML::ml( 'settings.findbyemail.helper', {
                     sitename => $LJ::SITENAMESHORT,
                     siteabbrev => $LJ::SITENAMEABBREV } );
-                $ret .= "</span></td>\n<td class='selectvis" . $zebra_row2->() . "'>";
+                $ret .= "</span></td>\n<td class='selectvis'>";
                 $ret .= LJ::Setting::FindByEmail->as_html( $u, undef, { minimal_display => 1, helper => 0 } );
                 $ret .= "</td></tr>\n";
             }
 
             # opt_usermsg
             if ( LJ::is_enabled( 'user_messaging' ) ) {
-                $ret .= "<tr class='field_block'><td class='field_name'>";
+                $ret .= "<tr class='field_block" . $zebra_row->() . "'><td class='field_name'>";
                 $ret .= LJ::Setting::UserMessaging->label;
-                $ret .= "</td><td class='" . $zebra_row1->() . "'><span class='helper'>";
+                $ret .= "</td><td><span class='helper'>";
                 $ret .= BML::ml( 'settings.usermessaging.helper', { sitename => $LJ::SITENAMESHORT } );
-                $ret .= "</span></td>\n<td class='selectvis" . $zebra_row2->() . "'>";
+                $ret .= "</span></td>\n<td class='selectvis'>";
                 $ret .= LJ::Setting::UserMessaging->option( $u, undef, { minimal_display => 1, helper => 0 } );
                 $ret .= "</td></tr>\n";
             }
@@ -407,11 +403,11 @@ body<=
 
         if ( $u->can_use_textmessaging ) {
 
-            $ret .= "<tr class='field_block'><td class='field_name'>$ML{'.section.textmsg'}</td>\n";
-            $ret .= "<td class='" . $zebra_row1->() . "'>";
+            $ret .= "<tr class='field_block" . $zebra_row->() . "'><td class='field_name'>$ML{'.section.textmsg'}</td>\n";
+            $ret .= "<td>";
 
             $ret .= DW::Setting::TxtMsgSetup->option( $u, undef, { info_only => 1 } );
-            $ret .= "</td>\n<td class='selectvis" . $zebra_row2->() . "'>";
+            $ret .= "</td>\n<td class='selectvis'>";
             $ret .= DW::Setting::TxtMsgSetup->option( $u, undef, { vis_only => 1 } );
 
             $ret .= "</td></tr>\n";
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/manage/pubkey.bml
--- a/htdocs/manage/pubkey.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/manage/pubkey.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -100,9 +100,9 @@ body<=
     $ret .= LJ::html_hidden(userid => $u->{userid});
     my $val = LJ::did_post() ? $POST{'key'} : $u->prop( 'public_key' );
     $ret .= LJ::html_textarea({name=>'key', value=>$val, rows=>20, cols=>70 });
-    $ret .= "<br /><br /><?standout ";
+    $ret .= "<br /><br /><div class='action-box'>";
     $ret .= LJ::html_submit($ML{'.save'});
-    $ret .= " standout?>";
+    $ret .= "</div>";
     $ret .= "</form>";
     return $ret;
 
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/manage/settings/index.bml
--- a/htdocs/manage/settings/index.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/manage/settings/index.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -21,8 +21,7 @@ body<=
 
     BML::set_language_scope('/manage/settings/index.bml');
 
-    LJ::need_res("stc/settings.css", "js/settings.js");
-    LJ::need_res( { priority => $LJ::OLD_RES_PRIORITY }, "stc/settings-colors.css" );
+    LJ::need_res("stc/tabs.css", "stc/settings.css", "js/settings.js");
     LJ::set_active_crumb('manage');
 
     my $remote = LJ::get_remote();
@@ -394,27 +393,27 @@ body<=
 
     $ret .= "<div id='settings_left'>";
 
-    $ret .= "<ul id='settings_nav'>";
+    $ret .= "<ul class='tablist' id='settings_nav'>";
     foreach my $cat (@cats_order) {
         next unless $cats_with_settings{$cat}->{visible};
 
         if ($cats_with_settings{$cat}->{disabled}) {
-            $ret .= "<li class='disabled'>$cats_with_settings{$cat}->{name}</li>";
+            $ret .= "<li class='tab disabled'>$cats_with_settings{$cat}->{name}</li>";
         } else {
             my $active_class = $cat eq $given_cat ? " class='active'" : "";
-            $ret .= "<li><a href='$LJ::SITEROOT/manage/settings/$getextra${getsep}cat=$cat'$active_class>$cats_with_settings{$cat}->{name}</a></li>";
+            $ret .= "<li class='tab'><a href='$LJ::SITEROOT/manage/settings/$getextra${getsep}cat=$cat'$active_class>$cats_with_settings{$cat}->{name}</a></li>";
         }
     }
     $ret .= "</ul>";
 
-    $ret .= "<div id='settings_nav_title'><p>";
+    $ret .= "<div id='settings_nav_title' class='tab-header'><p>";
     $ret .= $cats_with_settings{$given_cat}->{desc};
     $ret .= "</p></div>";
 
     if ($cats_with_settings{$given_cat}->{form}) {
         my $confirm_msg = LJ::ejs($ML{'.form.confirm'});
         $ret .= "<script>Settings.confirm_msg = \"$confirm_msg\";</script>";
-        $ret .= "<form id='settings_form' action='$LJ::SITEROOT/manage/settings/$getextra${getsep}cat=$given_cat' method='post'>";
+        $ret .= "<form class='table-form' id='settings_form' action='$LJ::SITEROOT/manage/settings/$getextra${getsep}cat=$given_cat' method='post'>";
         $ret .= LJ::form_auth();
     }
     $ret .= "<div class='settings_content'>";
@@ -425,7 +424,7 @@ body<=
     LJ::set_active_resource_group( 'jquery' );
     LJ::need_res( { group => 'jquery' }, 'js/notifications.js' );
 
-    $ret .= "<div id='settings_save'>";
+    $ret .= "<div id='settings_save' class='action-bar'>";
     $ret .= $cats_with_settings{$given_cat}->{form} ? LJ::html_submit($ML{'.btn.save'}) : "&nbsp;";
     $ret .= "&nbsp;";
     my $del_conf = LJ::ejs( $ML{'.confirm.deleteinactive'} );
@@ -523,7 +522,7 @@ body<=
 
     } else {
         my $setting_ct = 1;
-        $ret .= "<table summary='' cellpadding='0' cellspacing='0'>";
+        $ret .= "<table summary=''>";
         foreach my $setting (@settings) {
             my $errors = $setting->errors_from_save($save_rv);
             my $args = $setting->args_from_save($save_rv);
@@ -534,8 +533,9 @@ body<=
             my $helpicon = LJ::help_icon($setting->helpurl($u));
             my $last_class = $setting_ct == scalar @settings ? " last" : "";
 
-            $ret .= "<tr>";
-            $ret .= "<td class='${given_cat}_label$last_class'>$label</td>" if $label;
+            my $row_class = $setting_ct % 2 == 0 ? "even" : "odd";
+            $ret .= "<tr class='$row_class'>";
+            $ret .= "<th class='${given_cat}_label$last_class'>$label</th>" if $label;
             $ret .= "<td class='${given_cat}_option$last_class'>" . ($option ? $option : "&nbsp;") . "</td>";
             $ret .= "<td class='${given_cat}_actionlink$last_class'>" . ($actionlink ? $actionlink : "&nbsp;") . "</td>";
             $ret .= "<td class='help$last_class'>" . ($helpicon ? $helpicon : "&nbsp;") . "</td>";
@@ -558,7 +558,7 @@ body<=
     $ret .= "</div>";
     $ret .= "</div>";
 
-    $ret .= "<div id='settings_save'>";
+    $ret .= "<div id='settings_save' class='action-bar'>";
     $ret .= $cats_with_settings{$given_cat}->{form} ? LJ::html_submit($ML{'.btn.save'}) : "&nbsp;";
     if ( $given_cat eq "notifications" ) {
         $ret .= "&nbsp;";
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/manage/subscriptions/filters.bml
--- a/htdocs/manage/subscriptions/filters.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/manage/subscriptions/filters.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -37,7 +37,7 @@ body<=
               "</script>\n";
 
     # redirect to managing access filters
-    $ret .= "<?standout " . BML::ml( '.accessfilters', { aopts => "href='$LJ::SITEROOT/manage/circle/editfilters'" } ) . " standout?>\n\n"; 
+    $ret .= "<div class='highlight-box'>" . BML::ml( '.accessfilters', { aopts => "href='$LJ::SITEROOT/manage/circle/editfilters'" } ) . "</div>\n\n"; 
 
     # and now the main page HTML
     my $img = LJ::img( 'hourglass', '', { id => 'cf-hourglass' } );
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/manage/tags.bml
--- a/htdocs/manage/tags.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/manage/tags.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -225,7 +225,7 @@ HEAD
     };
 
     if ($tagcount) {
-        $ret .= "<select name='tags' id='tags' multiple='multiple' class='tagbox' " .
+        $ret .= "<select name='tags' id='tags' multiple='multiple' class='multiple-select tagbox' " .
                 "onChange='tagselect(this)'>";
         foreach (sort { $tagsort->() } keys %$tags) {
             my $tag = $tags->{$_};
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/misc/adult_concepts.bml
--- a/htdocs/misc/adult_concepts.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/misc/adult_concepts.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -60,8 +60,8 @@ body<=
         $markedby = $journal->adult_content_marker;
     }
 
-    $ret .= "<div class='adult_warning adult_concepts'>";
-    $ret .= "<h1 style='text-align: center;'>$ML{'.title.NSFW'}</h1>";
+    $ret .= "<div class='adult_warning adult_concepts warning-box message-box'>";
+    $ret .= "<h1 class='title'>$ML{'.title.NSFW'}</h1>";
     $ret .= "<p>" . BML::ml( '.message.concepts.by' . $markedby, { journal => $journal->ljuser_display, poster => $poster->ljuser_display } ) . "</p>";
     $ret .= DW::Logic::AdultContent->interstitial_reason( $journal, $entry );
     $ret .= "</div>";
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/misc/adult_explicit.bml
--- a/htdocs/misc/adult_explicit.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/misc/adult_explicit.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -62,8 +62,8 @@ body<=
 
     my $extra_for_no_age = $remote && !$remote->best_guess_age ? BML::ml( '.setage', { aopts => "href='$LJ::SITEROOT/manage/profile/'" } ) : "";
 
-    $ret .= "<div class='adult_warning adult_explicit'>";
-    $ret .= "<h1 style='text-align: center;'>$ML{'.title.18'}</h1>";
+    $ret .= "<div class='adult_warning adult_explicit warning-box message-box'>";
+    $ret .= "<h1 class='title'>$ML{'.title.18'}</h1>";
     if ( $remote && $remote->best_guess_age ) {
         $ret .= "<p>" . BML::ml( '.message.explicit.18plus.by' . $markedby, { journal => $journal->ljuser_display, poster => $poster->ljuser_display } ) . "</p>";
     } else {
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/misc/adult_explicit_blocked.bml
--- a/htdocs/misc/adult_explicit_blocked.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/misc/adult_explicit_blocked.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -45,8 +45,8 @@ body<=
         $markedby = $journal->adult_content_marker;
     }
 
-    $ret .= "<div class='adult_warning adult_blocked'>";
-    $ret .= "<h1 style='text-align: center;'>$ML{'.title.18.blocked'}</h1>";
+    $ret .= "<div class='adult_warning adult_blocked warning-box message-box'>";
+    $ret .= "<h1 class='title'>$ML{'.title.18.blocked'}</h1>";
     $ret .= "<p>" . BML::ml( '.message.explicit.blocked.by' . $markedby, { journal => $journal->ljuser_display, poster => $poster->ljuser_display } ) . "</p>";
     $ret .= DW::Logic::AdultContent->interstitial_reason( $journal, $entry );
     $ret .= "</div>";
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/moodlist.bml
--- a/htdocs/moodlist.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/moodlist.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -100,7 +100,7 @@ body<=
 
             if ($special) {
                 my $author = LJ::Hooks::run_hook("mood_theme_author", $theme->{moodthemeid});
-                $ret .= "<tr class='standout-border standout-background'><td style='padding-left: 5px;'>$theme->{'name'}";
+                $ret .= "<tr class='highlight-box'><td style='padding-left: 5px;'>$theme->{'name'}";
                 $ret .= "<br /><span style='font-size: smaller;'>" . BML::ml('.moodtheme.byauthor', {'author' => $author}) . "</span>" if $author;
                 $ret .= "</td>\n";
             } else {
@@ -146,7 +146,7 @@ body<=
         $ret .= "<td align='center'><input type='submit' value=\"$ML{'.btn.switch'}\" /></td></tr>\n";
 
         if (@special_themes && $items{page} == 1) {
-            $ret .= "<tr class='standout-border standout-background'>";
+            $ret .= "<tr class='highlight-box'>";
             $ret .= "<td style='padding-left: 5px;' colspan='8'><h2>$ML{'.specialthemes.header'}</h2></td>";
             $ret .= "</tr>";
             foreach my $theme (@special_themes) {
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/poll/create.bml
--- a/htdocs/poll/create.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/poll/create.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -479,7 +479,7 @@ _c?>
 
             my $ret;
 
-            $ret .= "<div style='margin-top: 20px; margin-bottom: 20px'><?standout ";
+            $ret .= "<div class='action-box'>";
             if ($after >= $RULES{"elements"}->{"max"}) {
                 $ret .= "<?de [$ML{'.elements.limitreached'}] de?>\n";
             } else {
@@ -490,7 +490,7 @@ _c?>
                 $ret .= "</select>\n";
                 $ret .= LJ::html_submit("insert:$after:do", $ML{'.button.insert'}) . "\n";
             }
-            $ret .= " standout?></div>\n";
+            $ret .= "</div>\n";
 
             return $ret;
         };
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/preview/entry.bml
--- a/htdocs/preview/entry.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/preview/entry.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -196,9 +196,9 @@ _c?>
 
         $ret .= $event;
         $ret .= "</div>";
-        $ret .= "<hr/><?standout <div><p>\n";
+        $ret .= "<hr/><div class='highlight-box'><p>\n";
         $ret .= $preview_warn_text . "\n";
-        $ret .= "</p></div> standout?>";
+        $ret .= "</p></div>";
 
 
         $ret .= "<br clear='all' /><hr width='100%' size='2' align='center' />";
@@ -298,13 +298,9 @@ _c?>
                 left: -10000px;
                 top: auto;
             }
-            .standout .standout-inner, .standout-colors {
-                background-color: #ffafb6;
-                color: #111;
-                border: 1px solid #c1272d;
-            }
-
-            .standout-inner a:hover, .standout-inner a:active {
+            .highlight-box {
+                border: 1px solid #c1272c;
+                background-color: #ffd8d8;
                 color: #000;
             }
             </style>
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/profile.bml
--- a/htdocs/profile.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/profile.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -387,7 +387,7 @@ body<=
 ################################################################################
 ##### JOURNAL STATISTICS
 
-    $ret .= q{ <div class='details_stats'> };
+    $ret .= q{ <div class='details_stats detail'> };
 
     # journal warnings
     $ret .= "<span class='$_->{class}'>$_->{text}</span>" foreach $profile->warnings;
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/shop/account.bml
--- a/htdocs/shop/account.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/shop/account.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -27,7 +27,6 @@ body<=
 
     # this page uses new style JS
     LJ::need_res( 'stc/shop.css' );
-    LJ::need_res( { priority => $LJ::OLD_RES_PRIORITY }, 'stc/shop-colors.css' );
     LJ::set_active_resource_group( 'jquery' );
 
     # let's see what they're trying to do
@@ -84,7 +83,7 @@ body<=
         }
 
         if ( $error ) {
-            $ret .= qq{<div class="shop-error">$error</div>};
+            $ret .= qq{<div class="error-box">$error</div>};
         } else {
             return BML::redirect( "$LJ::SITEROOT/shop" );
         }
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/shop/cart.bml
--- a/htdocs/shop/cart.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/shop/cart.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -26,7 +26,6 @@ body<=
 
     # this page uses new style JS
     LJ::need_res( 'stc/shop.css' );
-    LJ::need_res( { priority => $LJ::OLD_RES_PRIORITY }, 'stc/shop-colors.css' );
     LJ::set_active_resource_group( 'jquery' );
 
     $title = $ML{'.title'};
@@ -37,12 +36,16 @@ body<=
     my $ret;
     $ret .= "<p><a href='$LJ::SITEROOT/shop'>&lt;&lt; $ML{'.backlink'}</a> &bull; <a href='$LJ::SITEROOT/shop/gifts'>$ML{'.gift'}</a></p>";
 
-    $ret .= "<?standout <strong>$ML{'.payment.failed.title'}</strong><br /><br />$ML{'.payment.failed'} standout?>\n"
+    $ret .= qq{
+        <div class='warning-box message-box'>
+            <div class='title'>$ML{'.payment.failed.title'}</div>
+            <p>$ML{'.payment.failed'}</p>
+        </div>\n}
         if $GET{failed};
 
     if ( LJ::did_post() ) {
         my %from_post = LJ::Widget->handle_post( \%POST, ( 'ShopCart' ) );
-        $ret .= "<div class='shop-error'>$from_post{error}</div>"
+        $ret .= "<div class='shop-error error-box'>$from_post{error}</div>"
             if $from_post{error};
     }
 
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/shop/checkout.bml
--- a/htdocs/shop/checkout.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/shop/checkout.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -28,7 +28,6 @@ body<=
 
     # this page uses new style JS
     LJ::need_res( 'stc/shop.css' );
-    LJ::need_res( { priority => $LJ::OLD_RES_PRIORITY }, 'stc/shop-colors.css' );
     LJ::set_active_resource_group( 'jquery' );
 
     my $err = DW::Shop->remote_sysban_check;
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/shop/creditcard.bml
--- a/htdocs/shop/creditcard.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/shop/creditcard.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -28,7 +28,6 @@ body<=
 
     # this page uses new style JS
     LJ::need_res( 'stc/shop.css' );
-    LJ::need_res( { priority => $LJ::OLD_RES_PRIORITY }, 'stc/shop-colors.css' );
     LJ::set_active_resource_group( 'jquery' );
 
     my $err = DW::Shop->remote_sysban_check;
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/shop/creditcard_wait.bml
--- a/htdocs/shop/creditcard_wait.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/shop/creditcard_wait.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -29,7 +29,6 @@ body<=
 
     # this page uses new style JS
     LJ::need_res( 'stc/shop.css' );
-    LJ::need_res( { priority => $LJ::OLD_RES_PRIORITY }, 'stc/shop-colors.css' );
     LJ::set_active_resource_group( 'jquery' );
 
     # see they got here ok
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/shop/entercc.bml
--- a/htdocs/shop/entercc.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/shop/entercc.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -41,7 +41,6 @@ body<=
 
     # this page uses new style JS
     LJ::need_res( 'stc/shop.css' );
-    LJ::need_res( { priority => $LJ::OLD_RES_PRIORITY }, 'stc/shop-colors.css' );
     LJ::set_active_resource_group( 'jquery' );
 
     # get their shop/cart
@@ -88,38 +87,40 @@ body<=
         my @usstates = ( '--' => '(select state)', map { $_ => $usstates{$_} } sort { $usstates{$a} cmp $usstates{$b} } keys %usstates );
 
         my @form = (
-            firstname => LJ::html_text({ name => 'firstname', maxlength => 25, value => $POST{firstname} }),
-            lastname => LJ::html_text({ name => 'lastname', maxlength => 25, value => $POST{lastname} }),
+            firstname => LJ::html_text({ name => 'firstname', maxlength => 25, value => $POST{firstname}, id => 'firstname' }),
+            lastname => LJ::html_text({ name => 'lastname', maxlength => 25, value => $POST{lastname}, id => 'lastname' }),
             '--' => '',
             country => LJ::html_select({ name => 'country', id => 'country', selected => $POST{country} }, @countries ),
             '--' => '',
-            street1 => LJ::html_text({ name => 'street1', maxlength => 100, value => $POST{street1}, size => 40 }),
-            street2 => LJ::html_text({ name => 'street2', maxlength => 100, value => $POST{street2}, size => 40 }),
-            city => LJ::html_text({ name => 'city', maxlength => 40, value => $POST{city} }),
+            street1 => LJ::html_text({ name => 'street1', maxlength => 100, value => $POST{street1}, size => 40, id => 'street1' }),
+            street2 => LJ::html_text({ name => 'street2', maxlength => 100, value => $POST{street2}, size => 40, id => 'street2' }),
+            city => LJ::html_text({ name => 'city', maxlength => 40, value => $POST{city}, id => 'city' }),
             state => LJ::html_select({ name => 'usstate', id => 'usstate', selected => $POST{usstate} }, @usstates ) . ' ' .
                      LJ::html_text({ name => 'otherstate', id => 'otherstate', maxlength => 40, value => $POST{otherstate} }),
-            zip => LJ::html_text({ name => 'zip', maxlength => 20, value => $POST{zip} }),
-            phone => LJ::html_text({ name => 'phone', maxlength => 40, value => $POST{phone} }),
+            zip => LJ::html_text({ name => 'zip', id => 'zip', maxlength => 20, value => $POST{zip} }),
+            phone => LJ::html_text({ name => 'phone', id => 'phone', maxlength => 40, value => $POST{phone} }),
             '--' => '',
-            ccnum => LJ::html_text({ name => 'ccnum', maxlength => 19 }) . $accepted_ccs,
-            cvv2 => LJ::html_text({ name => 'cvv2', maxlength => 4, size => 5 }),
-            expmon => LJ::html_select({ name => 'expmon', selected => $POST{expmon} }, map { $_ => LJ::Lang::month_long( $_ ) } 1..12 ),
-            expyear => LJ::html_select({ name => 'expyear', selected => $POST{expyear} }, map { $_ => $_ } 2010..2019 ),
+            ccnum => LJ::html_text({ name => 'ccnum', id => 'ccnum', maxlength => 19 }) . $accepted_ccs,
+            cvv2 => LJ::html_text({ name => 'cvv2', id => 'cvv2', maxlength => 4, size => 5 }),
+            expmon => LJ::html_select({ name => 'expmon', id => 'expmon', selected => $POST{expmon} }, map { $_ => LJ::Lang::month_long( $_ ) } 1..12 ),
+            expyear => LJ::html_select({ name => 'expyear', id => 'expyear', selected => $POST{expyear} }, map { $_ => $_ } 2010..2019 ),
         );
 
         my $out = "<?p $ML{'.about'} p?><?p <strong>" . LJ::Lang::ml( '.about.security', { sitename => $LJ::SITENAME } ) . "</strong> p?>";
-        $out .= "<form method='post'>" . LJ::form_auth() . "<table summary=''>";
+
+        # this is just a pseudo-simple form; HTML is not fully converted over
+        $out .= "<form class='simple-form' method='post'>" . LJ::form_auth() . "<table summary=''>";
         while ( my ( $name, $edit ) = splice( @form, 0, 2 ) ) {
             if ( $name eq '--' ) {
                 $out .= "<tr><td colspan='2'>&nbsp;</td></tr>";
                 next;
             }
 
-            my $class = $err{$name} ? 'ccrow ccrowerr' : 'ccrow';
-            $out .= "<tr><td class='$class'>" . BML::ml( ".form.$name" ) . "</td>";
+            my $class = $err{$name} ? 'ccrow error' : 'ccrow';
+            my $errormsg = $err{$name} ?" <strong class='error-msg'>$err{$name}</strong>" : "";
+
+            $out .= "<tr><td class='$class'><label for='$name'>" . BML::ml( ".form.$name" ) . "$errormsg</label></td>";
             $out .= "<td class='$class'>" . $edit . "</td><td class='$class'>";
-            $out .= " <span style='font-color: red; font-weight: bold;'>Error: " . $err{$name} . "</span>"
-                if $err{$name};
             $out .= "</td></tr>\n";
         }
         $out .= "</table><br /><?p ";
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/shop/history.bml
--- a/htdocs/shop/history.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/shop/history.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -27,7 +27,6 @@ body<=
 
     # this page uses new style JS
     LJ::need_res( 'stc/shop.css' );
-    LJ::need_res( { priority => $LJ::OLD_RES_PRIORITY }, 'stc/shop-colors.css' );
     LJ::set_active_resource_group( 'jquery' );
 
     my @carts = DW::Shop::Cart->get_all( $remote, finished => 1 );
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/shop/renames.bml
--- a/htdocs/shop/renames.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/shop/renames.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -25,7 +25,6 @@ body<=
 
     # this page uses new style JS
     LJ::need_res( 'stc/shop.css' );
-    LJ::need_res( { priority => $LJ::OLD_RES_PRIORITY }, 'stc/shop-colors.css' );
     LJ::set_active_resource_group( 'jquery' );
 
     # let's see what they're trying to do
@@ -66,7 +65,7 @@ body<=
         $error = $from_post{error} if $from_post{error};
 
         if ( $error ) {
-            $ret .= qq{<div class="shop-error">$error</div>};
+            $ret .= qq{<div class="shop-error error-box">$error</div>};
         } else {
             return BML::redirect( "$LJ::SITEROOT/shop" );
         }
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/site/index.bml
--- a/htdocs/site/index.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/site/index.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -20,10 +20,10 @@ head<=
 head<=
 <style type='text/css'>
 <!--
-dd ul li {list-style: disc; margin-left: 2em; }
+dd ul li { margin-left: 2em; }
 dt {font-weight: bold; margin-top: 10px;}
-#maplinks-left {margin-right: 1em; width: 48%; float: left;}
-#maplinks-right {margin-left: 1em; width: 48%; float: right;}
+#maplinks-left {margin-right: 2%; width: 48%; float: left;}
+#maplinks-right {margin-left: 2%; width: 48%; float: right;}
 -->
 </style>
 <=head
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/allpics.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/htdocs/stc/allpics.css	Tue Dec 28 19:40:54 2010 +0800
@@ -0,0 +1,18 @@
+/* allpics styling */
+
+table.allpics {
+    margin-left: 50px;
+}
+
+.allpics td {
+    vertical-align: bottom;
+}
+
+.allpics .userpic-img {
+    margin-right: 1em;
+    margin-top: 15px;
+}
+
+.allpics blank {
+    width: 50px;
+}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/celerity/celerity.css
--- a/htdocs/stc/celerity/celerity.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/celerity/celerity.css	Tue Dec 28 19:40:54 2010 +0800
@@ -25,34 +25,6 @@
 */
 
 /**
- * pieces from Erik Meyer's CSS Reset Reloaded
- * @link            http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
- */
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
-    margin:          0;
-    padding:         0;
-    border:          0;
-    outline:         0;
-    font-size:       100%;
-    vertical-align:  baseline;
-    background:      transparent;
-}
-
-/* @note    remove default border of linked images */
-a img, :link img, :visited img {
-    border: none;
-}
-
-/**
  * Global
  */
 
@@ -63,19 +35,18 @@ body {
     color: #222211;
 }
 
-H1, H2, #content H2, H3, H4 { font-family: "Century Gothic", Verdana, sans-serif;
+H1, H2, #content H2, H3, H4, table caption { font-family: "Century Gothic", Verdana, sans-serif;
     font-weight: normal;
     padding: .5em 0;
     line-height: 1.5;
     }
 H1 { font-size: 175%; }
 H2 { font-size: 150%; }
-#content H2 { font-size: 125%; }
+#content H2, table caption { font-size: 125%; }
 H3 { font-size: 125%; }
 H4 { font-size: 100%; }
 
-ul { list-style: square;
-    margin-left: 1em; }
+ul { list-style: square;}
 
 a:link,
 .link {
@@ -248,46 +219,6 @@ a:active,
     margin-bottom: 1em;
 }
 
-/* TALKPAGE.CSS AND HARDCODE OVERRIDES*/
-.cmtbar-odd {
-    border-bottom: none !important;
-    border-right: none !important;
-    background-color: #EEEECC !important;
-}
-.cmtbar-even {
-    border-bottom: none !important;
-    border-right: none !important;
-    background-color: #DDDDBB !important;
-}
-
-/*insert class of screened comments here*/ {
-    background-color: #EEEEEE; }
-
-/* PROFILE.CSS OVERRIDES */
-#profile_top {
-    min-width: 0;
-}
-
-.username {
-    border-bottom: 1px solid #999966 !important;
-    background-color: #EEEECC !important;
-}
-
-/* layer tables */
-table.table_layerbrowse,
-table#table_yourlayers { border-collapse: collapse; }
-
-table.table_layerbrowse,
-table.table_layerbrowse td,
-table#table_yourlayers,
-table#table_yourlayers td { border: 1px solid #999; }
-
-table#table_layerbrowse_classes,
-table#table_layerbrowse_classes td {border: none; }
-
-table.table_layerbrowse td,
-table#table_yourlayers td { padding: .15em .25em; }
-
 /**
  * Content Layouts
  *
@@ -301,8 +232,7 @@ table#table_yourlayers td { padding: .15
  * content is placed inside based on order of importance.
  */
 
- /* ER Note:  Unsure of actual use of these, taking a stab at them anyway, mostly re-measuring width */
-
+ /* Mostly re-measuring width */
 /* full page (default) */
 #primary,
 #secondary {
@@ -384,742 +314,216 @@ table#table_yourlayers td { padding: .15
     border-top: 0 !important;
 }
 
+/* generic classes */
+.disabled {
+    color: #999 !important;
+    background-color: #ddd !important;
+    border-color: #ccc !important;
+}
+.read, .inactive {
+    color: #888;
+}
+.read:hover {
+    color: #000;
+}
+.read a , .inactive a {
+    color: #999 !important;
+}
+.read:hover a {
+    color: inherit !important;
+}
 
-/**
- * Form field styles
- */
-.dw-field-default {
-    color: #333;
-    font-style: italic;
+.detail {
+    color: #555;
 }
-.standout {
+.status-hint {
+    color: #ddd;
+}
+
+.tablist .tab a {
+    background: #DDDDAA;
+    border-color: #999966;
+}
+.tablist .tab a:hover, .tablist .tab a.active {
+    background: #EEEECC;
+}
+.tab-header {
+    background: #EEEECC;
+    border-top-color: #EEEECC;
+    border-left: 1px solid #999966;
+    border-right: 1px solid #999966;
+}
+.tab-container {
+  background-color:#f7f7f7;
+  border: 1px solid #999966;
+  border-top: none;
+}
+
+.action-bar {
     text-align: center;
+    background-color: #EEEECC;
 }
-.standout .standout-inner {
-    margin-top: 0.5em;
-    margin-left: auto;
-    margin-right: auto;
-}
-.standout .standout-inner, .standout-colors {
+.action-box {
+    display: table;
+    text-align: center;
+    margin: 0.5em auto 0 auto;
+    padding: 0.5em;
     background-color: #DDDDAA;
     color: #000;
     border: 1px solid #999966;
 }
-.standout .standout-inner td {
+
+.select-list input, input.submit {
+    color: #222;
+    background-color: #DDDDAA;
+    border: 2px solid #999966;
+}
+.select-list input:active, input.submit:active {
+    color: #555;
+    background-color: #EEEEBB;
+    border: 2px solid #BBBB88;
+}
+
+.message-box .title {
+    font-weight: bold;
+}
+.message-box h1.title {
+    text-align: center;
+}
+.highlight-box {
+    border: 1px solid;
+}
+.highlight, .highlight-box {
+    border-color: #999966;
+    background: #EEEECC;
+    color: #000;
+}
+.inset-box {
+    border-right: 1px solid #DDDDAA;
+    border-bottom: 1px solid #DDDDAA;
+    background: #fff;
+    padding: 3px 5px;
+}
+.highlight-box, .message-box, .error-box {
+    margin: 1em auto;
     padding: 0.5em;
 }
-
-.standout-inner a:hover, .standout-inner a:active, .standout-inner a:hover {
-
+.warning-box {
+    border: 1px solid #999966;
+    background-color: #DDDDAA;
+    color: #000;
+}
+.error-box {
+    color: #000;
+    background-color: #fcf6db;
+    border: 1px solid #ffdfc0;
 }
 
-/**
- * Start overriding some classes set in dw-free/htdocs/stc/
- * Other site scheme designers: use your own colors here
- * /
-
-/* editicons.css */
-#uploadBox {
-    background-color: #EEEECC;
-    border: 1px solid #999966;
-    margin: 0 20px 0 0;
+.odd, tr.odd th, tr.odd td {
+    background-color: #fff;
+}
+.even, tr.even th, tr.even td {
+    background-color: #eee;
+}
+thead th, tfoot td {
+    background-color: #ffd;
+}
+.column-table tbody th  {
+    background-color: #fbfbfb;
+    border-right: 1px solid #cdcdcd;
 }
 
-/* customize.css */
-
-.theme-current {
-    background-color: #EEEECC;
-    border: 1px solid #999966;
+table.grid {
+    border-collapse: collapse;
+}
+table.grid, table.grid td {
+    border: 1px solid #999;    
 }
 
-/* widgets/customizetheme.css, themechooser.css, themenav.css, currenttheme.css, layoutchooser.css */
-
-.theme-current h2.widget-header, .layout-item.current {
+.select-list li, .NotificationTable td {
+    border-color: #ccc;
+}
+.select-list li img {
+    border-color: #EEEECC;
+}
+.selected, .select-list li.selected, tr.selected td {
     background-color: #EEEECC;
-    border: 1px solid #999966;
+    border-color: #999966;
 }
 
-h2.widget-header, .theme-item.current, .theme-item img.theme-preview, .theme-item .theme-icons {
-    border: 1px solid #999966;
+form, fieldset, legend, legend span {
+    border-color: #999966;
 }
-
-.theme-item .theme-button-disabled, .layout-item .layout-button-disabled {
-    background: #DDDDAA;
+.hint-input {
+    color: #777;
+    border: 1px solid #CCC;
 }
-
-.theme-item {
-    overflow-x: visible;
-    overflow-y: visible;
+.hint-input:focus
+{
+    color: #000;
+    border: 1px solid #999;
 }
-
-.customize-button, .theme-item .theme-button, .layout-item .layout-button {
-    color: #222;
-    background: #DDDDAA;
-    border: 2px solid #999966;
-}
-
-.theme-nav-content, .customize-content {
-    border: 1px solid #999966;
-    border-left: none;
-}
-
-.theme-selector-nav {
-    background-color: #EEEECC;
-}
-
-.theme-nav li a, .theme-nav-small li {
-    border-right: 1px solid #999966;
-}
-
-.theme-nav-small a { color: #777711; }
-
-.theme-nav li.on a {
-    border: 1px solid #999966;
-    border-right: none;
-}
-
-.theme-nav-separator {
-    border-right: 1px solid #999966;
-}
-
-.theme-nav-separator hr {
-    border-top: 1px solid #DDDDAA;
-}
-
-.customize-content .subheader {
-    background-color: #EEEECC;
-    border-bottom: 1px solid #999966;
-}
-
-.customize-content .subheader.on {
-    background-color: #EEEECC;
-}
-
-.customize-nav {
-    background-color: #EEEECC;
-}
-
-.customize-nav li a, .customize-nav li li  {
-    border-right: 1px solid #999966;
-}
-
-.customize-nav li.on a, .customize-nav li.on ul {
-    border: 1px solid #999966;
-    border-right: none;
-    border-top: none;
-}
-
-.customize-nav li.on {
-    border-top: 1px solid #999966;
-}
-
-.moodtheme-preview, .appwidget-linkslist .tips-box {
-    background-color: #EEEECC;
-    border: 1px solid #999966;
-}
-
-.theme-current-links {
-    border-bottom: 1px solid #999966;
-    border-right: 1px solid #999966;
-}
-
-.theme-nav li a, .customize-nav li a {
-    color: #777711;
-    font-weight: bold;
-}
-
-/* more, detailed by page*/
-/*customizetheme.css*/
-.customize-button {
-    color: #222;
-    background: #DDDDAA;
-    border: 2px solid #999966;
-}
-.customize-inner-wrapper {
-    background: url("/img/celerity/celgrn-borderpixel.gif") repeat-y scroll 134px 50%;
-}
-.customize-content .subheader {
-    background-image: url("/img/celerity/celgrn-arrow-right.gif");
-    background-position: left center;
-    background-repeat: no-repeat;
-    border-bottom: 1px solid #EEEECC;
-}
-.customize-content .subheader.on {
-    background-image: url("/img/celerity/celgrn-arrow-down.gif");
-    background-position: left center ;
-    background-repeat: no-repeat;
-}
-.customize-nav li.on a,
-.customize-nav li.on ul {
-    background: #fff;
-}
-.customize-nav li.on a {
-    border-right: 1px solid #FFFFFF;
-}
-.customize-nav li.on li a {
-    background: #fff;
-    border-right: 1px solid #FFFFFF;
-}
-.customize-nav li.on li {
-    border-right: 1px solid #fff;
-}
-.customize-nav li a:visited {
-    color: #999966;
-}
-
-
-/*themenav.css*/
-.theme-nav-inner-wrapper {
-    background: url("/img/celerity/celgrn-borderpixel.gif") repeat-y scroll 134px 50%;
-}
-.theme-selector-nav {
-    background-color: #EEEECC;
-}
-.theme-nav li.on a {
-    background-color: #fff ;
-}
-.theme-nav li a:visited {
-    color: #999966;
-}
-.theme-nav-separator {
-    border-right: 1px solid #EEEECC;
-}
-.theme-nav-separator hr {
-    border-top: 1px solid #EEEECC;
-}
-
-/*currentheme.css*/
-.theme-current h2.widget-header {
-    background-color: #EEEECC;
-    background-image: none;
-}
-.theme-current-content h3 {
-    color: #000;
-}
-.theme-current-image {
-     border: 1px solid #fff;
-}
-.theme-current-links {
-    background-color: #fff;
-    border-right: 1px solid #DDDDAA;
-    border-bottom: 1px solid #DDDDAA;
-    padding: 3px 5px;
-}
-.theme-current ul li {
-    background: url("/img/customize/arrow.gif") no-repeat 0 5px;
-}
-
-/*themechooser*/
-.theme-item.current {
-    border: 1px solid #DDDDAA;
-    background-color: #EEEECC;
-}
-.theme-item img.theme-preview {
-    border: 1px solid #EEEECC;
-}
-.theme-item.special h4,
-.theme-item.special .theme-desc {
-    background-color: #ffc;
-}
-.theme-item .theme-button {
-    color: #222;
-    background: #DDDDAA;
-    border: 2px solid #999966;
-}
-.theme-item .theme-button-disabled {
-    background: #999;
-}
-.theme-item .theme-icons {
-    border: 1px solid #EEEECC;
-    background-color: #fff;
-}
-.theme-time,
-.theme-upgrade-icon {
-    color: #333 !important;
-}
-.theme-upgrade-icon:hover .theme-upgrade-level,
-.theme-time:hover span.theme-availability {
-    background-color: #fff;
-}
-.theme-paging a:visited {
-    color: #999966;
-}
-
-
-/* inbox */
-
-.folders a.active {
-    font-weight: bold;
-    background-color: #EEEECC !important;
-    border: 1px solid #999966;
-}
-
-/* lj_settings.css */
-
-.section_head, table.alternating-rows th, div.username {
-    background-color: #DDDDAA;
-    border: none;
-}
-.cat_head {
-    background-color: #ddd;
-}
-.field_name {
-    background-color: #EEEECC;
-}
-.field_desc {
-
-}
-.view_options {
-
-}
-.zebra_row {
-    background-color: #ffd;
-}
-
-/* comm_promo.css */
-
-div.CommunityPromoBox {
-    border: 1px solid #DDDDAA;
-}
-
-/* settings.css */
-
-#settings_save {
-    background: #EEEECC;
-}
-
-#settings_nav li a {
-    background: #DDDDAA;
-    border: 1px solid #999966;
-    border-bottom: none;
-}
-
-#settings_nav li a:hover, #settings_nav li a.active {
-    background: #EEEECC;
-}
-
-#settings_nav_title p {
-    background: #EEEECC;
-    border-left: 1px solid #999966;
-}
-
-/* cprod.css */
-
-.cprod.h3 {
-    background: #DDDDAA;
-
-}
-
-.cprod content {
-    border: 1px solid #999966;
-}
-
-
-/* allpics styling */
-
-table.allpics {
-    margin-left: 50px;
-}
-
-.allpics td {
-    vertical-align: bottom;
-}
-
-.allpics .userpic-img {
-    margin-right: 1em;
-    margin-top: 15px;
-}
-
-.allpics blank {
-    width: 50px;
-}
-
-
-/* editfilters styling */
-
-table.editfilters td {
-    padding: 5px;
-}
-
-
-/* FAQ */
-
-.faqlist {
-    list-style: square outside;
-    margin-bottom: 2em;
-}
-
-/* Inbox - Compose */
-
-.inbox-compose {
-    width: 100%;
-}
-
-.inbox-compose td {
-    vertical-align: top;
-}
-
-
-/* manage/invitecodes.bml */
-
-.invitecodes td {
-    padding: 5px;
-}
-
-
-/* shop pages */
-
-/* this is so the main shop page does not look like toasted ass */
-.shopbox, .appwidget-shopitemgroupdisplay {
-    min-width: 20em;
-    min-height: 10em;
-    float: none;
-}
-
-.shopbox, .appwidget-shopitemgroupdisplay,
-.shop-account-status, .shop-error, .shop-cart-status,
-.shop-cart td, .shop-cart th, .shop-item-highlight {
-    border: 1px solid #999966;
-}
-
-/* create flow */
-
-.create-form td {
-    padding: 5px;
-}
-
-.appwidget-createaccount .create-button {
-    color: #222;
-    background-color: #DDDDAA;
-}
-
-.appwidget-createaccountprogressmeter .step-block-active {
-    color: #fff;
-    background-color: #777711;
-}
-
-.appwidget-createaccountprogressmeter .step-block-inactive {
-    color: #222;
-    background-color: #DDDDAA;
-}
-
-.appwidget-createaccountprogressmeter .step-selected {
-    color: #777711;
-}
-
-.appwidget-createaccountprogressmeter .step-previous {
-    color: #DDDDAA;
-}
-
-.appwidget-createaccountprogressmeter .step-next {
-    color: #222;
-}
-
-.appwidget-createaccountprofile .header {
-    color: #777711;
-}
-
-.appwidget-createaccountprofile .field-name {
-    background-color: #e0e0e0;
-}
-
-
-/* Site Map, override page-level style */
-dd ul li {list-style: square !important;
-    margin-left: 2em !important; }
-dt {font-weight: bold !important;
-    margin-top: 10px !important;}
-#maplinks-left {margin-right: 2% !important;
-    width: 48% !important;
-    float: left !important;}
-#maplinks-right {margin-left: 2% !important;
-    width: 48% !important;
-    float: right !important;}
-
-/* lj_base-app.css */
-hr.hr {
-    color: #999966;
-    background-color: #999966;
-}
-
-input.create-account {
-    color: #222;
-    background: #DDDDAA;
-    border: 2px solid #999966;
-}
-input.text,
-textarea.text,
-select.select {
-    background: #fff url("/img/input-bg.gif") repeat-x 0 -1px;
-    border: 1px solid #bbb;
-    border-top: 1px solid #999;
-    border-left: 1px solid #999;
-}
-.detail {
-
-}
-h2.widget-header {
-
-}
-
-table.alternating-rows th {
-    border-top: 1px solid #999966;
-    border-bottom: 1px solid #999966;
-    background-color: #EEEECC;
-}
-table.alternating-rows tr.altrow1 {
-    background-color: #fff;
-}
-table.alternating-rows tr.altrow2 {
-    background-color: #eee;
-}
-table.alternating-rows td {
-    border-bottom: 1px solid #ccc;
-}
-
-.appwidget .more-link {
-    color: #999966 !important;
-    background: url('/img/arrow-double-black.gif') no-repeat 0 60%;
-}
-
-.arrow-link,
-.more-link {
-    background: url('/img/arrow-double-black.gif') no-repeat 0 50%;
-}
-
-.message {
-    border: 5px solid #eee;
-}
-.message blockquote {
-    border: 1px solid #aaa;
-}
-
-.standout-border {
-    border: 1px solid #999966;
-}
-.standout-background {
-    background-color: #DDDDAA;
-}
-
-div.right-sidebar {
-    color: #000000;
-    background-color: #DDDDAA;
-    border: 1px solid #999966;
-}
-.textbutton {
-    color: #999966;
-}
-/*NOTE: corner.gif is white*/
-h2.solid-neutral {
-    background-color: #DDDDAA;
-    color: #222;
-}
-h2.solid-blue { /*which is now solid not-blue*/
-    background-color: #DDDDAA;
-    color: #222;
-}
-.solid-neutral {
-    background: #ededed;
-}
-input.bright {
-    background-color: #DDDDAA;
-    border: 1px solid #999966;
-    color: #222;
-}
-.helper {
-    /*color: #666;*/
-}
-.rounded-box {
-    background: no-repeat;
-    zoom: 1;
-}
-.rounded-box .rounded-box-tr {
-    background: 100% 0 no-repeat;
-}
-.rounded-box .rounded-box-bl {
-    background: 0 100% no-repeat;
-}
-.rounded-box .rounded-box-br {
-    background: 100% 100% no-repeat;
-    padding: 2px; /* border width */
-}
-
-
-/* esn.css */
-
-.inbox_newitems { padding-bottom: .5em;}
-
-.Subscribe tr.Inactive {
-    color: #aaa;
-}
-
-.Subscribe tr.Disabled {
-    background-color: #ddd;
-}
-
-.Subscribe tr.altrow {
-    background-color: #f1f1f1;
-}
-
-.Subscribe tr.Inactive a {
-    color: #aaa;
-}
-.Subscribe td p {
-    color: #666;
-    background: #fff;
-}
-
-.CategoryRow td {
-    border-bottom: 1px solid #ddd;
-}
-
-#Subscriptions tr.lighter {
-    background-color: #eee;
-}
-#Subscriptions tr.darker {
-    background-color: #ddd;
-}
-#SubscribeSaveButtons {
-    border: 1px solid #333;
-    }
-
-.NotificationTable tr.Selected {
+.multiple-select {
     background-color: #eee;
 }
 
-.NotificationTable tr.Selected td {
-    border-top: 1px solid #ccc;
+.table-form table {
+  background-color:#fff;
 }
 
-.NotificationTable #all_Body > .Selected:first-child td {
-    border-top: none !important;
+.simple-form .error input {
+    border: 3px solid #ff0000;
+}
+.simple-form .error .error-msg {
+    color: #ff0000;
+    display: block;
 }
 
-.NotificationTable td {
-    padding: .25em;
+.section-nav {
+    background-color: #EEEECC;
 }
-.NotificationTable .inbox {
-
+.section-nav li a, .section-nav ul, .section-nav li, .section-nav-separator {
+    border-color: #999966;
+    color: #777711;
+}
+.section-nav li a:visited {
+    color: #999966;
+}
+.section-nav li.on {
+    background-color: #fff;
+}
+.section-nav-content {
+    border-color: #999966;
+}
+.section-nav-inner-wrapper {
+    background: url("/img/celerity/celgrn-borderpixel.gif") repeat-y scroll 134px 50%;;
 }
 
-.NotificationTable .inbox .header .checkbox {
-    border-top: 1px solid #DDDDCC;
-    border-bottom: 1px solid #DDDDCC;
-    border-left: 1px solid #DDDDCC;
+.collapsible .collapse-button {
+    width: 20px;
+}
+.collapsible.collapsed .collapse-button {
+    background-image: url("/img/celerity/celgrn-arrow-right.gif");
+}
+.collapsible.expanded .collapse-button {
+    background-image: url("/img/celerity/celgrn-arrow-down.gif");
 }
 
-.NotificationTable .inbox .header .actions {
-    border-top: 1px solid #DDDDCC;
-    border-bottom: 1px solid #DDDDCC;
-    border-right: 1px solid #DDDDCC;
+.header {
+    background-color: #EEEEDD;
+    border-bottom: 1px solid #999966;
+}
+.subheader {
+    background-color: #EEEECC;
+    border-bottom: 1px solid #999966;
+    margin: 1em 0 0;
+    padding: 0.2em;
+    font-size: 110%;
 }
 
-.inbox .header {
-    background: #EEEEDD;
-}
-
-.InboxItem_Read {
-    color: #888;
-}
-span.InboxItem_Read:hover {
-    color: #000;
-}
-span.InboxItem_Read a {
-    color: #999 !important;
-}
-span.InboxItem_Read:hover a {
-    color: inherit !important;
-}
-
-.inbox .alt {
-    background: #f6f6f6;
-}
-.inbox td.NoItems {
-    color: #ddd;
-}
-.inbox td.time {
-    color: #555;
-}
-
-.folders a {
-    color: #000;
+.preview-image {
     border: 1px solid #fff;
 }
-.folders a:visited, .folders a:link {
-    color: #000;
-}
-.folders a:hover {
-    border: 1px solid #DDDDCC;
-    background-color: #EEEEDD;
-}
-
-.ippu {
-    color: #000000
-}
-.ippu .track_title {
-    color: #DDDDAA;
-}
-
-/* entry.css */
-a#lj_userpicselect {
-    color: #999966;
-}
-#lj_userpicselect_img {
-    border: 1px solid #fff;
-}
-#lj_userpicselect_img:hover {
-    border: 1px solid #999966;
-}
-#lj_userpicselect_img_txt {
-    color: #999966 !important;
-}
-#userpic_preview_image.userpic_loggedout {
-    border: 1px solid #999966;
-}
-.userpic_preview_border {
-    border: 1px solid #ccc;
-}
-#infobox {
-    border-left: 1px solid #000;
-}
-#compose-entry {
-    border-bottom: 1px solid #bbb;
-}
-#compose-entry ul li a {
-    background-color: #fff;
-    border: 1px solid #bbb;
-    border-bottom: none;
-}
-#compose-entry ul li.on a {
-    border-bottom: 1px solid #fff;
-}
-#draft-container {
-    border: 1px solid #bbb;
-    border-top: none;
-}
-#draftstatus {
-    background-color: #fff;
-}
-#spellcheck-results {
-    border: 1px solid #DDDDAA;
-    background-color: #fff;
-}
-#htmltools {
-    border-right: 1px solid #bbb;
-    border-left: 1px solid #bbb;
-    background: #fff;
-}
-#htmltools ul {
-    border-bottom: 1px solid #8D8D8D;
-}
-#options, #public, #submitbar {
-    border: 1px solid #DDDDCC;
-    background-color: #EEEEDD;
-}
-#public {
-    /*color:#666;*/
-}
-
 
 /* contextualhover.css */
 div.ContextualPopup div.Inner {
@@ -1131,122 +535,119 @@ div.ContextualPopup div.Inner a, div.Con
         color: #999966 !important;
         }
 
+.ippu {
+    color: #000000
+}
+.ippu .track_title {
+    color: #DDDDAA;
+}
+
+/**
+ * Temporary page-specific styling
+ * /
+/* talkpage */
+.cmtbar { border-bottom: none; border-right: none; }
+td.odd  { background-color: #EEEECC; }
+td.even { background-color: #DDDBBB; }
+td.screened { background-color: #EEEEEE; }
+
 /* profile.css */
-
 .section, .username, .actions li {
     background-color: #EEEECC;
     border-bottom: 1px solid #999966;
     color: #777711;
 }
-
-.section img, .username img {
-    padding-left: 3px;
+.section span.section_link {
+    color: #000;
 }
 
-.tooltip {
-    border-bottom: 1px dotted #000;
+/* lj_settings.css */
+.section_head {
+    background-color: #DDDDAA;
+    border: none;
 }
-li.profile_join_disabled, li.profile_addtrust_disabled,
-li.profile_addsub_comm_disabled, li.profile_addsub_feed_disabled,
-li.profile_addsub_person_disabled, li.profile_postentry_disabled,
-li.profile_trackuser_disabled, li.profile_sendmessage_disabled {
-    color: #999;
-}
-.details_stats p {
-        color: #666;
-    }
-.details_stats .account_level {
-        color: #000;
-    }
-.section span.section_link {
-        color: #000;
-    }
-.section_body .inner_section_header {
-
-    }
-.section_body_title {
-
-}
-.profile th {
-
-}
-
-/* tags.css */
-#selected_tags
-{
-    color: #777;
-}
-.tagsort
-{
-
-}
-.tagfield {
-    color: #777;
-    border: 1px solid #CCC;
-}
-.tagfield:focus
-{
-    color: #000;
-    border: 1px solid #999;
-}
-.tagfield_error
-{
-    border: 1px solid red;
-    background-color: #ecd7d7;
-}
-.proptbl .t
-{
-
-    background-color: #fbfbfb;
-    border-right: 1px solid #cdcdcd;
-}
-.proptbl .r
-{
-
-    background-color: #fbfbfb;
-    border-right: 1px solid #cdcdcd;
-}
-.proptbl .rv
-{
-    background-color: #eee;
-}
-.edittbl .l, .lsep
-{
-    border-right: 1px solid;
-}
-.edittbl .sep
-{
-    border-top: 1px solid;
-}
-.curtags
-{
-
-}
-.tagbox_nohist
-{
-    background-color: #eee;
-}
-
-/* Adult warning interstitals */
-
-div.adult_warning {
-    background-color: #DDDDAA;
-    border: 1px solid #999966;
-    padding: 0 10px;
-}
-
-/* For the manage/banusers page */
-
-.userslist-table tr.odd {
+.field_name {
     background-color: #EEEECC;
 }
 
-.userslist-table tr.even {
-    background-color: #FFF;
+/* esn.css */
+.CategoryRow td {
+    border-bottom: 1px solid #ddd;
 }
 
-/* For the community/settings page */
-
+/* community/settings */
 .community-settings legend {
     color: #888833;
-    }
+}
+
+/* shop pages */
+.shop-item-highlight {
+    border: 1px solid #999966;
+}
+
+/* inbox */
+.folders a {
+    color: #000;
+    border: 1px solid #fff;
+}
+.folders a.selected {
+    background: #EEEECC;
+    border-color: #999966;
+}
+.folders a:hover {
+    border-color: #DDDDCC;
+    background: #EEEEDD;
+}
+
+/* entry.css */
+a#lj_userpicselect {color:#999966;}
+#lj_userpicselect_img {border:1px solid #fff;}
+#lj_userpicselect_img:hover {border:1px solid #999966;}
+#lj_userpicselect_img_txt {color:#999966 !important;}
+#userpic_preview_image.userpic_loggedout {border:1px solid #999966;}
+.userpic_preview_border {border:1px solid #ccc;}
+#infobox {border-left:1px solid #000;}
+#compose-entry {border-bottom:1px solid #bbb;}
+#compose-entry ul li a {background-color:#fff;border:1px solid #bbb;border-bottom:none;}
+#compose-entry ul li.on a {border-bottom:1px solid #fff;}
+#draft-container {border:1px solid #bbb;border-top:none;}
+#draftstatus {background-color:#fff;}
+#spellcheck-results {border:1px solid #DDDDAA;background-color: #fff;}
+#htmltools {border-right:1px solid #bbb;border-left:1px solid #bbb;background:#fff;}
+#htmltools ul {border-bottom:1px solid #8D8D8D;}
+#options, #public, #submitbar {border:1px solid #DDDDCC;background-color:#EEEEDD;}
+
+/* create flow */
+.appwidget-createaccount .create-button, .appwidget-createaccountprogressmeter .step-block-inactive { color: #222; background-color: #DDDDAA; }
+.appwidget-createaccountprogressmeter .step-block-active { color: #fff; background-color: #777711; }
+.appwidget-createaccountprogressmeter .step-selected, .appwidget-createaccountprofile .header { color: #777711; }
+.appwidget-createaccountprogressmeter .step-previous { color: #DDDDAA; }
+.appwidget-createaccountprogressmeter .step-next { color: #222; }
+.appwidget-createaccountprofile .field-name { background-color: #e0e0e0; }
+
+/* lj_base-app.css */
+hr.hr {
+    color: #999966;
+    background-color: #999966;
+}
+
+input.text,
+textarea.text,
+select.select {
+    background: #fff url("/img/input-bg.gif") repeat-x 0 -1px;
+    border: 1px solid #bbb;
+    border-top: 1px solid #999;
+    border-left: 1px solid #999;
+}
+
+.appwidget .more-link {
+    color: #999966 !important;
+    background: url('/img/arrow-double-black.gif') no-repeat 0 60%;
+}
+
+.message {
+    border: 5px solid #eee;
+}
+.message blockquote {
+    border: 1px solid #aaa;
+}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/choice-list.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/htdocs/stc/choice-list.css	Tue Dec 28 19:40:54 2010 +0800
@@ -0,0 +1,11 @@
+.choice-list ul {
+    list-style: none;
+}
+
+.choice-list fieldset.submit {
+    float: none;     
+    width: auto;
+    text-align: center;
+    padding: 1em 0;
+    margin:0;
+}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/collapsible.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/htdocs/stc/collapsible.css	Tue Dec 28 19:40:54 2010 +0800
@@ -0,0 +1,7 @@
+.collapsible .collapse-button {
+    text-indent: -9999em;
+    float: left;
+    margin-right: 0.3em;
+    background-position: left center;
+    background-repeat: no-repeat;
+}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/customize.css
--- a/htdocs/stc/customize.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/customize.css	Tue Dec 28 19:40:54 2010 +0800
@@ -3,9 +3,8 @@ h2.widget-header {
     clear: left;
     font-family: Arial;
     font-weight: bold;
-    margin: 0 0 8px 0 !important;
-    padding: 5px 8px !important;
-    border: none !important;
+    margin: 0 0 8px 0
+    padding: 5px 8px;
 }
 
 .theme-current {
@@ -47,21 +46,12 @@ form.theme-switcher {
     position: relative;
 }
 
-.beta-feedback {
-    text-align: right;
-    margin-bottom: 10px;
-}
-
-.beta-feedback a {
-    padding-left: 35px;
-    background: url(/img/beta.gif) no-repeat 0 50%;
-}
-
 .theme-titles P {
     overflow: hidden;
     zoom: 1;
 }
 
-.theme-item {
-    border: 1px solid #666;
+.layout-item.highlight {
+    border-width: 1px;
+    border-style: solid;
 }
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/dev/classes.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/htdocs/stc/dev/classes.css	Tue Dec 28 19:40:54 2010 +0800
@@ -0,0 +1,19 @@
+.cmtbar {
+    min-width: 0 !important;
+}
+
+
+h3 {
+    margin-top: 5em;
+    padding-top: 1em;
+    border-top: 0.5em dashed gray;
+}
+
+h2 + h3 {
+    margin-top: 1em;
+    border-top-style: none;
+}
+
+h3.subheader {
+    border-top: none;
+}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/editicons.css
--- a/htdocs/stc/editicons.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/editicons.css	Tue Dec 28 19:40:54 2010 +0800
@@ -21,10 +21,6 @@ hr {
 #userpic_authas {
     margin-bottom: 10px;
 }
-.box {
-    background-color: #eee;
-}
-
 #uploadBox {
     float: left;
     width: 300px;
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/esn.css
--- a/htdocs/stc/esn.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/esn.css	Tue Dec 28 19:40:54 2010 +0800
@@ -128,11 +128,6 @@ div.argOptsContainer {
     margin: 0 0 .4em 0;
 }
 
-#NotificationSidebar .ljad {
-    float: left;
-    margin-right: 1em;
-}
-
 .esnlinks {
     float: right;
     display: block;
@@ -145,13 +140,17 @@ div.argOptsContainer {
     margin: 0em 0 0em 0;
 }
 
+.NotificationTable td {
+    border-top-width: 1px;
+    border-top-style: solid;
+}
+
 .inbox .header {
     width: 100%;
     margin: 0;
     vertical-align: middle;
     border: 0;
     padding: 3px;
-	background: #eee;
 }
 
 .actions {
@@ -172,6 +171,7 @@ span.Pages input {
 .inbox_newitems {
     font-weight: bold;
     overflow: hidden;
+    padding-bottom: .5em;
 }
 
 .InboxItem_Controls {
@@ -253,11 +253,8 @@ span.Pages input {
     margin: 0px;
     padding: 0px 3px 1px 2px; 
 }
-.folders a:hover {
-    background-color: #eee;
-}
-.folders a.active {
-    background-color: #eee;
+.folders a.selected {
+    font-weight: bold;
 }
 .folders a.subs {
     padding-left: 1em;
@@ -299,3 +296,10 @@ td#table_inbox_folders { vertical-align:
 td#table_inbox_folders { vertical-align: top; }
 
 .folders { margin-top: 1em; }
+
+.inbox-compose {
+    width: 100%;
+}
+.inbox-compose td {
+    vertical-align: top;
+}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/faq.css
--- a/htdocs/stc/faq.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/faq.css	Tue Dec 28 19:40:54 2010 +0800
@@ -1,9 +1,5 @@
-#faq ol li {
+#faq ul, #faq ol {
     margin-left: 3em;
-    list-style: decimal;
+    margin-bottom: 2em;
+    list-style-type: outside;
 }
-
-#faq ul li {
-    margin-left: 3em;
-    list-style: disc;
-}
\ No newline at end of file
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/gradation/gradation.css
--- a/htdocs/stc/gradation/gradation.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/gradation/gradation.css	Tue Dec 28 19:40:54 2010 +0800
@@ -12,45 +12,12 @@
 
  /*  Colors:
      vrylt=#888888 (borders)
-    dk=#333333 (standout, hover ul)
+    dk=#333333 (hover ul)
     vrydk=#222222 (hover a)
     med=#444444 (inactive tabs, evencomment)
     lt=#666666 (active tabs)
     altlt=#555555 (oddcomment, footer border)
 */
-
-
-/**
- * pieces from Erik Meyer's CSS Reset Reloaded
- * @link            http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
- */
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
-    margin:          0;
-    padding:         0;
-    border:          0;
-    outline:         0;
-    font-size:       100%;
-    vertical-align:  baseline;
-    background:      transparent;
-}
-
-/* @note    remove default border of linked images */
-a img, :link img, :visited img {
-    border: none;
-}
-
-ol, ul {
-    list-style:      none;
-}
 
 /**
  * Global
@@ -66,18 +33,17 @@ body {
     color: #e9e9e0;
 }
 
-H1, H2, H3, H4 {
+H1, H2, H3, H4, table.caption {
     padding: 1em 0;
     line-height: 1em;
     }
 H1 { font-size: 175%; }
 H2 { font-size: 150%; }
-#content H2 { font-size: 125%; }
+#content H2, table caption { font-size: 125%; }
 H3 { font-size: 125%; }
 H4 { font-size: 100%; }
 
-ul { list-style: circle;
-    margin-left: 1em; }
+ul { list-style: circle; }
 
 a:link,
 .link {
@@ -334,49 +300,6 @@ body {
     margin-bottom: 1em;
 }
 
-/* TALKPAGE.CSS AND HARDCODE OVERRIDES*/
-.cmtbar-odd {
-    border-bottom: none !important;
-    border-right: none !important;
-    background-color: #444444 !important;
-    background-image: url("/img/gradation/blackfade.png");
-    background-position: top;
-    background-repeat: repeat-x;
-}
-.cmtbar-even {
-    border-bottom: none !important;
-    border-right: none !important;
-    background-color: #555555 !important;
-    background-image: url("/img/gradation/blackfade.png");
-    background-position: top;
-    background-repeat: repeat-x;
-}
-
-/*insert class of screened comments here*/ {
-    background-color: #333333; }
-
-/* PROFILE.CSS OVERRIDES */
-#profile_top {
-    min-width: 0;
-}
-
-
-/* layer tables */
-table.table_layerbrowse,
-table#table_yourlayers { border-collapse: collapse; }
-
-table.table_layerbrowse,
-table.table_layerbrowse td,
-table#table_yourlayers,
-table#table_yourlayers th,
-table#table_yourlayers td { border: 1px solid #888888; }
-
-table#table_layerbrowse_classes,
-table#table_layerbrowse_classes td {border: none; }
-
-table.table_layerbrowse td,
-table#table_yourlayers th,
-table#table_yourlayers td { padding: .15em .25em; }
 
 /**
  * Content Layouts
@@ -391,8 +314,7 @@ table#table_yourlayers td { padding: .15
  * content is placed inside based on order of importance.
  */
 
- /* ER Note:  Unsure of actual use of these, taking a stab at them anyway, mostly re-measuring width */
-
+ /* Mostly re-measuring width */
 /* full page (default) */
 #primary,
 #secondary {
@@ -474,496 +396,318 @@ table#table_yourlayers td { padding: .15
     border-top: 0 !important;
 }
 
+textarea, input {
+    background-color: #222;
+    color: #fff;
+    border: 1px solid #888;
+}
 
-/**
- * Form field styles
- */
-.dw-field-default {
+/* generic classes */
+.disabled {
+    color: #999 !important;
+    background-color: #333 !important;
+    border-color: #ccc !important;
+}
+.read, .inactive {
+    color: #888;
+}
+.read:hover {
     color: #eee;
-    font-style: italic;
 }
-.standout {
+.read a, .inactive a {
+    color: #999 !important;
+}
+.read:hover a {
+    color: inherit !important;
+}
+
+.detail {
+    color: #ccc;
+}
+.status-hint {
+    color: #ddd;
+}
+
+.tablist .tab a {
+    background: #444444;
+    border-color: #888888;
+    color: #eeeeee;
+}
+.tablist .tab a:hover, .tablist .tab a.active {
+    background: #666666;
+}
+.tab-header {
+    background: #666666;
+    border-top-color: #666666;
+    border-left: 1px solid #888888;
+    border-right: 1px solid #888888;
+}
+.tab-container {
+  background-color:#222;
+  border: 1px solid #888;
+  border-top: none;
+}
+
+.action-bar {
     text-align: center;
+    background-color: #666666;
 }
-.standout .standout-inner {
+.action-box {
+    display: table;
+    text-align: center;
+    margin: 0.5em auto 0 auto;
+    padding: 0.5em;
     background-color: #333333;
     color: #eee;
     border: 1px solid #555555;
-    margin-top: 0.5em;
-    margin-left: auto;
-    margin-right: auto;
 }
-.standout .standout-inner td {
+
+.select-list input, input.submit {
+    background: #444444;
+    color: #fff;
+    border: 2px solid #444;
+    border-top: 2px solid #888;
+    border-left: 2px solid #888;
+}
+.select-list input:active, input.submit:active {
+    background: #666666;
+    color: #eee;
+    border: 2px solid #888;
+    border-top: 2px solid #444;
+    border-left: 2px solid #444;
+}
+
+.message-box .title {
+    font-weight: bold;
+}
+.message-box h1.title {
+    text-align: center;
+}
+.highlight-box {
+    border: 1px solid;
+}
+.highlight, .highlight-box {
+    border-color: #888888;
+    background: #333333;
+    color: #fff;
+}
+.inset-box {
+    background: #111;
+    border: 1px solid #888;
+    padding: 3px 5px;
+}
+.highlight-box, .message-box, .error-box {
+    margin: 1em auto;
     padding: 0.5em;
 }
+.warning-box {
+    border: 1px solid #fff;
+    background-color: #333;
+    color: #fff;
+}
+.error-box {
+    color: #fff;
+    background-color: #916E10;
+    border: 1px solid #ffdfc0;
+}
 
-.standout-inner a:hover, .standout-inner a:active, .standout-inner a:hover {
+.odd, tr.odd th, tr.odd td {
+    background-color: #111;
+}
+.even, tr.even th, tr.even td,
+thead th, tfoot td {
+    background-color: #1a1a1a;
+}
+.column-table tbody th {
+    background-color: #333;
+    border-right: 1px solid #888888;
+}
 
+table.grid {
+    border-collapse: collapse;
+}
+table.grid, table.grid td {
+    border: 1px solid #888;    
+}
+
+.select-list li, .NotificationTable td {
+    border-color: #888;
+}
+.select-list li img {
+    border-color: #666666;
+}
+.selected, .select-list li.selected, tr.selected td {
+    background-color: #666666;
+    border-color: #888888;
+}
+
+form, fieldset, legend, legend span {
+    border-color: #888888;
+}
+.hint-input {
+    color: #999;
+    border: 1px solid #888888;
+}
+.hint-input:focus {
+    color: #fff;
+    border: 1px solid #888888;
+}
+.multiple-select {
+    background-color: #444444;
+}
+
+.table-form table {
+  background-color:#111;
+}
+
+.simple-form .error input {
+    border: 3px solid #ff0000;
+}
+.simple-form .error .error-msg {
+    color: #ff0000;
+    display: block;
+}
+
+.section-nav {
+    background-color: #444444;
+}
+.section-nav li a, .section-nav ul, .section-nav li, .section-nav-separator {
+    border-color: #888888;
+}
+.section-nav-content {
+    border-color: #888888;
+}
+.section-nav li.on {
+    background-color: #111;
+}
+.section-nav li a:visited {
+    color: #888888;
+}
+.section-nav-inner-wrapper {
+    background: url("/img/gradation/gradgray-borderpixel.gif") repeat-y scroll 134px 50%;
+}
+
+.collapsible .collapse-button {
+    width: 20px;
+}
+.collapsible.collapsed .collapse-button {
+    background-image: url("/img/gradation/gradgray-arrow-right.gif");
+}
+.collapsible.expanded .collapse-button {
+    background-image: url("/img/gradation/gradgray-arrow-down.gif");
+}
+
+.header {
+    background: #666666;
+}
+.subheader {
+    background-color: #666666;
+    border-bottom: 1px solid #888888;
+    margin: 1em 0 0;
+    padding: 0.2em;
+    font-size: 110%;
+}
+
+.preview-image {
+     border: 1px solid #111111;
+}
+
+
+/* contextualhover.css */
+div.ContextualPopup div.Inner {
+    background-color: #444444 !important;
+    color: #fff !important;
+    border: 1px solid #888888;
+    }
+div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
+        color: #ccc !important;
+        }
+
+.ippu {
+    color: #eee
+}
+.ippu .track_title {
+    color: #444444;
 }
 
 /**
- * Start overriding some classes set in dw-free/htdocs/stc/
- * Other site scheme designers: use your own colors here
+ * Temporary page-specific styling
  * /
+/* talkpage */
+.cmtbar {
+    border-bottom: none;
+    border-right: none;
+    background-image: url("/img/gradation/blackfade.png");
+    background-position: top;
+    background-repeat: repeat-x;
+}
+td.odd { background-color: #444444; }
+td.even { background-color: #555555; }
+td.screened { background-color: #333333; }
 
-/* editicons.css */
-#uploadBox {
-    background-color: #333333;
-    border: 1px solid #888888;
-    margin: 0 20px 0 0;
+
+/* lj_settings.css */
+.section_head, div.username {
+    background-color: #666666;
+    color: #CCC;
+}
+.field_block .field_name { background: #333333; }
+
+/* esn.css */
+.CategoryRow td {
+    border-bottom: 1px solid #444444;
 }
 
-/* profile.css */
+/* For the community/settings page */
+.community-settings legend {
+    color: #CCCC99;
+    }
 
-.section, .username, .actions li {
-    background-color: #666666;
-    border-bottom: 1px solid #888888;
-    border-top: 1px solid #888888;
-    color: #eee;
-}
-
-.section img, .username img {
-    padding-left: 3px;
-}
-
-.section_body p,
-.section_body th,
-.section_body .inner_section_header { color: #eee; }
-
-/* customize.css */
-
-.theme-current {
-    background-color: #444444;
+/* shop pages */
+.shop-item-highlight {
     border: 1px solid #888888;
 }
 
-/* widgets/customizetheme.css, themechooser.css, themenav.css,
-currenttheme.css */
-
-.layout-item.current {
-    background-color: #666666;
-    border: 1px solid #888888;
+/* inbox */
+.folders a {
+    color: #fff;
+    border: 1px solid #111;
 }
-
-h2.widget-header, .theme-item.current, .theme-item img.theme-preview, .theme-item .theme-icons {
-    border: 1px solid #888888;
+.folders a.selected {
+    background: #333;
+    border-color: #999;
 }
-
-.theme-item .theme-button-disabled, .layout-item .layout-button-disabled {
-    background: #444444;
+.folders a:hover {
+    border-color: #666;
+    background: #666;
 }
-
-.theme-item {
-    overflow-x: visible;
-    overflow-y: visible;
-}
-
-.customize-button, .theme-item .theme-button, .layout-item
-.layout-button {
-    background: #444444;
-    border: 2px solid #888888;
-    border-top: 2px solid #444444;
-    border-left: 2px solid #444444;
-}
-
-
-.theme-nav-content, .customize-content {
-    border: 1px solid #888888;
-    border-left: none;
-}
-
-.theme-selector-nav {
-    background-color: #666666;
-}
-
-.theme-nav li a, .theme-nav-small li {
-    border-right: 1px solid #888888;
-}
-
-.theme-nav-small a { color: #ccc; }
-
-.theme-nav li.on a {
-    border: 1px solid #888888;
-    border-right: none;
-}
-
-.theme-nav-separator {
-    border-right: 1px solid #888888;
-}
-
-.theme-nav-separator hr {
-    border-top: 1px solid #888888;
-}
-
-.customize-content .subheader {
-    background-color: #666666;
-    border-bottom: 1px solid #888888;
-}
-
-.customize-content .subheader.on {
-    background-color: #666666;
-}
-
-.customize-nav {
-    background-color: #444444;
-}
-
-.customize-nav li a, .customize-nav li li  {
-    border-right: 1px solid #888888;
-}
-
-.customize-nav li.on a, .customize-nav li.on ul {
-    border: 1px solid #888888;
-    border-right: none;
-    border-top: none;
-}
-
-.customize-nav li.on {
-    border-top: 1px solid #888888;
-}
-
-.moodtheme-preview, .appwidget-linkslist .tips-box {
-    background-color: #666666;
-    border: 1px solid #888888;
-}
-
-.theme-current-links {
-    border-bottom: 1px solid #888888;
-    border-right: 1px solid #888888;
-}
-
-.theme-nav li a:visited, .customize-nav li a:visited {
-    color: #eee;
-    font-weight: bold;
-}
-
-
-/* more, detailed by page*/
-/*customizetheme.css*/
-.customize-button {
-    color: #fff;
-    background: #444444;
-    border: 2px solid #888888;
-}
-.customize-inner-wrapper {
-    background: url("/img/gradation/gradgray-borderpixel.gif") repeat-y scroll 134px 50%;
-}
-.customize-content .subheader {
-    background-image: url("/img/gradation/gradgray-arrow-right.gif");
-    background-position: left center;
-    background-repeat: no-repeat;
-    border-bottom: 1px solid #666666;
-}
-.customize-content .subheader.on {
-    background-image: url("/img/gradation/gradgray-arrow-down.gif");
-    background-position: left center ;
-    background-repeat: no-repeat;
-}
-.customize-nav li.on a,
-.customize-nav li.on ul {
-    background: #111111;
-}
-.customize-nav li.on a {
-    border-right: 1px solid #111111;
-}
-.customize-nav li.on li a {
-    background: #111111;
-    border-right: 1px solid #111111;
-}
-.customize-nav li.on li {
-    border-right: 1px solid #111111;
-}
-.customize-nav li a:visited {
-
-}
-
-
-/*themenav.css*/
-.theme-nav-inner-wrapper {
-    background: url("/img/gradation/gradgray-borderpixel.gif") repeat-y scroll 134px 50%;
-}
-.theme-selector-nav {
-    background-color: #444444;
-}
-.theme-nav li.on a {
-    background-color: #111111 ;
-}
-.theme-nav li a:visited {
-
-}
-.theme-nav-separator {
-    border-right: 1px solid #666666;
-}
-.theme-nav-separator hr {
-    border-top: 1px solid #666666;
-}
-
-/*currentheme.css*/
-.theme-current-content h3 {
-    color: #eee;
-}
-.theme-current-image {
-     border: 1px solid #111111;
-}
-.theme-current-links {
-    background-color: #111111;
-    border: 1px solid #888888;
-    padding: 3px 5px;
-}
-.theme-current ul li {
-    background: url("/img/customize/arrow.gif") no-repeat 0 5px;
-}
-
-/*themechooser*/
-.theme-item {
-    border: 1px solid #111111;
-}
-.theme-item.current {
-    border: 1px solid #444444;
-    background-color: #666666;
-}
-.theme-item img.theme-preview {
-    border: 1px solid #666666;
-}
-.theme-item.special h4,
-.theme-item.special .theme-desc {
-    background-color: #666666;
-}
-.theme-item .theme-button {
-    color: #fff;
-    background: #444444;
-    border: 2px solid #888888;
-}
-.theme-item .theme-button-disabled {
-    background: #999;
-}
-.theme-item .theme-icons {
-    border: 1px solid #666666;
-    background-color: #111111;
-}
-.theme-time,
-.theme-upgrade-icon {
-    color: #eee !important;
-}
-.theme-upgrade-icon:hover .theme-upgrade-level,
-.theme-time:hover span.theme-availability {
-    background-color: #111111;
-}
-.theme-paging a:visited {
-
-}
-
-/*s2propgroup.css */
-
-.graybg {
-    background-color: #333;
-}
-
-/* inbox */
-
-.folders a.active {
-    font-weight: bold;
-    background-color: #333333;
-    border: 1px solid #999999;
-}
-
-/* lj_settings.css */
-
-.section_head, table.alternating-rows th, div.username {
-    background-color: #666666;
-    color: #CCC;
-}
-
-.section_subhead {
-    background-color: #888888;
-}
-
-.field_name { background: #333333; }
-
-.zebra_row {
-    background-color: #1a1a1a;
-}
-
-/* comm_promo.css */
-
-div.CommunityPromoBox {
-    border: 1px solid #333333;
-}
-
-/* settings.css */
-
-#settings_save {
-    background: #666666;
-}
-
-#settings_nav li a {
-    background: #444444;
-    border: 1px solid #888888;
-    border-bottom: none;
-    color: #eeeeee;
-}
-
-#settings_nav li a:hover, #settings_nav li a.active {
-    background: #666666;
-}
-
-#settings_nav_title p {
-    background: #666666;
-    border-left: 1px solid #888888;
-}
-
-.color-light {
-    color: #666;
-}
-
-/* cprod.css */
-
-.cprod.h3 {
-    background: #444444;
-
-}
-
-.cprod content {
-    border: 1px solid #888888;
-}
-
-
-/* allpics styling */
-
-table.allpics {
-    margin-left: 50px;
-}
-
-.allpics td {
-    vertical-align: bottom;
-}
-
-.allpics .userpic-img {
-    margin-right: 1em;
-    margin-top: 15px;
-}
-
-.allpics blank {
-    width: 50px;
-}
-
-
-/* editfilters styling */
-
-table.editfilters td {
-    padding: 5px;
-}
-
-
-/* FAQ */
-
-.faqlist {
-    list-style: square outside;
-    margin-bottom: 2em;
-}
-
-/* Inbox - Compose */
-
-.inbox-compose {
-    width: 100%;
-}
-
-.inbox-compose td {
-    vertical-align: top;
-}
-
-
-/* manage/invitecodes.bml */
-
-.invitecodes td {
-    padding: 5px;
-}
-
-
-/* shop pages */
-
-/* this is so the main shop page does not look like toasted ass */
-.shopbox, .appwidget-shopitemgroupdisplay {
-    min-width: 20em;
-    min-height: 10em;
-    float: none;
-}
-
-.shopbox, .appwidget-shopitemgroupdisplay,
-.shop-account-status, .shop-error, .shop-cart-status,
-.shop-cart td, .shop-cart th, .shop-item-highlight {
-    border: 1px solid #888888;
-}
-
-.shop-cart th, .shop-cart td.total, .shop-cart-status {
-    background-color: #222;
-}
-
-.shop-account-status {
-    background-color: #815E00; 
-}
+/* entry.css */
+a#lj_userpicselect {color: #888888;}
+#lj_userpicselect_img {border: 1px solid #111111;}
+#lj_userpicselect_img:hover {border: 1px solid #888888;}
+#lj_userpicselect_img_txt {color: #888888 !important;}
+#userpic_preview_image.userpic_loggedout {border: 1px solid #888888;}
+.userpic_preview_border {border: 1px solid #ccc;}
+#infobox {border-left: 1px solid #eee;}
+#entry {border-bottom: 1px solid #bbb;}
+#entry ul li a {background-color: #222;border: 1px solid #bbb;border-bottom: none;}
+#entry ul li.on a {background-color: #222;border-bottom: 1px solid #222;}
+#draft-container {border: 1px solid #bbb;border-top: none;}
+#draftstatus {background-color: #222;}
+#spellcheck-results {border: 1px solid #444444;background-color: #222;}
+#htmltools {border-right: 1px solid #bbb;border-left: 1px solid #bbb;background: #222;}
+#htmltools ul {border-bottom: 1px solid #8D8D8D;}
+#options, #public, #submitbar {border: 1px solid #888888;background-color: #444444;}
+#compose-entry ul li.on a {background-color: #222;} /* # Makes sure the tab doesn't end up white */
 
 /* create flow */
-
-.create-form td {
-    padding: 5px;
-}
-
-.appwidget-createaccount .create-button {
-    color: #eee;
-    background-color: #444444;
-}
-
-.appwidget-createaccountprogressmeter .step-block-active {
-    color: #111111;
-    background-color: #888888;
-}
-
-.appwidget-createaccountprogressmeter .step-block-inactive {
-    color: #111111;
-    background-color: #444444;
-}
-
-.appwidget-createaccountprogressmeter .step-selected {
-    color: #888888;
-}
-
-.appwidget-createaccountprogressmeter .step-previous {
-    color: #444444;
-}
-
-.appwidget-createaccountprogressmeter .step-next {
-    color: #666666;
-}
-
-.appwidget-createaccountprofile .header {
-    color: #888888;
-}
-
-.appwidget-createaccountprofile .field-name {
-    background-color: #e0e0e0;
-}
-
-.error-list {
-    background-color: #916E10;
-}
-
-.errors-present, li.formitemFlag {
-    color: #731815;
-}
-
-
-/* Site Map, override page-level style */
-dd ul li {list-style: circle !important;
-    margin-left: 2em !important; }
-dt {font-weight: bold !important;
-    margin-top: 10px !important;}
-#maplinks-left {margin-right: 2% !important;
-    width: 48% !important;
-    float: left !important;}
-#maplinks-right {margin-left: 2% !important;
-    width: 48% !important;
-    float: right !important;}
+.appwidget-createaccount .create-button { color: #eee; background-color: #444444; }
+.appwidget-createaccountprogressmeter .step-block-active { color: #111111; background-color: #888888; }
+.appwidget-createaccountprogressmeter .step-block-inactive { color: #111111; background-color: #444444; }
+.appwidget-createaccountprogressmeter .step-selected, .appwidget-createaccountprofile .header { color: #888888; }
+.appwidget-createaccountprogressmeter .step-previous { color: #444444; }
+.appwidget-createaccountprogressmeter .step-next { color: #666666; }
+.appwidget-createaccountprofile .field-name { background-color: #e0e0e0; }
 
 /* lj_base-app.css */
 hr.hr {
@@ -971,11 +715,6 @@ hr.hr {
     background-color: #888888;
 }
 
-input.create-account {
-    color: #fff;
-    background: #444444;
-    border: 2px solid #888888;
-}
 input.text,
 textarea.text,
 select {
@@ -986,32 +725,6 @@ select {
     border-left: 1px solid #888888;
     color: #ccc;
 }
-textarea,
-input { background-color: #222 !important;
-color: #fff !important;
-border: 1px solid #888 !important; }
-.detail {
-
-}
-h2.widget-header {
-
-}
-
-table.alternating-rows th {
-    border-top: 1px solid #888888;
-    border-bottom: 1px solid #888888;
-    background-color: #333;
-}
-table.alternating-rows tr.altrow1 {
-    background-color: #222;
-}
-table.alternating-rows tr.altrow2 {
-    background-color: #333;
-}
-table.alternating-rows td {
-    border-bottom: 1px solid #888888;
-}
-
 .appwidget .more-link {
     color: #888888 !important;
     background: url('/img/arrow-double-black.gif') no-repeat 0 60%;
@@ -1029,344 +742,23 @@ table.alternating-rows td {
     border: 1px solid #aaa;
 }
 
-.standout-border {
-    border: 1px solid #888888;
-}
-.standout-background {
-    background-color: #444444;
-}
-
-div.right-sidebar {
-    color: #fff;
-    background-color: #444444;
-    border: 1px solid #888888;
-}
-.textbutton {
-    color: #888888;
-}
-/*NOTE: corner.gif is white*/
-h2.solid-neutral {
-    background-color: #444444;
-    color: #fff;
-}
-h2.solid-blue { /*which is now solid not-blue*/
-    background-color: #444444;
-    color: #fff;
-}
-.solid-neutral {
-    background: #444444;
-}
-input.bright {
-    background-color: #444444;
-    border: 1px solid #888888;
-    color: #fff;
-}
-.helper {
-    /*color: #666;*/
-}
-.rounded-box {
-    background: no-repeat;
-    zoom: 1;
-}
-.rounded-box .rounded-box-tr {
-    background: 100% 0 no-repeat;
-}
-.rounded-box .rounded-box-bl {
-    background: 0 100% no-repeat;
-}
-.rounded-box .rounded-box-br {
-    background: 100% 100% no-repeat;
-    padding: 2px; /* border width */
-}
-
-
-/* esn.css */
-.Subscribe tr.Inactive {
-    color: #aaa;
-}
-
-.Subscribe tr.Disabled {
-    background-color: #111;
-    color: #777;
-}
-
-.Subscribe tr.altrow {
-    background-color: #333;
-}
-
-.Subscribe tr.Inactive a {
-    color: #aaa;
-}
-.Subscribe td p {
-    color: #999;
-    background: #111111;
-}
-
-.CategoryRow td {
-    border-bottom: 1px solid #444444;
-}
-
-#Subscriptions tr.lighter {
-    background-color: #666666;
-}
-#Subscriptions tr.darker {
-    background-color: #444444;
-}
-#SubscribeSaveButtons {
-    border: 1px solid #888888;
-    }
-
-.NotificationTable tr.Selected {
-    background-color: #444444;
-}
-
-.NotificationTable tr.Selected td {
-    border-top: 1px solid #888888;
-}
-.NotificationTable #all_Body > .Selected:first-child td {
-    border-top: none;
-}
-
-.NotificationTable td {
-    padding: 2px;
-}
-.NotificationTable .inbox {
-
-}
-
-/*.NotificationTable .inbox .header .checkbox {
-    border-top: 1px solid #888888;
-    border-bottom: 1px solid #888888;
-    border-left: 1px solid #888888;
-}
-
-.NotificationTable .inbox .header .actions {
-    border-top: 1px solid #888888;
-    border-bottom: 1px solid #888888;
-    border-right: 1px solid #888888;
-}*/
-
-.inbox .header {
-    background: #666666;
-}
-
-.InboxItem_Read {
-    color: #888;
-}
-span.InboxItem_Read:hover {
-    color: #eee;
-}
-span.InboxItem_Read a {
-    color: #999 !important;
-}
-span.InboxItem_Read:hover a {
-    color: inherit !important;
-}
-
-.inbox .alt {
-    background: #333;
-}
-.inbox td.NoItems {
-    color: #ddd;
-}
-.inbox td.time {
-    color: #ccc;
-}
-
-.folders a {
-    color: #fff;
-    border: 1px solid #111111;
-}
-.folders a:visited, .folders a:link {
-    color: #fff;
-}
-.folders a:hover {
-    border: 1px solid #666666;
-    background-color: #666666;
-}
-
-.ippu {
-    color: #eee
-}
-.ippu .track_title {
-    color: #444444;
-}
-
-/* entry.css */
-a#lj_userpicselect {
-    color: #888888;
-}
-#lj_userpicselect_img {
-    border: 1px solid #111111;
-}
-#lj_userpicselect_img:hover {
-    border: 1px solid #888888;
-}
-#lj_userpicselect_img_txt {
-    color: #888888 !important;
-}
-#userpic_preview_image.userpic_loggedout {
-    border: 1px solid #888888;
-}
-.userpic_preview_border {
-    border: 1px solid #ccc;
-}
-#infobox {
-    border-left: 1px solid #eee;
-}
-#entry {
-    border-bottom: 1px solid #bbb;
-}
-#entry ul li a {
-    background-color: #222;
-    border: 1px solid #bbb;
-    border-bottom: none;
-}
-#entry ul li.on a {
-    background-color: #222;
-    border-bottom: 1px solid #222;
-}
-#draft-container {
-    border: 1px solid #bbb;
-    border-top: none;
-}
-#draftstatus {
-    background-color: #222;
-}
-#spellcheck-results {
-    border: 1px solid #444444;
-    background-color: #222;
-}
-#htmltools {
-    border-right: 1px solid #bbb;
-    border-left: 1px solid #bbb;
-    background: #222;
-}
-#htmltools ul {
-    border-bottom: 1px solid #8D8D8D;
-}
-#options, #public, #submitbar {
-    border: 1px solid #888888;
-    background-color: #444444;
-}
-#public {
-    /*color:#666;*/
-}
-
-
-/* contextualhover.css */
-div.ContextualPopup div.Inner {
-    background-color: #444444 !important;
-    color: #fff !important;
-    border: 1px solid #888888;
-    }
-div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
-        color: #ccc !important;
-        }
-
 /* profile.css */
-
 .section, .username, .actions li {
     background-color: #444444 !important;
     border: none;
     color: #fff;
 }
-
 .actions li { border-top: 1px solid #888888; }
-
-.section img, .username img {
-    padding-left: 3px;
-}
-
-.tooltip {
-    border-bottom: 1px dotted #fff;
-}
-li.profile_join_disabled, li.profile_addtrust_disabled,
-li.profile_addsub_comm_disabled, li.profile_addsub_feed_disabled,
-li.profile_addsub_person_disabled, li.profile_postentry_disabled,
-li.profile_trackuser_disabled, li.profile_sendmessage_disabled {
-    color: #999;
-}
-.details_stats p {
-        color: #aaa;
-    }
-.details_stats .account_level {
-        color: #fff;
-    }
 .section span.section_link {
         color: #ccc;
     }
-.section_body .inner_section_header {
-
-    }
-.section_body_title {
-
-}
-.profile th {
-
-}
 
 /* tags.css */
-#selected_tags {
-    color: #999;
-}
-
 .taginfo {
     background-image: none;
     background-color: #222;
     border-color: #888;
     color: #CCC;
-}
-
-.tagbox {
-    background-color: #222;
-    color: #CCC;
-}
-
-.tagfield {
-    color: #999;
-    border: 1px solid #888888;
-}
-
-.tagfield:focus {
-    color: #fff;
-    border: 1px solid #888888;
-}
-
-.tagfield_error {
-    border: 1px solid red;
-    background-color: #ecd7d7;
-}
-
-.proptbl .h {
-    background-image: none;
-    background-color: #222;
-}
-
-.proptbl .t {
-    background-color: #333;
-    border-right: 1px solid #888888;
-}
-
-.proptbl .r {
-    background-color: #333;
-    border-right: 1px solid #888888;
-}
-
-.proptbl .rv {
-    background-color: #444444;
-}
-
-.edittbl .l, .lsep {
-    border-right: 1px solid;
-}
-
-.edittbl .sep {
-    border-top: 1px solid;
-}
-
-.tagbox_nohist {
-    background-color: #444444;
 }
 
 /* manage/settings */
@@ -1379,21 +771,10 @@ li.profile_trackuser_disabled, li.profil
     color: #fff;
 }
 
-.xpost_footer_preview {
-    border: 1px solid #fff;
-    background: #333;
-}
-
 /* Support */
 
 div.box {
     color: #fff !important;
-}
-
-div.adult_warning {
-    background-color: #333;
-    border: 1px solid #fff;
-    padding: 0 10px;
 }
 
 /* This makes the FAQ header not overlap with itself */
@@ -1442,16 +823,6 @@ div.green {
     color: #CCC;
 }
 
-/* For the manage/banusers page */
-
-.userslist-table tr.odd {
-    background-color: #222;
-}
-
-.userslist-table tr.even {
-    background-color: #111;
-}
-
 /* Import */
 
 h1.gradient, h2.gradient, h3.gradient, h4.gradient, h5.gradient {
@@ -1477,13 +848,6 @@ h1.gradient, h2.gradient, h3.gradient, h
     border-color: #444;
 }
 
-/* Update */
-
-/* # Makes sure the tab doesn't end up white */
-#compose-entry ul li.on a {
-    background-color: #222;
-}
-
 /* manage/subscriptions/filters */
 
 #cf-select, #cf-edit, #cf-filtopts, #cf-intro {
@@ -1497,8 +861,8 @@ div#cf-edit select {
     color: #888;
 }
 
-/* For the community/settings page */
 
-.community-settings legend {
-    color: #CCCC99;
-    }
+.proptbl .h {
+    background-image: none;
+    background-color: #222;
+}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/latest.css
--- a/htdocs/stc/latest.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/latest.css	Tue Dec 28 19:40:54 2010 +0800
@@ -40,3 +40,8 @@
 .latest-entry .comments {
     margin-top: 1em;
 }
+
+#tagfeeds {
+    width: 20em;
+    text-align: center;
+}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/lj_base-app.css
--- a/htdocs/stc/lj_base-app.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/lj_base-app.css	Tue Dec 28 19:40:54 2010 +0800
@@ -70,22 +70,6 @@ ul.nostyle {
     padding: 0;
 }
 
-/* tables where rows alternate colors */
-table.alternating-rows th {
-    text-align: left;
-    padding: 6px 4px;
-}
-table.alternating-rows td {
-    padding: 6px 4px;
-    text-align: left;
-}
-table.alternating-rows tr.altrow1 {
-    background-color: #fff;
-}
-table.alternating-rows tr.altrow2 {
-    background-color: #eee;
-}
-
 /* columns for content layouts */
 
 div.columns-2 .columns-2-left {
@@ -141,48 +125,6 @@ div.columns-2-r300 .columns-2-right {
 .message blockquote {
     margin: 0;
     padding: 15px;
-}
-
-.standout-border {
-    padding: 6px;
-}
-
-
-/* Sidebars floated to the right */
-div.right-sidebar {
-    float: right;
-    width: 300px;
-    margin: 10px;
-    padding: 10px;
-}
-div.ad-sidebar {
-    width: 300px;
-    float: right;
-}
-
-.textbutton { 
-    cursor: pointer;
-}
-
-/* Solid background headings */
-h2.solid-neutral {
-    font-size: 14px;
-    font-family: Arial;
-    font-weight: bold;
-    margin: 0 0 8px 0;
-    padding: 5px 8px;
-}
-h2.solid-blue {
-    position: relative;
-    font-size: 14px;
-    font-family: Arial;
-    font-weight: bold;
-    margin: 0 0 8px 0;
-    padding: 5px 8px;
-}
-
-input.bright {
-    font-weight: bold;
 }
 
 .helper {
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/lj_settings.css
--- a/htdocs/stc/lj_settings.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/lj_settings.css	Tue Dec 28 19:40:54 2010 +0800
@@ -22,7 +22,6 @@
     font-weight: bold;
     text-align: right;
     width: 145px;
-	background: #eee;
 }
 .field_block .field_name {
     padding-top: .6em;
@@ -50,7 +49,6 @@
     font-weight: bold;
     margin-top: 10px;
     padding: 5px;
-	background: #ccc;
 }
 
 .section_head td {
@@ -61,7 +59,6 @@
     font-size: 1.1em;
     font-weight: bold;
     margin-top: 5px;
-    background: #eee;
     border-bottom: 3px ridge #fff;
 }
 
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/lynx/lynx.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/htdocs/stc/lynx/lynx.css	Tue Dec 28 19:40:54 2010 +0800
@@ -0,0 +1,121 @@
+.disabled {
+    color: #999 !important;
+    background: #efefef !important;
+    border-color: #ccc !important;
+}
+
+.tablist .tab a {
+    color: #000;
+    background: #ddd;
+	border-color: #ccc;
+}
+.tablist .tab a:hover, .tablist .tab a.active {
+    background: #eee;
+}
+.tab-header {
+    background: #eee;
+    border-top-color: #eee;
+    border-left: 1px solid #ccc;
+    border-right: 1px solid #ccc;
+}
+.tab-container {
+  border: 1px solid #ccc;
+  border-top: none;
+}
+
+.action-bar {
+    text-align: center;
+    background-color: #eeeeee;
+}
+.action-box {
+    display: table;
+    text-align: center;
+    margin: 0.5em auto 0 auto;
+    padding: 0.5em;
+}
+
+.select-list li, .NotificationInbox td {
+    border-color: #ccc;
+}
+.selected, .select-list li.selected, tr.selected td {
+    background-color: #eee;
+    border-color: #666666;
+}
+
+.message-box .title {
+    font-weight: bold;
+}
+.message-box h1.title {
+    text-align: center;
+}
+.highlight-box {
+    border: 1px solid #000000;
+    background: #EEEEEE;
+    color: #000;
+    padding: 0.5em;
+}
+.highlight-box, .message-box, .error-box {
+    margin: 1em auto;
+    padding: 0.5em;
+}
+
+.highlight, .highlight-box {
+}
+.warning-box {
+}
+.error-box {
+}
+
+.odd, tr.odd th, tr.odd td {
+    background-color: #fff;
+}
+.even, tr.even th, tr.even td,
+thead th, tfoot td {
+    background-color: #e2e2e2;
+}
+
+table.grid {
+    border-collapse: collapse;
+}
+table.grid, table.grid td {
+    border: 1px solid #999;    
+}
+
+.collapsible .collapse-button {
+    text-indent: 0 !important;
+    float: right !important;
+}
+
+.subheader {
+    border-bottom: 1px solid #ccc;
+}
+
+.simple-form .error input {
+    border: 3px solid #ff0000;
+}
+.simple-form .error .error-msg {
+    color: #ff0000;
+    display: block;
+}
+
+.hint-input {
+    color: #777;
+    border: 1px solid #CCC;
+}
+.hint-input:focus
+{
+    color: #000;
+    border: 1px solid #999;
+}
+
+
+/* Temporary page-specific */
+/* profile.css */
+.field_name, .section_subhead { background: #eee; }
+.section_head { background: #ccc; }
+
+/* talkpage */
+td.odd { background-color: #c0c0c0; }
+td.even { background-color: #e2e2e2; }
+td.screened { background-color: #707070; }
+td.highlight { background-color: #eeeeee; }
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/profile.css
--- a/htdocs/stc/profile.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/profile.css	Tue Dec 28 19:40:54 2010 +0800
@@ -37,12 +37,11 @@
 .user_pic_caption {
     font-size: 0.7em;
 }
-.username {
+.section_head {
     margin: 2px 0 0 0;
     font-size: 1.1em;
     padding: 0;
     padding: 2px;
-    background: #eee;
 }
 
 .actions {
@@ -138,6 +137,11 @@
         font-size: 0.75em;
         font-weight: normal;
     }
+
+    .section img, .username img {
+        padding-left: 3px;
+    }
+
 .section_body {
     padding: 0 20px 10px 20px;
 }
@@ -216,10 +220,3 @@ span.expandcollapse {
         .external_services table td.im_status img {
             border: 0;
         }
-
-.profile_right_ad {
-    width: 300px;
-    float: right;
-    margin: 0 0 10px 10px;
-    padding: 0 0 0 10px;
-}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/reset.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/htdocs/stc/reset.css	Tue Dec 28 19:40:54 2010 +0800
@@ -0,0 +1,94 @@
+/**
+ * Erik Meyer's CSS Reset Reloaded
+ *
+ * @link            http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
+ * @version            1.0
+ * @revision        $Revision$
+ * @lastmodified    $Date$
+ */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+    margin:          0;
+    padding:         0;
+    border:          0;
+    outline:         0;
+    font-size:       100%;
+    vertical-align:  baseline;
+    background:      transparent;
+}
+body {
+    line-height:     1;
+}
+ol, ul {
+    list-style:      none;
+}
+a:hover, a:active { outline: none; }
+blockquote, q {
+    quotes:          none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content:         '';
+    content:         none;
+}
+ins {
+    text-decoration: none;
+}
+del {
+    text-decoration: line-through;
+}
+/* @note    tables still need 'cellspacing="0"' in the markup */
+table {
+    border-collapse: collapse;
+    border-spacing:  0;
+}
+/* @note    remove default border of linked images */
+a img, :link img, :visited img {
+    border: none;
+}
+/* @note    turn on bicubic sampling for image resizing in IE */
+img {
+    -ms-interpolation-mode: bicubic;
+}
+
+
+/* tweak the reset settings */
+th {
+    padding: 0.2em 0.8em;
+}
+td {
+    padding: 0.2em 0.5em;
+}
+
+tbody th {
+    text-align: left;
+}
+
+/* CSS-style some things that users like to use */
+q {
+    margin-left: 1em;
+    font-style: italic;
+}
+small {
+    font-size: smaller;
+}
+big {
+    font-size: larger;
+}
+
+ol {
+    list-style-type: decimal;
+    margin-left: 1em;
+}
+
+ul {
+    list-style-type: disc;
+    margin-left: 1em;
+}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/select-list.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/htdocs/stc/select-list.css	Tue Dec 28 19:40:54 2010 +0800
@@ -0,0 +1,19 @@
+.select-list {
+    overflow: auto;
+    list-style: none;
+}
+
+.select-list li {
+    float: left;
+    margin: 0.25em;
+    overflow: hidden;
+    width: 120px;
+    border-style: solid;
+    border-width: 1px;
+    padding: 0.5em;
+}
+
+.select-list li img {
+    border-width: 1px;
+    border-style: solid;
+}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/settings-colors.css
--- a/htdocs/stc/settings-colors.css	Thu Dec 23 10:39:49 2010 -0600
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,37 +0,0 @@
-/* Common */
-.disabled {
-    color: #999;
-}
-#settings_save {
-    background: #eee;
-}
-
-/* Tabs */
-#settings_nav li a {
-    color: #000;
-    background: #ddd;
-	border: 1px solid #ccc;
-}
-
-#settings_nav li a:hover, #settings_nav li a.active {
-    background: #eee;
-}
-#settings_nav li.disabled {
-    color: #999;
-    background: #efefef;
-    border: 1px solid #ccc;
-}
-#settings_nav_title p {
-    background: #eee;
-	border-left: 1px solid #ccc;
-}
-.account td, .display td, .mobile td, .privacy td, .history td, .othersites td {
-    border-bottom: 1px #ccc solid;
-}
-.display_option, .mobile_option, .privacy_option, .othersites_option {
-    color: #000;
-}
-.xpost_footer_preview {
-    border: 1px solid #000000;
-    background: #EEEEEE;
-}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/settings.css
--- a/htdocs/stc/settings.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/settings.css	Tue Dec 28 19:40:54 2010 +0800
@@ -16,38 +16,6 @@
 }
 #settings_save {
     padding: 5px 7px;
-}
-
-/* Tabs */
-#settings_nav {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-#settings_nav li {
-    float: left;
-}
-#settings_nav li a {
-    text-decoration: none;
-    display: block;
-    margin-right: 5px;
-    padding: 2px 7px;
-    font-weight: bold;
-	border-bottom: none;
-}
-#settings_nav li.disabled {
-    display: block;
-    margin-right: 5px;
-    padding: 2px 7px;
-    font-weight: bold;
-	border-bottom: none;
-}
-#settings_nav_title p {
-    clear: left;
-    padding: 4px 10px;
-    display: block;
-    margin: 0;
-    font-size: 11px;
 }
 
 /* Shared Content */
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/shop-colors.css
--- a/htdocs/stc/shop-colors.css	Thu Dec 23 10:39:49 2010 -0600
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,32 +0,0 @@
-.shopbox, div.appwidget-shopitemgroupdisplay {
-    border: 1px solid #c1272d;
-}
-.shop-account-status {
-    border: solid 1px #c1272d;
-    background-color: #ffff00;
-}
-.shop-error {
-    border: 1px solid #c1272d;
-}
-.shop-cart-status {
-    border: 1px solid #c1272d;
-    background-color: #c5c5c5;
-}
-.shop-cart th {
-    background-color: #c5c5c5;
-}
-.shop-cart td, .shop-cart th {
-    border: 1px solid #c1272d;
-}
-.shop-cart td.total {
-    background-color: #e0e0e0;
-}
-.shop-item-highlight {
-    color: #c1272d;
-}
-.ccrowerr {
-    background-color: #ccc;
-}
-.shop-points-status {
-    border: 1px solid #c1272d;
-}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/shop.css
--- a/htdocs/stc/shop.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/shop.css	Tue Dec 28 19:40:54 2010 +0800
@@ -30,7 +30,12 @@
     margin: 10px;
 }
 
+.shop-item-highlight {
+    font-weight: bold;
+}
+
 .shop-account-status {
+    font-weight: normal;
     float: right;
     width: 30em;
     padding: 5px;
@@ -56,10 +61,8 @@
     padding: 0.2em;
 }
 
-.shop-error {
+.error-box {
     clear: both;
-    padding: 5px;
-    margin: 10px;
 }
 
 .shop-cart-status {
@@ -95,10 +98,6 @@
     margin-left: 1em;
 }
 
-.shop-item-highlight {
-    font-weight: bold;
-}
-
 .shop-footnote {
     font-size: smaller;
 }
@@ -108,7 +107,7 @@
 }
 
 .shop-points-status {
-    margin: 20px;
+    margin: 20px 0;
     padding: 0.5em;
     font-size: larger;
 }
@@ -140,7 +139,7 @@
 }
 
 #shop-status-bar {
-    margin: 20px;
+    margin: 20px 0;
     padding: 0.5em;
     font-size: larger;
 }
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/simple-form.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/htdocs/stc/simple-form.css	Tue Dec 28 19:40:54 2010 +0800
@@ -0,0 +1,83 @@
+.simple-form fieldset {
+    position: relative;
+    float: left;
+    clear: both;
+    margin: 0 2em;
+    padding: 0 0 1.5em 0;
+    border-style: none;
+}
+
+.simple-form fieldset legend {
+    padding: 0;
+    font-weight: bold;
+}
+
+.simple-form fieldset legend span {
+    top: 0;
+    left: 0;
+    position: absolute;
+    margin: 0.5em 0 0 0;
+    font-size: 1.25em;
+    display: block;
+    width: 100%;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+}
+
+.simple-form fieldset ul {
+    float: left;
+    list-style: none;
+    padding: 2.5em 0 0 0;
+    margin: 0;
+    zoom: 1;
+}
+
+.simple-form label {
+    float: left;
+    width: 11em;
+    margin-right: 0.2em;
+    padding: 0.2em 0.8em 0.2em 0.2em;
+}
+.simple-form li {
+    float: left;
+    clear: left;
+    width: 100%;
+    margin-bottom: 0.2em;
+}
+
+/* Submit/action buttons */
+.simple-form fieldset.submit {
+    float: none;     
+    width: auto;
+    text-align: center;
+    padding: 1em 0;
+    margin:0;
+}
+
+/* Nested Fieldsets */
+.simple-form fieldset fieldset {
+    margin: 0 0 -1em 0;
+    background-color: transparent;
+}
+.simple-form fieldset fieldset ul {
+    margin: 0 0 0 12.2em;
+    padding: 0;
+}
+.simple-form fieldset fieldset legend {
+    font-weight: normal;
+    width: 11em;
+}
+.simple-form fieldset fieldset legend span {
+    display: block;
+    width: 11em;
+    margin: 0;
+    padding: 0.2em 0.8em 0.2em 0.2em;
+    font-size: 1em;
+    border-style: none;
+}
+.simple-form fieldset fieldset label {
+    float: none;
+    width: auto;
+    margin-right: auto;
+    background-color: transparent;
+}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/table-form.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/htdocs/stc/table-form.css	Tue Dec 28 19:40:54 2010 +0800
@@ -0,0 +1,29 @@
+.table-form td, .table-form thead th {
+  text-align:left;
+  padding:.3em;
+}
+
+.table-form table {
+  border-left:1px solid #999;
+  border-right:1px solid #999;
+}
+
+.table-form tr {
+  border-bottom:1px solid #999;
+}
+
+.table-form thead tr {
+  border-top:1px solid #999;
+}
+
+.table-form caption {
+  text-align:left;
+  font-size:120%;
+  padding:1em 0 .3em 0;
+}
+
+.table-form ul {
+  list-style-type:none;
+  margin:0;
+  padding:0;
+}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/tabs.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/htdocs/stc/tabs.css	Tue Dec 28 19:40:54 2010 +0800
@@ -0,0 +1,51 @@
+.tablist {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    zoom: 1;
+}
+
+.tablist .tab {
+    float: left;
+}
+
+.tablist .tab a {
+    text-decoration: none;
+    display: block;
+    margin-right: 5px;
+    padding: 2px 7px;
+    font-weight: bold;
+    border-width: 1px;
+    border-style: solid;
+	border-bottom: none;
+}
+
+.tablist .tab.disabled {
+    display: block;
+    margin-right: 5px;
+    padding: 2px 7px;
+    font-weight: bold;
+    border-width: 1px;
+    border-style: solid;
+	border-bottom: none;
+}
+
+.tab-header {
+    clear: left;
+    border-top-width: 5px;
+    border-style: solid;
+    border-left-width: 1px;
+    border-right-width: 1px;
+}
+
+.tab-header p {
+    padding: 4px 10px;
+    display: block;
+    margin: 0 !important;
+    font-size: smaller;
+}
+
+.tab-container {
+    padding: 1em;
+    margin-bottom: 1em;
+}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/tags.css
--- a/htdocs/stc/tags.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/tags.css	Tue Dec 28 19:40:54 2010 +0800
@@ -39,7 +39,6 @@ legend
 .tagbox
 {
     width: 300px;
-    background-color: #eee;
     padding: 4px;
     height: 250px;
 }
@@ -130,20 +129,21 @@ legend
 }
 
 /* count type */
-.proptbl .t
+.proptbl th
 {
     text-align: right;
+    font-weight: normal;
 }
 
 /* results */
-.proptbl .r
+.proptbl .summary th
 {
     text-align: right;
     font-weight: bold;
 }
 
 /* result value */
-.proptbl .rv
+.proptbl .summary td
 {
     text-align: center;
     font-weight: bold;
@@ -162,12 +162,14 @@ legend
     text-align: right;
     vertical-align: top;
     white-space: nowrap;
+    border-right: 1px solid;
 }
 
 /* separator line */
 .edittbl .sep
 {
     white-space: nowrap;
+    border-top: 1px solid;
 }
 
 
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/talkpage.css
--- a/htdocs/stc/talkpage.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/talkpage.css	Tue Dec 28 19:40:54 2010 +0800
@@ -53,6 +53,10 @@
     padding-right: 10px;
 }
 
+.cmtbar {
+    min-width: 50em;
+}
+
 .cmtbar-odd img, .cmtbar-even img {
     padding-right: 10px;
 }
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/vertical-form.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/htdocs/stc/vertical-form.css	Tue Dec 28 19:40:54 2010 +0800
@@ -0,0 +1,73 @@
+.vertical-form fieldset {
+    position: relative;
+    margin: 0 auto;
+    padding: 0 0 1.5em 0;
+    border-style: none;
+}
+
+.vertical-form fieldset legend {
+    padding: 0;
+    font-weight: bold;
+}
+
+.vertical-form fieldset legend span {
+    top: 0;
+    left: 0;
+    position: absolute;
+    margin: 0.5em 0 0 0;
+    font-size: 1.25em;
+    display: block;
+    width: 100%;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+}
+
+.vertical-form fieldset ul {
+    list-style: none;
+    margin: 0;
+    zoom: 1;
+}
+
+.vertical-form label {
+    display: block;
+    margin-right: 0.2em;
+    padding: 0.2em 0.8em 0.2em 0.2em;
+}
+.vertical-form li {
+    margin-bottom: 0.2em;
+}
+
+/* Submit/action buttons */
+.vertical-form fieldset.submit {
+    float: none;     
+    width: auto;
+    text-align: center;
+    padding: 1em 0;
+    margin:0;
+}
+
+/* Nested Fieldsets */
+.vertical-form fieldset fieldset {
+    background-color: transparent;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+}
+.vertical-form fieldset fieldset ul {
+    padding: 0;
+}
+.vertical-form fieldset fieldset legend {
+    font-weight: normal;
+}
+.vertical-form fieldset fieldset legend span {
+    position: static;
+    display: block;
+    width: 100%;
+    margin: 0;
+    padding: 0.2em 0.8em 0.2em 0.2em;
+    border-style: none;
+}
+.vertical-form fieldset fieldset label {
+    display: inline;
+    background-color: transparent;
+}
+
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/widgets/createaccount.css
--- a/htdocs/stc/widgets/createaccount.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/widgets/createaccount.css	Tue Dec 28 19:40:54 2010 +0800
@@ -2,14 +2,6 @@
    needs absolute positioning around it */
 .relative-container {
    position: relative;
-}
-
-.error-list {
-    background-color: #fcf6db;
-    border: 1px solid #ffdfc0;
-    padding: 1em;
-    padding-left: 3em;
-    margin-top: 3em;
 }
 
 div.error-list ol, div.error-list li {
@@ -49,6 +41,7 @@ div.error-list ol, div.error-list li {
 .appwidget-createaccount #tips_box {
     display: none;
     position: absolute;
+    color: #000;
     background-color: #fcf6db;
     border: 1px solid #ffdfc0;
     padding: 5px;
@@ -76,8 +69,3 @@ span.appwidget-createaccount #username_e
 .appwidget-createaccount #username_error_inner {
     font-weight: bold;
 }
-
-li.formitemFlag {
-    font-weight: bold;
-    color: #f00;
-}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/widgets/createaccountentercode.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/htdocs/stc/widgets/createaccountentercode.css	Tue Dec 28 19:40:54 2010 +0800
@@ -0,0 +1,5 @@
+.appwidget-createaccountentercode #code_box {
+    margin: 0 auto;
+    width: 25em;
+    text-align: center;
+}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/widgets/currenttheme.css
--- a/htdocs/stc/widgets/currenttheme.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/widgets/currenttheme.css	Tue Dec 28 19:40:54 2010 +0800
@@ -30,4 +30,5 @@
     padding: 0 0 0 8px;
     margin-bottom: 2px;
     font-size: 11px;
+    background: url("/img/customize/arrow.gif") no-repeat 0 5px;
 }
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/widgets/customizetheme.css
--- a/htdocs/stc/widgets/customizetheme.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/widgets/customizetheme.css	Tue Dec 28 19:40:54 2010 +0800
@@ -1,11 +1,3 @@
-.customize-button {    
-    font-size: 11px;
-}
-.customize-buttons {
-    text-align: right;
-    margin-top: 10px;
-}
-
 .customize-wrapper h2 {
     position: relative;
 }
@@ -21,6 +13,8 @@
     padding: 0 15px 25px 15px;
     margin: 0 0 15px 134px;
     position: relative;
+    border-width: 1px;
+    border-style: solid;
     border-left: none; 
     zoom: 1;
 
@@ -28,7 +22,6 @@
 .customize-content .subheader {
     font-size: 13px;
     font-weight: bold;
-    padding: 5px 0 5px 25px;
     display: inline-block;
 }
 .customize-content .subheader[class] {
@@ -69,6 +62,10 @@
     display: block;
     padding: 3px 6px;
 }
+.customize-nav li a, .customize-nav li li  {
+    border-right-width: 1px;
+    border-right-style: solid;
+}
 .customize-nav li a:hover {
     text-decoration: underline;
 }
@@ -84,8 +81,14 @@
 }
 .customize-nav li.on a,
 .customize-nav li.on ul {
+    border-width: 1px;
+    border-style: solid;
     border-right: none;
+    border-top: none;
     font-weight: bold;
+}
+.customize-nav li.on li {
+    border-right: none;
 }
 .customize-nav li.heading a {
     border-bottom: none;
@@ -95,15 +98,16 @@
     font-weight: normal;
     border: none;
 }
-
+.customize-nav li.on {
+    border-top-width: 1px;
+    border-top-style: solid;
+}
 .customize-nav li.on ul {
     font-weight: normal;
-    border-top: none;
 }
 .customize-nav li.on li {
     width: 113px;
 }
-
 
 * html .customize-nav li a {
     display: inline-block;
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/widgets/layoutchooser.css
--- a/htdocs/stc/widgets/layoutchooser.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/widgets/layoutchooser.css	Tue Dec 28 19:40:54 2010 +0800
@@ -1,37 +1,10 @@
-.layout-item .layout-button {
-    font-size: 11px;
-    color: #fff;
-    background: #f4717a;
-    border: 2px solid #f6828b;
-    border-bottom: 2px solid #c1272d;
-    border-right: 2px solid #c1272d;
-}
-.layout-item .layout-button-disabled {
-    background: #88CD73;
-}
-.layout-item {
+.layout-content .layout-item {
+    text-align: center;
     position: relative;
-    float: left;
     width: 156px;
-    text-align: center;
-    padding: 8px;
-    border: 1px solid #fff;
-    font-size: 11px;
-}
-.layout-item.current {
-    border: 1px solid #ffd8d8;
-    background-color: #ECF6FF;
-}
-.layout-item .layout-desc {
-    font-size: 12px;
-    padding: 4px 0 6px 0;
-    margin: 0 !important;
 }
 .layout-item img.layout-preview {
     border: 1px solid #fff;
     width: 150px;
     height: 114px;
 }
-.layout-content {
-    padding-left: 10px;
-}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/widgets/linkslist.css
--- a/htdocs/stc/widgets/linkslist.css	Thu Dec 23 10:39:49 2010 -0600
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,11 +0,0 @@
-.appwidget-linkslist .tips-box {
-    color: #000;
-    background-color: #c5dff9;
-    border: 1px solid #c1272d;
-    padding: 3px;
-    margin-top: 5px;
-}
-
-.appwidget-linkslist .tips-header {
-    font-size: 11px;
-}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/widgets/moodthemechooser.css
--- a/htdocs/stc/widgets/moodthemechooser.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/widgets/moodthemechooser.css	Tue Dec 28 19:40:54 2010 +0800
@@ -22,13 +22,10 @@
 .moodtheme-form {
     float: left;
 }
-.moodtheme-preview {
+div.moodtheme-preview {
     float: left;
     padding: 5px;
     margin-left: 20px;
-    background-color: #ecf6ff;
-    border: 1px solid #ffd8d8;
-    width: 175px;
 }
 .moodtheme-preview-nospecial {
     width: 360px;
@@ -63,8 +60,6 @@
     font-weight: bold;
     font-style: italic;
     font-size: 11px;
-    color: #000;
-    background-color: #FFFFDD;
     margin: 0 !important;
     padding: 2px 4px;
 }
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/widgets/navstripchooser.css
--- a/htdocs/stc/widgets/navstripchooser.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/widgets/navstripchooser.css	Tue Dec 28 19:40:54 2010 +0800
@@ -14,6 +14,7 @@
 }
 
 .color-light {
+    color: #666;
     width: 15em;
     height: 39px;
     display: block;
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/widgets/themechooser.css
--- a/htdocs/stc/widgets/themechooser.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/widgets/themechooser.css	Tue Dec 28 19:40:54 2010 +0800
@@ -1,6 +1,12 @@
 .themes-area {
     margin-top: 10px;
 }
+
+.themes-area .select-list li {
+    width: 156px;
+    overflow: visible;
+}
+
 .theme-selector-content h3 {
     font-style: normal;
     font-weight: normal;
@@ -9,10 +15,7 @@
 .theme-item {
     font-size: 1em;
     position: relative;
-    float: left;
-    width: 156px;
     text-align: center;
-    padding: 8px;
 }
 .theme-item img.theme-preview {
     padding: 1px;
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/stc/widgets/themenav.css
--- a/htdocs/stc/widgets/themenav.css	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/stc/widgets/themenav.css	Tue Dec 28 19:40:54 2010 +0800
@@ -35,7 +35,10 @@
 .theme-nav-small li a:hover {
     text-decoration: underline;
 }
+
 .theme-nav li.on a {
+    border-width: 1px;
+    border-style: solid;
     border-right: none;
     font-weight: bold;
 }
@@ -47,6 +50,8 @@
 }
 .theme-nav-separator {
     padding: 5px 0;
+    border-right-width: 1px;
+    border-right-style: solid;
 }
 * html .theme-nav-separator {
     width: 135px;
@@ -61,8 +66,20 @@
 }
 .theme-nav-small li a {
     text-decoration: none;
+    font-weight: normal;
     font-size: 11px;
 }
 .theme-nav-search-box {
     text-align: right;
 }
+
+.theme-nav li a, .theme-nav-small li {
+    border-right-width: 1px;
+    border-right-style: solid;
+}
+
+.theme-nav-content {
+    border-width: 1px;
+    border-style: solid;
+    border-left: none;
+}
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/support/changenotify.bml
--- a/htdocs/support/changenotify.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/support/changenotify.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -87,7 +87,7 @@ body<=
      ### ending submit block
      $ret .= "<?h1 $ML{'.done.title'} h1?>";
      $ret .= "<?p  $ML{'.done.text'} p?>\n";
-     $ret .= "<?standout <input type='submit' value='$ML{'.submit.button'}' /> standout?>\n";
+     $ret .= "<div class='action-box'><input type='submit' value='$ML{'.submit.button'}' /></div>";
      $ret .= "</form>\n";
 
      return $ret;
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/support/faqsearch.bml
--- a/htdocs/support/faqsearch.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/support/faqsearch.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -19,7 +19,7 @@ _c?>
 
     $title = $ML{'.title'};
 
-    $body = "<?standout $ML{'.info'} standout?><br />";
+    $body = "<p>$ML{'.info'}</p>";
     $body .= "<form method='GET'>";
     $body .= "<table summary=''><tr><td>$ML{'.label.term'}: </td>";
     $body .= "<td>" . LJ::html_text({ size => 30, value => $GET{'q'}, name => 'q' });
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/support/see_request.bml
--- a/htdocs/support/see_request.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/support/see_request.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -666,11 +666,12 @@ body<=
 
     if ($ans_type{'answer'} || $ans_type{'screened'})
     {
-        $ret .= BML::ml('.important.notes.text', {
+        $ret .= "<div class='highlight-box'>";
+        $ret .= BML::ml('.important.notes.text2', {
                 sitenameshort=>$LJ::SITENAMESHORT,
                 supportlink=>"href='$LJ::SITEROOT/doc/guide/support'",
             });
-        $ret .= "\n";
+        $ret .= "</div>\n";
     }
 
     # append_request form
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/support/see_request.bml.text
--- a/htdocs/support/see_request.bml.text	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/support/see_request.bml.text	Tue Dec 28 19:40:54 2010 +0800
@@ -55,15 +55,14 @@
 
 .help.link=Back to the <a href="help.bml">list of open requests</a>.<br />
 
-.important.notes.text<<
-<?standout <b>Important Notes:</b>
-<?p [[sitenameshort]] Support is an open-source project run by a community of volunteers. 
-If you think you know the answer to this question, you are welcome to help out by 
-submitting an answer in the box below. Your answer will be screened and 
-evaluated by senior support volunteers for content. If your answer is first 
-and correct, it will be sent to the user. p?>
-<?p If you have questions about Support, please see the <a [[supportlink]]>support guide</a> for more information. p?>
-<?p Thanks! p?> standout?>
+.important.notes.text2<<
+<strong>Important Notes:</strong>
+
+<?p [[sitenameshort]] Support is an open-source project run by a community of volunteers. If you think you know the answer to this question, you're welcome to submit an answer in the box below. Your answer will be screened and evaluated by senior support volunteers for content. If your answer is first and correct, it will be sent to the person who submitted the question. p?>
+
+<?p If you have questions about Support, please read the <a href="http://wiki.dwscoalition.org/notes/Category:Support">Support Wiki category</a> for more information. p?>
+
+<?p Thank you! p?>
 .
 
 .incat=in the same category
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/talkread.bml
--- a/htdocs/talkread.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/talkread.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -334,35 +334,35 @@ body<=
     my $page = $opts->{'out_page'};
     my $pages = $opts->{'out_pages'};
 
-    ########## make the navcrap
-    my $navcrap = '';
+    ########## make the nav
+    my $nav = '';
     if ($pages > 1) {
-        $navcrap .= "<table summary='' id='journalnav'>";
-        $navcrap .= "<tr><td align='center' colspan='3'>";
-        $navcrap .= BML::ml('ljlib.pageofpages',{'page'=>$page, 'total'=>$pages});
-        $navcrap .= "</td></tr>";
+        $nav .= "<table summary='' id='journalnav'>";
+        $nav .= "<tr><td align='center' colspan='3'>";
+        $nav .= BML::ml('ljlib.pageofpages',{'page'=>$page, 'total'=>$pages});
+        $nav .= "</td></tr>";
         my $left = "&lt;&lt;";
         if ($page > 1) { $left = "<a href='" . BML::self_link({ 'page' => $page-1 }) . "#comments'>$left</a>"; }
 
         my $right = "&gt;&gt;";
         if ($page < $pages) { $right = "<a href='" . BML::self_link({ 'page' => $page+1 }) . "#comments'>$right</a>"; }
 
-        $navcrap .= "<tr><td style='font-size: 85%' align='center'>$left</td><td style='font-size: 85%' align='center'>";
+        $nav .= "<tr><td style='font-size: 85%' align='center'>$left</td><td style='font-size: 85%' align='center'>";
 
         for (my $i=1; $i<=$pages; $i++) {
             my $link = "[$i]";
             if ($i != $page) { $link = "<a href='" . BML::self_link({ 'page' => $i }) . "#comments'>$link</a>"; }
             else { $link = "<span style='font-size: 130%; font-weight: bolder'>$link</span>"; }
-            $navcrap .= "$link ";
-            if ($i == 11)  { $navcrap .= "<br />"; }
-            elsif ($i > 10 && $i % 10 == 0) { $navcrap .= "<br />"; }
+            $nav .= "$link ";
+            if ($i == 11)  { $nav .= "<br />"; }
+            elsif ($i > 10 && $i % 10 == 0) { $nav .= "<br />"; }
         }
 
-        $navcrap .= "</td><td style='font-size: 85%' align='center'>$right</td></tr>";
-        $navcrap .= "</table>\n";
-        $navcrap = BML::fill_template("standout", { 'DATA' => $navcrap });
+        $nav .= "</td><td style='font-size: 85%' align='center'>$right</td></tr>";
+        $nav .= "</table>\n";
+        $nav = qq{<div class="action-box">$nav</div>};
     }
-    ####### end navcrap
+    ####### end nav
 
     # Quick reply variables.  Not always set.
     my ($last_talkid, $last_jid) = LJ::get_lastcomment();
@@ -390,13 +390,10 @@ body<=
         my $datepost = LJ::S2::sitescheme_secs_to_iso( $post->{datepost_unix}, tz => 1 );
 
         my $level = ($opts->{'depth'} % 2) ? "even" : "odd";
-        my $bgcolor = ($opts->{'depth'} % 2) ? "emcolorlite" : "emcolor";
-        $bgcolor = BML::get_template_def($bgcolor);
-        if ($post->{'state'} eq "S") {
-            $bgcolor = BML::get_template_def("screenedbarcolor") || $bgcolor;
-        } elsif ( $last_talkid == $dtid && $last_jid == $u->userid ) {
-            $bgcolor = BML::get_template_def("altcolor1");
-        }
+
+        my $additional_classes = "";
+        $additional_classes .= "screened" if $post->{state} eq "S";
+        $additional_classes .= "highlight" if $last_talkid == $dtid && $last_jid == $u->userid;
 
         # Gather information about the comment poster
         my $pu = $post->{'posterid'} ? $user{$post->{'posterid'}} : undef;
@@ -456,7 +453,7 @@ body<=
 
                 $ret .= "<div id='$htmlid'><table summary='' width='100%' class='talk-comment'><tbody><tr>";
                 $ret .= "<td rowspan='2'><img src='$LJ::IMGPREFIX/dot.gif' alt='' height='1' width='" . ($opts->{'depth'} * 25) . "'></td>";
-                $ret .= "<td id='cmtbar$dtid' class='cmtbar-$level' style='background-color: $bgcolor' width='100%'>";
+                $ret .= "<td id='cmtbar$dtid' class='cmtbar $level $additional_classes' width='100%'>";
 
                 # Build the image tag for the comment's userpic, if there is one
                 if ($post->{picid}) {
@@ -667,7 +664,7 @@ body<=
     } else {
         $ret .= "<div id='Comments'>";
         $ret .= "<a name='comments'></a>";
-        $ret .= "<p>$navcrap</p>" if $navcrap;
+        $ret .= "<p>$nav</p>" if $nav;
 
         my $readlink;
         my $replycount = $entry->prop("replycount");
@@ -773,8 +770,8 @@ body<=
 
         $ret .= "</form>";
 
-        if ($navcrap) {
-            $ret .= "<p>$navcrap</p>";
+        if ($nav) {
+            $ret .= "<p>$nav</p>";
         }
 
         $ret .= "</div>";
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/tools/recent_comments.bml
--- a/htdocs/tools/recent_comments.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/tools/recent_comments.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -100,7 +100,7 @@ body<=
         # Turning results into a function, since it's going to be used elsewhere.
         my $anchorname = $_[0];
         my $anchor = $anchorname ? "#$anchorname" : "";
-        my $standoutbox = "<?standout <div style='text-align: center'>";
+        my $standoutbox = "<div class='action-box' style='text-align: center'>";
         $standoutbox .= "<a name='$anchorname'></a>";
 
         my $latest_received = $anchorname eq "received" ? $ML{'.latest.received'} : "<a href='#received'>$ML{'.latest.received'}</a>";
@@ -130,7 +130,7 @@ body<=
                 $standoutbox .= " <a href='?show=$val$getextra$anchor'>$val</a> ";
             }
         }
-        $standoutbox .= "] $ML{ '.comments' } </div> standout?>";
+        $standoutbox .= "] $ML{ '.comments' } </div>";
         # end anchor/standout box.
     };
  
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/tools/tellafriend.bml
--- a/htdocs/tools/tellafriend.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/tools/tellafriend.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -221,8 +221,8 @@ _c?>
           "<br /><textarea name=body rows=6 cols=55 wrap=soft></textarea>" .
           "$display_msg_footer</blockquote></div></td></tr>\n";
 
- $body .= "<tr><td colspan='2' align='center'><?standout " .
-          LJ::html_submit(BML::ml( ".sendbutton" )) . " standout?></td></tr>\n";
+ $body .= "<tr><td colspan='2' align='center'><div class='action-box'>" .
+          LJ::html_submit(BML::ml( ".sendbutton" )) . "</div></td></tr>\n";
  $body .= "</table>";
  $body .= "</form>";
 
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/tools/userpicfactory.bml
--- a/htdocs/tools/userpicfactory.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/tools/userpicfactory.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -211,11 +211,11 @@ if (! @paths) {
 
 if (0) {
     $body .= qq {
-        <?standout
+        <div class='highlight-box'>
             <?p You can edit your currently uploaded picture or you can upload a new one: p?>
 
             $upload_form
-            standout?>
+            </div>
         };
 }
 
@@ -224,7 +224,7 @@ if (0) {
 
       <div id="picContainer" style="float: left; margin-bottom: 15px; width: ${scaledSizeMax}px; height: ${scaledSizeMax}px; border: 2px solid #EEEEEE; padding: 2px;"> <img src="$picpath" id="userpic" style="display: none;" /></div>
 
-      <?standout <div style='float: right;'>
+      <div class='highlight-box' style='float: right;'>
       <form action="$LJ::SITEROOT/editicons$sfx?authas=$GET{'authas'}" method="POST" enctype='multipart/form-data'>
       <table summary="" cellpadding="4"><tr>
       <td style='whitespace: nowrap'>
@@ -260,7 +260,7 @@ if (0) {
                           'descriptions', $GET{'descriptions'},
                           'make_default', $GET{'make_default'},
                           index => $GET{index}) . qq {
-      </form></div> standout?>
+      </form></div>
     };
 }
 #_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-
diff -r b2b1ca17e24d -r 0a3ff6232c78 htdocs/view/index.bml
--- a/htdocs/view/index.bml	Thu Dec 23 10:39:49 2010 -0600
+++ b/htdocs/view/index.bml	Tue Dec 28 19:40:54 2010 +0800
@@ -143,9 +143,8 @@ _c?>
         my $prev = "<a href='" . $base . "/$prev[0]/" . sprintf("%02d", $prev[1]) . "/'>";
         $prev .= LJ::img( "btn_prev", "", { border => 0 } ) . "</a>";
 
-        $body .= "<?standout \n";
         $body .= "<form method='post' action='$LJ::SITEROOT/view/' style='display:inline'><input type='hidden' name='type' value='month' /><input type='hidden' name='user' value='$u->{'user'}' />";
-        $body .= "<table summary=''><tr valign='middle'>";
+        $body .= "<table summary='' class='highlight-box'><tr valign='middle'>";
         $body .= "<td><b>$prev</b></td>";
         $body .= "<td><select name='m'>";
         for (my $i=1;$i<=12;$i++) {
@@ -155,7 +154,7 @@ _c?>
         $body .= "</select> <input type=text name=y maxlength=4 size=4 value=$year> <input type=submit value=\"View\"></td>";
         $body .= "<td><b>$next</b></td>";
         $body .= "</tr></table>";
-        $body .= " standout?></form>\n";
+        $body .= "</form>\n";
     }
 
     $body .= "<dl>\n";
diff -r b2b1ca17e24d -r 0a3ff6232c78 views/dev/classes.tt
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/views/dev/classes.tt	Tue Dec 28 19:40:54 2010 +0800
@@ -0,0 +1,350 @@
+[%- sections.title = '.title' | ml -%]
+
+[%- dw.need_res( 'stc/dev/classes.css') -%]
+[%- dw.need_res( 'stc/tabs.css') -%]
+[%- dw.need_res( 'stc/select-list.css') -%]
+[%- dw.need_res( 'stc/simple-form.css') -%]
+[%- dw.need_res( 'stc/table-form.css') -%]
+[%- dw.need_res( 'stc/choice-list.css') -%]
+[%- dw.need_res( 'stc/collapsible.css') -%]
+
+<h2>Site content</h2>
+<h3>Tables</h3>
+<p>For tabular data.</p>
+<p>Note: we're phasing out the use of tables that are purely for layout, but we still have some inherited from old code that are lying around, so those are still included here.</p>
+<table>
+<caption>Caption</caption>
+<thead><th>Col 1</th><th>Col 2</th><th>Col 3</th></thead>
+<tbody>
+    <tr class="odd">
+        <td>entire row is striped odd</td><td>odd (row)</td><td>odd (row)</td>
+    </tr>
+    <tr class="even">
+        <td>entire row is striped even</td><td>even (row)</td><td>even(row)</td>
+    </tr>
+    <tr>
+        <td class="odd">only one cell is striped odd</td><td>blah</td><td>blah</td>
+    </tr>
+    <tr>
+        <td class="even">only one cell is striped even</td><td>blah</td><td>blah</td>
+    </tr>
+</tbody>
+</table>
+
+<p>(Like in /manage/tags -- but is this a table, or is it just layout?)</p>
+<table>
+<tbody>
+    <tr><th>Category 1</th><td>1</td></tr>
+    <tr><th>Category 2</th><td>2</td></tr>
+    <tr><th>Category 3</th><td>3</td></tr>
+</tbody>
+</table>
+
+<p>table.grid</p>
+<table class='grid'>
+<thead><tr><th>Col 1</th><th>Col 2</th></tr></thead>
+<tbody>
+<tr><td>1-1</td><td>2-1</td></tr>
+<tr><td>2-1</td><td>2-2</td></tr>
+</tbody>
+</table>
+
+<h3>Tabbed content</h3>
+<p>Used in, e.g., the settings pages</p>
+
+<ul class="tablist">
+    <li class="tab"><a href="#">Tab 1</a></li>
+    <li class="tab"><a href="#" class='active'>Active tab</a></li>
+    <li class="tab disabled">(disabled)</li>
+</ul>
+<div class='tab-header'><p>Brief information about tab 1</p></div>
+<div class="tab-container">tab 1 contents</div>
+<div class='tab-header'><p>Brief information about tab 2</p></div>
+<div class="tab-container">tab 2 contents</div>
+
+
+<h3>Forms</h3>
+<h4>simple-form</h4>
+<form class='simple-form'>
+    <fieldset>
+        <legend><span>Group 1</span></legend>
+        <ul>
+            <li class='odd'><label for="simple-form-input-text-short">Short label</label><input type="text" id="simple-form-input-text-short" /></li>
+            <li class='even'><label for="simple-form-input-text-long">Longish long longish long longish label</label><input type="text" id="simple-form-input-text-long" /></li>
+            <li class='odd'><label for="simple-form-input-password">Password</label><input type="password" id="simple-form-input-password" /></li>
+
+            <li class='even'>
+                <fieldset class='radio-group'>
+                    <legend><span>A, B, or C?</span></legend>
+                    <ul>
+                    <li><input type="radio" id="abc1" name="abc" /><label for="abc1">A</label></li>
+                    <li><input type="radio" id="abc2" name="abc" /><label for="abc2">B</label></li>
+                    <li><input type="radio" id="abc3" name="abc" /><label for="abc3">C</label></li>
+                    </ul>
+                </fieldset>
+            </li>
+
+            <li class='odd'>
+                <fieldset class='checkbox-group'>
+                    <legend><span>Checkboxes</span></legend>
+                    <ul>
+                    <li><input type="checkbox" id="ticky1" name="ticky" /><label for="ticky1">Ticky</label></li>
+                    <li><input type="checkbox" id="ticky2" name="ticky" /><label for="ticky2">Tickeh</label></li>
+                    <li><input type="checkbox" id="ticky3" name="ticky" /><label for="ticky3">Check</label></li>
+                    </ul>
+                </fieldset>
+            </li>
+
+            <li class='even'>
+                <label for="simple-form-textarea">Textarea</label>
+                <textarea id="simple-form-textarea"></textarea>
+            </li>
+
+            <li class='odd error'>
+                <label for="error-input">Errored <strong class='error-msg'>Reason for error</strong></label>
+                <input type="text" id="error_input" />
+            </li>
+
+            <li class='even'>
+                <label for="hint-input">Input with Hint</label>
+                <input type="text" id="hint-input" class="hint-input" value="hint text" />
+                <p class='note'>Not ideal; CSS demo only</p>
+            </li>
+        </ul>
+    </fieldset>
+    <fieldset>
+        <legend><span>Group 2</span></legend>
+        <ul>
+            <li class='odd'>
+                <label for="simple-form-select">Select from Dropdown</label>
+                <select id="simple-form-select">
+                    <option value="a">A</option>
+                    <option value="b">B</option>
+                    <optgroup label="numbers">
+                        <option value="1">1</option>
+                        <option value="2">2</option>
+                    </optgroup>
+                    <optgroup label="punctuation">
+                        <option value=".">.</option>
+                        <option value=",">,</option>
+                        <option value="!">!</option>
+                    </optgroup>
+                </select>
+            </li>
+
+            <li class='even'>
+                <label for="simple-form-select-multiple">Multi-Select</label>
+                <select id="simple-form-select-multiple" class='multiple-select' multiple="multiple">
+                    <option value="a">A</option>
+                    <option value="b">B</option>
+                    <optgroup label="numbers">
+                        <option value="1">1</option>
+                        <option value="2">2</option>
+                    </optgroup>
+                    <optgroup label="punctuation">
+                        <option value=".">.</option>
+                        <option value=",">,</option>
+                        <option value="!">!</option>
+                    </optgroup>
+                </select>
+            </li>
+
+            <li class='odd'>
+                <label for="simple-form-file">Upload file</label>
+                <input id="simple-form-file" type="file" />
+            </li>
+        </ul>
+    </fieldset>
+    <fieldset class="submit">   
+        <input type="submit" value="Submit" />
+    </fieldset>
+</form>
+
+<h4>table-form</h4>
+<form class='table-form'>
+<table>
+  <caption>Table Caption</caption> 
+  <thead> 
+    <tr> 
+      <th scope="col">Col 1</th>
+      <th scope="col">Col 2</th>
+      <th scope="col">Col 3</th>
+      <th scope="col">Col 4</th>
+    </tr> 
+  </thead> 
+  <tbody>
+    [% FOREACH item IN [
+        { col1 => "foo", col2 => "apple", col3 => "100%" },
+        { col1 => "bar", col2 => "banana", col3 => "1.35%" },
+        { col1 => "baz", col2 => "cream cheese cupcake", col3 => "125,000" },
+    ]%]
+    <tr class="[% loop.count % 2 ? 'odd' : 'even' %]">
+      <td>[%item.col1%]</td> 
+      <td>[%item.col2%]</td>
+      <td>[%item.col3%]</td>
+      <td>
+        <input type="checkbox" id="check_[%item.col1%]" />
+        <label for="check_[%item.col1%]">ticky (does the label need to be more descriptive?)</label></td>
+    </tr> 
+    [% END %]
+  </tbody> 
+</table>
+</form>
+
+<h4>choice-list</h4>
+<form class='choice-list'>
+    <fieldset>
+    <ul>
+        [% FOR user IN ['afuna', 'system', 'someuser' ] %]
+            <li class="[% loop.count % 2 ? 'odd' : 'even' %]">
+                <input type="checkbox" name="status" value="[%user%]" id="status_[%user%]" title=""/>
+                <label for="status_[%user%]">[%user%]</label>
+            </li>
+        [% END %]
+    </ul>
+    </fieldset>
+    <fieldset class="submit">
+        <input type="submit" />
+    </fieldset>
+</form>
+
+<h4>highlighted simple-form</h4>
+<form class='simple-form highlight'>
+    <fieldset>
+        <ul>
+        <li><label for="simple-form-highlighted-text">Something</label><input id="simple-form-highlighted-text" />
+        </li>
+        </ul>
+    </fieldset>
+    <fieldset class='submit'>
+        <input type="submit" />
+    </fieldset>
+</form>
+
+<h3>Buttons / Actions</h3>
+<p>action-bar extends across the whole page:</p>
+<div class='action-bar'>
+    <input type="submit" value="Delete" />
+    <input type="submit" value="Submit" />
+</div>
+
+<p>action-box displays a box surrounding the element it contains:</p>
+<p>Note: probably will be removed in favor of a consistently styled fieldset containing the submit button once we have all the markup fixed</p>
+<div class='action-box'>
+    <input type="submit" value="Submit" />
+</div>
+
+<input type="submit" class="submit" />
+
+<p>(consider merging the two into one consistent display?)</p>
+
+<p>collapsible subheader</p>
+<h3 class='subheader collapsible collapsed'><div class='collapse-button'>expand </div>Section Header 1</h3>
+<h3 class='subheader collapsible expanded'><div class='collapse-button'>collapse </div>Section Header 2</h3>
+
+<h3>Highlights</h3>
+<div class='highlight-box'>
+highlight-box: small boxes of content important enough to give focus to, but not warnings or errors. May also contain form elements that should be the focus of the page. <a href="#">Link</a> <a href="">Visited Link</a>
+
+    <div class='inset-box'>
+        Inset in a highlighted area
+    </div>
+</div>
+<div class='info-box message-box'>
+<h1 class='title'>info-box/message-box (title v1)</h1>
+<div class='title'>info-box/message-box (title v2)</div>
+
+<p>notes/tips? <a href="#">Link</a> <a href="">Visited Link</a></p>
+</div>
+<div class="warning-box message-box">
+<h1 class='title'>warning-box/message-box (title v1)</h1>
+<div class='title'>warning-box/message-box (title v2)</div>
+<p>warning for what the user is viewing, such as adult content interstitials, or protected content pages. <a href="#">Link</a> <a href="">Visited Link</a></p>
+</div>
+<div class='error-box message-box'>
+<h1 class='title'>error-box/message-box (title v1)</h1>
+<div class='title'>error-box/message-box (title v2)</div>
+
+<p>error message for user input. <a href="#">Link</a> <a href="">Visited Link</a></p>
+</div>
+
+<ul class='select-list'>
+    <li>item 1</li>
+    <li>item 2</li>
+    <li class="selected">item 3</li>
+</ul>
+
+<h3>Other Basic HTML Elements</h3>
+
+<h1>h1: automatically inserted as a page title on every page</h1>
+<h2>h2</h2>
+<h3>h3</h3>
+<h4>h4</h4>
+<h5>h5</h5>
+<h6>h6</h6>
+
+<ul><li>item 1</li><li>item 2</li></ul>
+<ol><li>item 1</li><li>item 2</li></ol>
+<small>small</small>
+<large>large</large>
+<q>quoted text</q>
+<cite>cite</cite>
+<blockquote>blockquoted text</blockquote>
+
+<a href="#">Link</a> <a href="">Visited Link</a>
+
+<h3>Misc / accents</h3>
+<p>.preview-image:</p>
+<img width="100" height="100" class='preview-image' />
+
+<p>comment table</p>
+<table>
+    <tr>
+        <td class="cmtbar odd">cmtbar odd</td><td class="cmtbar odd screened">cmtbar odd screened</td><td class="cmtbar odd highlight">cmtbar odd highlight</td>
+    </tr>
+    <tr>
+        <td class="cmtbar even">cmtbar even</td><td class="cmtbar even screened">cmtbar even screened</td><td class="cmtbar even highlight">cmtbar even highlight</td>
+    </tr>
+</table>
+
+<p>.column-table: very rarely used (only in managing tags)</p>
+<table class='column-table'>
+<tbody>
+<tr><th>label</th><td>etc</td></tr>
+<tr><th>label</th><td>more etc</td></tr>
+</table>
+<p>.disabled</p>
+<div class="disabled">disabled link or control</div>
+
+<p>.read</p>
+<div class="read">read text, probably faded</div>
+
+<p>.detail</p>
+<div class="detail">detail</div>
+
+<p>.note (merge with detail?)</p>
+<div class="note">note</div>
+
+<p>.status-hint (for noting current status, and hint of actions to take)</p>
+<div class="status-hint">status-hint</div>
+
+<h2>User content</h2>
+<div class='usercontent'>
+
+<table>
+<thead><th>Col 1</th><th>Col 2</th></thead>
+<tbody>
+<tr><td>row 1</td><td>row 1</td></tr>
+<tr><td>row 2</td><td>row 2</td></tr>
+<tr><td>row 3</td><td>row 3</td></tr>
+<tr><td>row 4</td><td>row 4</td></tr>
+</tbody>
+</table>
+
+</div>
+
+<h2>Things that are lacking:</h2>
+<ul>
+<li>Some kind of consistent appearance for landing pages when viewing a security filter you're not allowed to see, or a tag that doesn't exist</li>
+<li>Need to figure out what to do for pages like <a href="http://www.dream.fu/changepassword">change password</a>, where the highlight box looks awkward extending across the entire page</li>
+</ul>
diff -r b2b1ca17e24d -r 0a3ff6232c78 views/dev/classes.tt.text
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/views/dev/classes.tt.text	Tue Dec 28 19:40:54 2010 +0800
@@ -0,0 +1,2 @@
+.title=Elements and CSS Classes used in Site Pages
+
diff -r b2b1ca17e24d -r 0a3ff6232c78 views/interests/enmasse.tt
--- a/views/interests/enmasse.tt	Thu Dec 23 10:39:49 2010 -0600
+++ b/views/interests/enmasse.tt	Tue Dec 28 19:40:54 2010 +0800
@@ -57,6 +57,4 @@
 <input type='hidden' name='fromuser' value='[% fromu.user %]' />
 <input type='hidden' name='allintids' value='[% allintids %]' />
 <h1>[% '.finished.header' | ml %]</h1><p>[% '.finished.about' | ml %]</p>
-<div class='standout'><table summary='' class='standout-inner'><tr><td>
-<input type='submit' value='[% ".finished.save_button" | ml %]' />
-</td></tr></table></div></form>
+<div class='action-box'><input type='submit' value='[% ".finished.save_button" | ml %]' /></div></form>
diff -r b2b1ca17e24d -r 0a3ff6232c78 views/login.tt
--- a/views/login.tt	Thu Dec 23 10:39:49 2010 -0600
+++ b/views/login.tt	Tue Dec 28 19:40:54 2010 +0800
@@ -53,7 +53,7 @@ reference 'perldoc perlartistic' or 'per
   <div class="login-create-account"> 
     <hr class="hr" /> 
     <h4>[% '.createaccount.header' | ml( sitename = site.name ) %]</h4> 
-    <form action="[% roots.site %]/create" method="get"><input type="submit" value="[% '.createaccount.button' | ml %]" class="create-account" tabindex="18" /></form> 
+    <form action="[% roots.site %]/create" method="get"><input type="submit" value="[% '.createaccount.button' | ml %]" class="submit" tabindex="18" /></form> 
       <ul> 
         <li>[% '.createaccount.whylogin.benefit1' | ml %]</li>
         <li>[% '.createaccount.whylogin.benefit2' | ml %]</li>
diff -r b2b1ca17e24d -r 0a3ff6232c78 views/rename.tt
--- a/views/rename.tt	Thu Dec 23 10:39:49 2010 -0600
+++ b/views/rename.tt	Tue Dec 28 19:40:54 2010 +0800
@@ -15,12 +15,14 @@ the same terms as Perl itself.  For a co
 [%- sections.title = '.title' | ml -%]
 
 [% IF error_list %]
+    <div class='error-box'>
     <p>[% '.error.header' | ml %]</p>
     <ul class='error-list'>
         [% FOREACH error = error_list %]
             <li>[% error %] </li>
         [% END %]
     </ul>
+    </div>
 [% END %]
 
 [% IF token %]
diff -r b2b1ca17e24d -r 0a3ff6232c78 views/rename/swap.tt
--- a/views/rename/swap.tt	Thu Dec 23 10:39:49 2010 -0600
+++ b/views/rename/swap.tt	Tue Dec 28 19:40:54 2010 +0800
@@ -15,12 +15,14 @@ the same terms as Perl itself.  For a co
 [%- sections.title = '.title' | ml -%]
 
 [% IF error_list %]
+    <div class='error-box'>
     <p>[% '.error.header' | ml %]</p>
     <ul class='error-list'>
         [% FOREACH error = error_list %]
             <li>[% error %] </li>
         [% END %]
     </ul>
+    </div>>
 [% END %]
 
 <p>[% '.intro' | ml %]</p>
diff -r b2b1ca17e24d -r 0a3ff6232c78 views/shop/cartdisplay.tt
--- a/views/shop/cartdisplay.tt	Thu Dec 23 10:39:49 2010 -0600
+++ b/views/shop/cartdisplay.tt	Tue Dec 28 19:40:54 2010 +0800
@@ -1,4 +1,4 @@
-<div id='shop-status-bar' class='standout-colors'>
+<div id='shop-status-bar' class='highlight-box'>
     <div class='shop-status-left'>
         [% IF remote %]
             [% IF remote.is_person %]
--------------------------------------------------------------------------------
ninetydegrees: Art & Text: heart with aroace colors, "you are loved" (Default)

[personal profile] ninetydegrees 2010-12-28 03:43 pm (UTC)(link)
Two things I've noticed in Tropo Purple (apart from the button thing):
-- Select Journal Style and Customize Style don't display correctly for me: the CORE navigation menu is hidden or something. The page displays fine in other skins.
-- Manage Communities seems to be missing styling for th headers (because it's just a th, not a thead th or an .even th or an .odd th?). Same thing for Members. This might also be true of Invitations and Moderation. I haven't tested these. Also, I think the problem's the same in all skins.
Edited (Last edit, I swear!) 2010-12-28 15:54 (UTC)
ninetydegrees: Art & Text: heart with aroace colors, "you are loved" (Default)

[personal profile] ninetydegrees 2010-12-28 04:56 pm (UTC)(link)
If I'm not mistaken, the display issue is caused by a closing div instead of a closing ul in LayoutChooser.pm line 93.
Edited 2010-12-28 18:41 (UTC)
ninetydegrees: Art & Text: heart with aroace colors, "you are loved" (Default)

[personal profile] ninetydegrees 2010-12-29 09:16 am (UTC)(link)
They do and you're welcome! One other thing I've just noticed: the footer now has two bullets between links, I think one is from the usual <li> thing and the other one is hardcoded (&bull;)
kareila: (Default)

[personal profile] kareila 2010-12-29 07:34 pm (UTC)(link)
FYI I wasn't able to reproduce this. Can you give more details on which page you saw the double bullets, and in which scheme?
ninetydegrees: Art & Text: heart with aroace colors, "you are loved" (Default)

[personal profile] ninetydegrees 2010-12-29 07:37 pm (UTC)(link)
Sorry, I should have said so: all pages, any Tropo skin. If it makes a difference, I've updated to the latest commit.