Added development requirements file

apps/web_theme/media/LICENSE

@@ -0,0 +1,21 @@
+== MIT License
+ 
+Copyright (c) 2009, Andrea Franz - (http://gravityblast.com)
+ 
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+ 
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+ 
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

apps/web_theme/media/README.md

@@ -0,0 +1,159 @@
+Web App Theme
+=============
+
+Web App Theme is a rails generator by [Andrea Franz](http://gravityblast.com) that you can use to generate admin panels quickly.
+Inspired by cool themes like [Lighthouse](http://lighthouseapp.com/), [Basecamp](http://basecamphq.com/), [RadiantCMS](http://radiantcms.org/) and others,
+it wants to be an idea to start developing a complete web application layout.
+
+Installation
+------------
+
+You can use web-app-theme >= 0.6.2 with Rails 3. If you want to use it with rails 2, use web-app-theme 0.5.3
+Specify the web-app-theme gem in your Gemfile, only for :development and :test
+
+    group :development, :test do
+      gem 'web-app-theme', '>= 0.6.2'
+    end
+
+Usage
+-----
+
+### Theme Generator
+
+Used without parameters, it generates the layout inside the application.html.erb file using the default theme.
+
+    rails g web_app_theme:theme
+
+You can specify the layout file name in the first parameter:
+
+    rails g web_app_theme:theme admin # it will generate a layout called `admin.html.erb`
+
+If you want to use another theme, instead of the default, you can use the `--theme` option:
+
+    rails g web_app_theme:theme admin --theme="drastic-dark"
+
+You can specify the template engine with `--engine=name` option, where name can be erb (default) or haml:
+
+    rails g web_app_theme:theme --engine=haml # you must specify haml in your Gemfile
+
+If you want to generate the stylesheets of a specific theme without changing the previously generated layout you can pass the `--no-layout` option:
+
+    rails g web_app_theme:theme --theme=bec --no-layout
+
+
+You can specify the text used in the header with the `--app-name` option:
+
+    rails g web_app_theme:theme --app-name="My New Application"
+  
+If you need a layout for login and signup pages, you can use the `--type` option with `sign` as value. Ìf not specified, the default value is `administration`
+
+    rails g web_app_theme:theme sign --layout-type=sign
+
+### Themed Generator
+
+Start creating your controllers manually or with a scaffold, and then use the `themed generator` to overwrite the previously generated views.
+
+If you have a controller named like the plural of the used model you can specify just the first parameter:
+
+    rails g web_app_theme:themed posts # you have a model named Post and a controller named PostsController
+    
+    rails g web_app_theme:themed admin/gallery_pictures # you have a model named GalleryPicture and a controller named Admin::GalleryPicturesController
+
+Use the `--layout` option specifying the previously generated layout to add a link to the controller you are working on:
+
+    rails g web_app_theme:themed posts --layout=admin # you will see the `Posts` link in the navigation
+
+If the controller has a name different to the model used, specify the controller path in the first parameter and the model name in the second one:
+
+    rails g web_app_theme:themed items post
+    
+    rails g web_app_theme:themed admin/items post
+
+If you use `will_paginate` for pagination use the `--will-paginate`:
+
+    rails g web_app_theme:themed items post --will-paginate
+
+You can specify the template engine with `--engine=name` option, where name can be erb (default) or haml:
+
+    rails g web_app_theme:themed posts --engine=haml
+
+If you have something like `map.resource :dashboard` in your `routes.rb` file, you can use the `--type=text` to generate a view with just text:
+    
+    rails g web_app_theme:themed dashboards --themed-type=text
+
+If you want to show form error messages inside the generated forms, use the following code inside your `environment.rb`
+
+    ActionView::Base.field_error_proc = Proc.new do |html_tag, instance| 
+      if html_tag =~ /<label/
+        %|<div class="fieldWithErrors">#{html_tag} <span class="error">#{[instance.error_message].join(', ')}</span></div>|.html_safe
+      else
+        html_tag
+      end
+    end
+
+If you want to have translated pages, simple create in your locale.yml the keys just like config/locales/en_us.yml example.
+
+	en_us:
+	  web-app-theme: 
+	    save: Save
+	    cancel: Cancel
+	    list: List
+	    edit: Edit
+	    new: New
+	    show: Show
+	    delete: Delete
+	    confirm: Are you sure?
+	    created_at: Created at
+	    all: All
+
+
+![Web App Theme screenshot](http://img.skitch.com/20091109-c2k618qerx1ysw5ytxsighuf3f.jpg)
+
+Contributing
+---
+
+* Fork this repository.
+* Duplicate the  'themes/default' folder and rename it.
+* Modify the style.css file adding your favorite colors.
+* Add a link to your theme in the 'Switch Theme' block inside the index.html file.
+* Send a pull request.
+
+Links
+-----
+
+* Repository: git://github.com/pilu/web-app-theme.git
+* List: <http://groups.google.com/group/web-app-theme-generator>
+* Issues: <http://github.com/pilu/web-app-theme/issues>
+* Gem: <http://gemcutter.org/gems/web-app-theme>
+* Themes: <http://pilu.github.com/web-app-theme>
+
+Author
+------
+
+Andrea Franz - [http://gravityblast.com](http://gravityblast.com)
+
+Contributors
+------------
+
+* Nelson Fernandez
+* Giovanni Intini
+* Jeremy Durham
+* Wouter de Vries
+* Marco Borromeo
+* rick mckay
+* Peter Sarnacki
+* Garret Alfert
+* Mikkel Hoegh
+* Juan Maria Martinez Arce
+* Stas SUSHKOV
+* Daniel Cukier
+* Roberto Klein
+* Bryan Woods
+* Sandro Duarte
+* David Francisco
+
+Credits
+-------
+
+* Icons: FAMFAMFAM Silk icons <http://www.famfamfam.com/lab/icons/silk/>
+* Buttons: Particletree - Rediscovering the Button Element <http://particletree.com/features/rediscovering-the-button-element/>

apps/web_theme/media/Rakefile

@@ -0,0 +1,25 @@
+require "rubygems"
+# require "cucumber/rake/task"
+# require "spec/rake/spectask"
+# 
+# Cucumber::Rake::Task.new
+
+# Spec::Rake::SpecTask.new do |t|
+#   t.spec_files = FileList['test/**/*_spec.rb']
+# end
+
+# task :default => [:spec, :cucumber]
+
+begin
+  require 'jeweler'
+  Jeweler::Tasks.new do |gemspec|
+    gemspec.name = "web-app-theme"
+    gemspec.summary = "Web app theme generator"
+    gemspec.description = "Web app theme generator for rails projects"
+    gemspec.email = "andrea@gravityblast.com"
+    gemspec.homepage = "http://github.com/pilu/web-app-theme"
+    gemspec.authors = ["Andrea Franz"]
+  end
+rescue LoadError
+  puts "Jeweler not available. Install it with: sudo gem install technicalpickles-jeweler -s http://gems.github.com"
+end

apps/web_theme/media/VERSION

@@ -0,0 +1 @@
+0.6.3

apps/web_theme/media/config/locales/de_de.yml

@@ -0,0 +1,15 @@
+de:
+  web-app-theme:
+    save: Speichern
+    cancel: Abbrechen
+    list: Liste
+    edit: Bearbeiten
+    new: Neu
+    show: Anzeigen
+    delete: Löschen
+    confirm: Sind Sie sicher?
+    created_at: Erstellt am
+    all: Alle
+    profile: Benutzerkonto
+    settings: Einstellungen
+    logout: Abmelden

apps/web_theme/media/config/locales/pt_br.yml

@@ -0,0 +1,12 @@
+pt_br:
+  web-app-theme: 
+    save: Salvar
+    cancel: Cancelar
+    list: Listar
+    edit: Alterar
+    new: Novo
+    show: Exibir
+    delete: Excluir
+    confirm: Você tem certeza?
+    created_at: Criado em
+    all: Lista de

apps/web_theme/media/features/step_definitions/layout_steps.rb

@@ -0,0 +1,59 @@
+Given /^I have a new rails app$/ do
+  generate_rails_app
+end
+
+Given /^I have no layouts$/ do
+  remove_layouts  
+end
+
+Given /^I have no stylesheets$/ do
+  remove_stylesheets
+end
+
+Given /^I generate a theme$/ do
+  generate_layout
+end
+
+Given /^I generate a theme with name "([^\"]*)"$/ do |name|
+  generate_layout(name)
+end
+
+Given /^I generate a theme choosing the "([^\"]*)" theme$/ do |theme_name|
+  generate_layout(:theme => theme_name)
+end
+
+Then /^I should have a layout named "([^\"]*)"$/ do |filename|
+  layout_exists?(filename).should be_true  
+end
+
+Then /^I should have a stylesheet named "([^\"]*)"$/ do |filename|
+  stylesheet_exists?(filename).should be_true    
+end
+
+Then /^I should have an image named "([^\"]*)"$/ do |filename|
+  image_exists?(filename).should be_true    
+end
+
+Given /^I generate a theme without layout choosing the "([^\"]*)" theme$/ do |theme_name|
+  generate_layout(:theme => theme_name, :no_layout => true )
+end
+
+Then /^I should not have any layouts$/ do
+  layouts_count.should == 0
+end
+
+Given /^I generate a theme with application name "([^\"]*)"$/ do |name|
+  generate_layout(:app_name => name )
+end
+
+Then /^the layout "([^\"]*)" should have "([^\"]*)" as page title$/ do |layout, title|
+  layout_title(layout).should == title
+end
+
+Given /^I generate a theme for signin and signup$/ do
+  generate_layout(:layout_type => :sign)
+end
+
+Then /^I should have a layout named "([^\"]*)" with just a box$/ do |layout|
+  layout_with_box?(layout).should be_true
+end

apps/web_theme/media/features/step_definitions/themed_steps.rb

@@ -0,0 +1,19 @@
+Given /^a model "([^\"]*)"$/ do |model_name|
+  generate_model(model_name)  
+end
+
+Given /^I generate views for controller "([^\"]*)"$/ do |controller_path|
+  generate_views(controller_path)
+end
+
+When /^I generate views for controller "([^\"]*)" and model "([^\"]*)"$/ do |controller_path, model_name|
+  generate_views(controller_path, model_name)
+end
+
+When /^I generate text views for "([^\"]*)"/ do |controller_path|
+  generate_views(controller_path, :themed_type => :text)
+end
+
+Then /^I should have a view named "([^\"]*)"$/ do |view_path|
+  view_exists?(view_path).should be_true
+end

apps/web_theme/media/features/support/env.rb

@@ -0,0 +1,86 @@
+$:.unshift(File.dirname(__FILE__) + "/../../rails_generators")
+require "rubygems"
+require "rails_generator"
+require 'rails_generator/scripts/generate'
+require "fileutils"
+require "theme/theme_generator"
+
+web_app_theme_root  = File.join(File.dirname(__FILE__), "/../../")
+tmp_rails_app_name  = "tmp_rails_app"
+tmp_rails_app_root  = File.join(web_app_theme_root, tmp_rails_app_name)
+
+Rails::Generator::Base.append_sources(Rails::Generator::PathSource.new(:plugin, "#{web_app_theme_root}/rails_generators/"))
+
+module GeneratorHelpers
+  def generate_rails_app
+    FileUtils.mkdir(File.join(@app_root))
+  end    
+  
+  def remove_layouts
+    FileUtils.rm_rf(File.join(@app_root, "app", "views", "layouts"))
+  end
+  
+  def remove_stylesheets
+    FileUtils.rm_rf(File.join(@app_root, "public", "stylesheets"))
+  end
+  
+  def generate(*args)
+    options = !args.empty? && args.last.is_a?(Hash) ? args.pop : {}
+    options.merge!({:destination => @app_root, :quiet => true})    
+    Rails::Generator::Scripts::Generate.new.run(args, options)
+  end
+  
+  def generate_layout(*args)
+    generate(:theme, *args)
+  end
+  
+  def generate_views(*args)
+    generate(:themed, *args)
+  end
+  
+  def generate_model(model_name)
+    Object.const_get(model_name)
+  rescue NameError
+    Object.const_set(model_name, Class.new)
+    klass = Object.const_get(model_name)
+    def klass.columns; []; end
+  end
+  
+  def layouts_count
+    Dir[File.join(@app_root, "app", "views", "layouts", "**", "*.erb")].size
+  end
+  
+  def layout_exists?(filename)
+    File.exists?(File.join(@app_root, "app", "views", "layouts", filename))
+  end
+  
+  def view_exists?(view_path)
+    File.exists?(File.join(@app_root, "app", "views", view_path))
+  end
+  
+  def image_exists?(image_path)
+    File.exists?(File.join(@app_root, "public", "images", image_path))
+  end
+  
+  def stylesheet_exists?(relative_path)
+    File.exists?(File.join(@app_root, "public", "stylesheets", relative_path)).should be_true
+  end
+  
+  def layout_title(layout)
+    File.open(File.join(@app_root, "app", "views", "layouts", layout), "r").read.match(/<title>([^<]*)<\/title>/)[1]
+  end
+  
+  def layout_with_box?(layout)
+    File.open(File.join(@app_root, "app", "views", "layouts", layout), "r").read =~ %r|<div id="box">|
+  end
+end
+
+Before do
+  @app_root = tmp_rails_app_root  
+end
+
+After do
+  FileUtils.rm_rf(tmp_rails_app_root)
+end
+
+World(GeneratorHelpers)

apps/web_theme/media/features/theme_generator.feature

@@ -0,0 +1,55 @@
+Feature: Layout generation
+  In order to create a great application
+  I should be able to generate a layout with Web App Theme
+  
+  # script/generate theme
+  Scenario: Generate a layout    
+    Given I have a new rails app
+    And I have no layouts
+    And I have no stylesheets
+    When I generate a theme
+    Then I should have a layout named "application.html.erb"
+    And I should have a stylesheet named "web_app_theme.css"
+    And I should have a stylesheet named "web_app_theme_override.css"
+    And I should have a stylesheet named "themes/default/style.css"
+    And I should have an image named "web-app-theme/cross.png"
+    And I should have an image named "web-app-theme/key.png"
+    And I should have an image named "web-app-theme/tick.png"
+    And I should have an image named "web-app-theme/application_edit.png"
+  
+  # script/generate theme admin
+  Scenario: Generate a layout with a name
+    Given I have a new rails app
+    And I have no layouts
+    And I generate a theme with name "admin"
+    Then I should have a layout named "admin.html.erb"
+  
+  # script/generate theme --theme="drastic-dark"
+  Scenario: Generate a layout choosing a theme
+    Given I have a new rails app
+    And I have no stylesheets
+    And I generate a theme choosing the "drastic-dark" theme
+    Then I should have a stylesheet named "themes/drastic-dark/style.css"
+  
+  # script/generate theme --theme=bec --no_layout
+  Scenario: Generate only stylesheets without layout
+    Given I have a new rails app
+    And I have no layouts
+    And I generate a theme without layout choosing the "bec" theme
+    Then I should have a stylesheet named "themes/bec/style.css"
+    But I should not have any layouts
+  
+  # script/generate theme --app_name="My New Application"
+  Scenario: Generate layout with application name
+    Given I have a new rails app
+    And I have no layouts
+    And I generate a theme with application name "My New Application"
+    Then the layout "application.html.erb" should have "My New Application" as page title
+  
+  # script/generate theme --type=sign
+  Scenario: Generate layout for signin and signup
+    Given I have a new rails app
+    And I have no layouts
+    And I generate a theme for signin and signup
+    Then I should have a layout named "sign.html.erb"
+    And I should have a layout named "sign.html.erb" with just a box

apps/web_theme/media/features/themed_generator.feature

@@ -0,0 +1,52 @@
+Feature: Theme generation
+	In order to create a great application
+	I should be able to creare theme after creating a layout
+	
+	# script/generate themed posts
+	Scenario: Creating CRUD views with controller path
+		Given I have a new rails app
+		And a model "Post"
+		When I generate views for controller "posts"
+		Then I should have a view named "posts/index.html.erb"
+		And I should have a view named "posts/new.html.erb"
+		And I should have a view named "posts/show.html.erb"
+		And I should have a view named "posts/edit.html.erb"
+	
+	# script/generate themed items Post
+	Scenario: Creating CRUD views with controller path and model name
+		Given I have a new rails app
+		And a model "Post"
+		When I generate views for controller "items" and model "Post"
+		Then I should have a view named "items/index.html.erb"
+		And I should have a view named "items/new.html.erb"
+		And I should have a view named "items/show.html.erb"
+		And I should have a view named "items/edit.html.erb"
+  
+  # script/generate themed admin/items Post
+	Scenario: Creating CRUD views with controller path "admin/items" and model name
+		Given I have a new rails app
+		And a model "Post"
+		When I generate views for controller "admin/items" and model "Post"
+		Then I should have a view named "admin/items/index.html.erb"
+		And I should have a view named "admin/items/new.html.erb"
+		And I should have a view named "admin/items/show.html.erb"
+		And I should have a view named "admin/items/edit.html.erb"
+	
+	# script/generate themed admin/gallery_pictures
+	Scenario: Creating CRUD views with controller path "admin/gallery_pictures"
+		Given I have a new rails app
+		And a model "GalleryPicture"
+		When I generate views for controller "admin/gallery_pictures"
+		Then I should have a view named "admin/gallery_pictures/index.html.erb"
+		And I should have a view named "admin/gallery_pictures/new.html.erb"
+		And I should have a view named "admin/gallery_pictures/show.html.erb"
+		And I should have a view named "admin/gallery_pictures/edit.html.erb"
+	
+	# script/generate themed homes --type=text
+	Scenario: Creating text theme
+	  Given I have a new rails app
+	  When I generate text views for "homes"
+	  Then I should have a view named "homes/show.html.erb"
+	  And I should have a view named "homes/_sidebar.html.erb"
+	  
+	  

apps/web_theme/media/index.html

@@ -0,0 +1,474 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>Web App Theme</title>
+  <link rel="stylesheet" href="stylesheets/base.css" type="text/css" media="screen" />
+  <link rel="stylesheet" id="current-theme" href="stylesheets/themes/default/style.css" type="text/css" media="screen" />
+  <script type="text/javascript" charset="utf-8" src="javascripts/jquery-1.3.min.js"></script>
+  <script type="text/javascript" charset="utf-8" src="javascripts/jquery.scrollTo.js"></script>
+  <script type="text/javascript" charset="utf-8" src="javascripts/jquery.localscroll.js"></script>
+  <script type="text/javascript" charset="utf-8">
+    // <![CDATA[
+    var Theme = {
+      activate: function(name) {
+        window.location.hash = 'themes/' + name
+        Theme.loadCurrent();
+      },
+
+      loadCurrent: function() {
+        var hash = window.location.hash;
+        if (hash.length > 0) {
+          matches = hash.match(/^#themes\/([a-z0-9\-_]+)$/);
+          if (matches && matches.length > 1) {
+            $('#current-theme').attr('href', 'stylesheets/themes/' + matches[1] + '/style.css');
+          } else {
+            alert('theme not valid');
+          }
+        }
+      }
+    }
+
+    $(document).ready(function() {
+      Theme.loadCurrent();
+      $.localScroll();
+      $('.table :checkbox.toggle').each(function(i, toggle) {
+        $(toggle).change(function(e) {
+          $(toggle).parents('table:first').find(':checkbox:not(.toggle)').each(function(j, checkbox) {
+            checkbox.checked = !checkbox.checked;
+          })
+        });
+      });
+    });
+    // ]]>
+  </script>
+</head>
+<body>
+  <div id="container">
+    <div id="header">
+      <h1><a href="index.html">Web App Theme</a></h1>
+      <div id="user-navigation">
+        <ul class="wat-cf">
+          <li><a href="#">Profile</a></li>
+          <li><a href="#">Settings</a></li>
+          <li><a class="logout" href="#">Logout</a></li>
+        </ul>
+      </div>
+      <div id="main-navigation">
+        <ul class="wat-cf">
+          <li class="first"><a href="#block-text">Main Page</a></li>
+          <li class="active"><a href="#block-text">Active</a></li>
+          <li><a href="#block-login">Login</a></li>
+          <li><a href="#block-signup">Signup</a></li>
+        </ul>
+      </div>
+    </div>
+    <div id="wrapper" class="wat-cf">
+      <div id="main">
+
+        <div class="block" id="block-text">
+          <div class="secondary-navigation">
+            <ul class="wat-cf">
+              <li class="active first"><a href="#block-text">Text</a></li>
+              <li><a href="#block-tables">Tables</a></li>
+              <li><a href="#block-forms">Forms</a></li>
+              <li><a href="#block-messages">Messages</a></li>
+              <li><a href="#block-forms-2">2 Columns Forms</a></li>
+              <li><a href="#block-lists">Lists</a></li>
+            </ul>
+          </div>
+          <div class="content">
+            <h2 class="title">Text</h2>
+            <div class="inner">
+              <p class="first">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="hightlight">Excepteur sint occaecat cupidatat non proident</span>, sunt in culpa qui officia deserunt mollit anim id est laborum.
+              </p>
+              <p> <span class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</span></p>
+              <p> <span class="gray">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</span></p>
+              <hr />
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="hightlight">Excepteur sint occaecat cupidatat non proident</span>, sunt in culpa qui officia deserunt mollit anim id est laborum.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="block" id="block-tables">
+          <div class="secondary-navigation">
+            <ul class="wat-cf">
+              <li class="first"><a href="#block-text">Text</a></li>
+              <li class="active"><a href="#block-tables">Tables</a></li>
+              <li><a href="#block-forms">Forms</a></li>
+              <li><a href="#block-messages">Messages</a></li>
+              <li><a href="#block-forms-2">2 Columns Forms</a></li>
+              <li><a href="#block-lists">Lists</a></li>
+            </ul>
+          </div>
+          <div class="content">
+            <h2 class="title">Tables</h2>
+            <div class="inner">
+              <form action="#" class="form">
+                <table class="table">
+                  <tr>
+                    <th class="first"><input type="checkbox" class="checkbox toggle" /></th>
+                    <th>ID</th>
+                    <th>Login</th>
+                    <th>Name</th>
+                    <th>Surname</th>
+                    <th class="last">&nbsp;</th>
+                  </tr>
+                  <tr class="odd">
+                    <td><input type="checkbox" class="checkbox" name="id" value="1" /></td><td>1</td><td>hulk</td><td>Hulk</td><td>Hogan</td><td class="last"><a href="#">show</a> | <a href="#">edit</a> | <a href="#">destroy</a></td>
+                  </tr>
+                  <tr class="even">
+                    <td><input type="checkbox" class="checkbox" name="id" value="1" /></td><td>2</td><td>ultimate</td><td>Ultimate</td><td>Warrior</td><td class="last"><a href="#">show</a> | <a href="#">edit</a> | <a href="#">destroy</a></td>
+                  </tr>
+                  <tr class="odd">
+                    <td><input type="checkbox" class="checkbox" name="id" value="1" /></td><td>3</td><td>andre</td><td>Andre</td><td>The Giant</td><td class="last"><a href="#">show</a> | <a href="#">edit</a> | <a href="#">destroy</a></td>
+                  </tr>
+                  <tr class="even">
+                    <td><input type="checkbox" class="checkbox" name="id" value="1" /></td><td>4</td><td>machoman</td><td>Macho Man</td><td>Randy Savage</td><td class="last"><a href="#">show</a> | <a href="#">edit</a> | <a href="#">destroy</a></td>
+                  </tr>
+                </table>
+                <div class="actions-bar wat-cf">
+                  <div class="actions">
+                    <button class="button" type="submit">
+                      <img src="images/icons/cross.png" alt="Delete" /> Delete
+                    </button>
+                  </div>
+                  <div class="pagination">
+                    <span class="disabled prev_page">« Previous</span><span class="current">1</span><a rel="next" href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#">8</a><a href="#">9</a><a href="#">10</a><a href="#">11</a><a rel="next" class="next_page" href="#">Next »</a>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+
+        <div class="block" id="block-forms">
+          <div class="secondary-navigation">
+            <ul class="wat-cf">
+              <li class="first"><a href="#block-text">Text</a></li>
+              <li><a href="#block-tables">Tables</a></li>
+              <li class="active"><a href="#block-forms">Forms</a></li>
+              <li><a href="#block-messages">Messages</a></li>
+              <li><a href="#block-forms-2">2 Columns Forms</a></li>
+              <li><a href="#block-lists">Lists</a></li>
+            </ul>
+          </div>
+          <div class="content">
+            <h2 class="title">Forms</h2>
+            <div class="inner">
+              <form action="#" method="get" class="form">
+                <div class="group">
+                  <label class="label">Text field</label>
+                  <input type="text" class="text_field" />
+                  <span class="description">Ex: a simple text</span>
+                </div>
+                <div class="group">
+                  <div class="fieldWithErrors">
+                    <label class="label" for="post_title">Title</label>
+                    <span class="error">can't be blank</span>
+                  </div>
+                  <input type="text" class="text_field" />
+                  <span class="description">Ex: a simple text</span>
+                </div>
+                <div class="group">
+                  <label class="label">Text area</label>
+                  <textarea class="text_area" rows="10" cols="80"></textarea>
+                  <span class="description">Write here a long text</span>
+                </div>
+                <div class="group navform wat-cf">
+                  <button class="button" type="submit">
+                    <img src="images/icons/tick.png" alt="Save" /> Save
+                  </button>
+                  <span class="text_button_padding">or</span>
+                  <a class="text_button_padding link_button" href="#header">Cancel</a>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+
+        <div class="block" id="block-messages">
+          <div class="secondary-navigation">
+            <ul class="wat-cf">
+              <li class="first"><a href="#block-text">Text</a></li>
+              <li><a href="#block-tables">Tables</a></li>
+              <li><a href="#block-forms">Forms</a></li>
+              <li class="active"><a href="#block-messages">Messages</a></li>
+              <li><a href="#block-forms-2">2 Columns Forms</a></li>
+              <li><a href="#block-lists">Lists</a></li>
+            </ul>
+          </div>
+          <div class="content">
+            <h2 class="title">Messages</h2>
+            <div class="inner">
+              <div class="flash">
+                <div class="message error">
+                  <p>Error message</p>
+                </div>
+                <div class="message warning">
+                  <p>Warning message</p>
+                </div>
+                <div class="message notice">
+                  <p>Notice message</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="block" id="block-forms-2">
+          <div class="secondary-navigation">
+            <ul class="wat-cf">
+              <li class="first"><a href="#block-text">Text</a></li>
+              <li><a href="#block-tables">Tables</a></li>
+              <li><a href="#block-forms">Forms</a></li>
+              <li><a href="#block-messages">Messages</a></li>
+              <li class="active"><a href="#block-forms-2">2 Columns Forms</a></li>
+              <li><a href="#block-lists">Lists</a></li>
+            </ul>
+          </div>
+          <div class="content">
+            <h2 class="title">2 columns forms</h2>
+            <div class="inner">
+              <form action="#" method="get" class="form">
+                <div class="columns wat-cf">
+                  <div class="column left">
+                    <div class="group">
+                      <label class="label">Text field</label>
+                      <input type="text" class="text_field" />
+                    </div>
+                    <div class="group">
+                      <label class="label">Text area</label>
+                      <textarea class="text_area" rows="10" cols="80"></textarea>
+                    </div>
+                  </div>
+                  <div class="column right">
+                    <div class="group">
+                      <label class="label">Select</label>
+                      <select><option value="1">Choose...</option></select>
+                    </div>
+                    <div class="group">
+                      <label class="label">Check box</label>
+                      <div>
+                        <input type="checkbox" name="checkbox" id="checkbox_1" class="checkbox" value="1" /> <label for="checkbox_1" class="checkbox">Option 1</label>
+                      </div>
+                      <div>
+                        <input type="checkbox" name="checkbox" id="checkbox_2" class="checkbox" value="2" /> <label for="checkbox_2" class="checkbox">Option 2</label>
+                      </div>
+                    </div>
+                    <div class="group">
+                      <label class="label">Radio</label>
+                      <div>
+                        <input type="radio" name="radio" id="radio_1" class="checkbox" value="1" /> <label for="radio_1" class="radio">Option 1</label>
+                      </div>
+                      <div>
+                        <input type="radio" name="radio" id="radio_2" class="checkbox" value="2" /> <label for="radio_2" class="radio">Option 2</label>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="group navform wat-cf">
+                  <button class="button" type="submit">
+                    <img src="images/icons/tick.png" alt="Save" /> Save
+                  </button>
+                  <span class="text_button_padding">or</span>
+                  <a class="text_button_padding link_button" href="#header">Cancel</a>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+
+        <div class="block" id="block-lists">
+          <div class="secondary-navigation">
+            <ul class="wat-cf">
+              <li class="first"><a href="#block-text">Text</a></li>
+              <li><a href="#block-tables">Tables</a></li>
+              <li><a href="#block-forms">Forms</a></li>
+              <li><a href="#block-messages">Messages</a></li>
+              <li><a href="#block-forms-2">2 Columns Forms</a></li>
+              <li class="active"><a href="#block-lists">Lists</a></li>
+            </ul>
+          </div>
+          <div class="content">
+            <h2 class="title">Lists</h2>
+            <div class="inner">
+              <ul class="list">
+                <li>
+                  <div class="left">
+                    <a href="#"><img class="avatar" src="images/avatar.png" alt="avatar" /></a>
+                  </div>
+                  <div class="item">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                </li>
+                <li>
+                  <div class="left">
+                    <a href="#"><img class="avatar" src="images/avatar.png" alt="avatar" /></a>
+                  </div>
+                  <div class="item">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                </li>
+                <li>
+                  <div class="left">
+                    <a href="#"><img class="avatar" src="images/avatar.png" alt="avatar" /></a>
+                  </div>
+                  <div class="item">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div id="footer">
+          <div class="block">
+            <p>Copyright &copy; 2010 Your Site.</p>
+          </div>
+        </div>
+      </div>
+      <div id="sidebar">
+        <div class="block">
+          <h3>Simple Block</h3>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+          </div>
+        </div>
+        <div class="block">
+          <h3>Switch Theme</h3>
+          <ul class="navigation">
+            <li><a href="#" onclick="Theme.activate('default'); return false;">Default</a></li>
+            <li><a href="#" onclick="Theme.activate('red'); return false;">Red</a></li>
+            <li><a href="#" onclick="Theme.activate('amro'); return false;">Amro</a></li>
+            <li><a href="#" onclick="Theme.activate('bec'); return false;">Bec</a></li>
+            <li><a href="#" onclick="Theme.activate('bec-green'); return false;">Bec-Green</a></li>
+            <li><a href="#" onclick="Theme.activate('blue'); return false;">Blue</a></li>
+            <li><a href="#" onclick="Theme.activate('djime-cerulean'); return false;">Djime-Cerulean</a></li>
+            <li><a href="#" onclick="Theme.activate('drastic-dark'); return false;">Drastic Dark</a></li>
+            <li><a href="#" onclick="Theme.activate('kathleene'); return false;">Kathleene</a></li>
+            <li><a href="#" onclick="Theme.activate('olive'); return false;">Olive</a></li>
+            <li><a href="#" onclick="Theme.activate('orange'); return false;">Orange</a></li>
+            <li><a href="#" onclick="Theme.activate('reidb-greenish'); return false;">Greenish</a></li>
+            <li><a href="#" onclick="Theme.activate('warehouse'); return false;">Warehouse</a></li>
+          </ul>
+        </div>
+        <div class="block">
+          <h3>Sidebar</h3>
+          <ul class="navigation">
+            <li><a href="#block-text">Text</a></li>
+            <li><a href="#block-tables">Tables</a></li>
+            <li><a href="#block-forms">Forms</a></li>
+            <li><a href="#block-messages">Messages</a></li>
+            <li><a href="#block-forms-2">2 Columns Forms</a></li>
+            <li><a href="#block-lists">Lists</a></li>
+          </ul>
+        </div>
+        <div class="block notice">
+          <h4>Notice Title</h4>
+          <p>Morbi posuere urna vitae nunc. Curabitur ultrices, lorem ac aliquam blandit, lectus eros hendrerit eros, at eleifend libero ipsum hendrerit urna. Suspendisse viverra. Morbi ut magna. Praesent id ipsum. Sed feugiat ipsum ut felis. Fusce vitae nibh sed risus commodo pulvinar. Duis ut dolor. Cras ac erat pulvinar tortor porta sodales. Aenean tempor venenatis dolor.</p>
+        </div>
+        <div class="block">
+          <div class="sidebar-block">
+            <h4>Sidebar Inner block Title</h4>
+            <p>Morbi posuere urna vitae nunc. Curabitur ultrices, lorem ac <a href="#">aliquam blandit</a>, lectus eros hendrerit eros, at eleifend libero ipsum hendrerit urna. Suspendisse viverra. Morbi ut magna. Praesent id ipsum. Sed feugiat ipsum ut felis. Fusce vitae nibh sed risus commodo pulvinar. Duis ut dolor. Cras ac erat pulvinar tortor porta sodales. Aenean tempor venenatis dolor.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="box">
+      <h1>Web App Theme</h1>
+      <div class="block" id="block-login">
+        <h2>Login Box</h2>
+        <div class="content login">
+          <div class="flash">
+            <div class="message notice">
+              <p>Logged in successfully</p>
+            </div>
+          </div>
+          <form action="#" class="form login">
+            <div class="group wat-cf">
+              <div class="left">
+                <label class="label right">Login</label>
+              </div>
+              <div class="right">
+                <input type="text" class="text_field" />
+              </div>
+            </div>
+            <div class="group wat-cf">
+              <div class="left">
+                <label class="label right">Password</label>
+              </div>
+              <div class="right">
+                <input type="password" class="text_field" />
+              </div>
+            </div>
+            <div class="group navform wat-cf">
+              <div class="right">
+                <button class="button" type="submit">
+                  <img src="images/icons/key.png" alt="Save" /> Login
+                </button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <div class="block" id="block-signup">
+        <h2>Sign up</h2>
+        <div class="content">
+          <form action="#" class="form">
+            <div class="group wat-cf">
+              <div class="left">
+                <label class="label">Login</label>
+              </div>
+              <div class="right">
+                <input type="text" class="text_field" />
+                <span class="description">Ex: web-app-theme</span>
+              </div>
+            </div>
+            <div class="group wat-cf">
+              <div class="left">
+                <label class="label">Email</label>
+              </div>
+              <div class="right">
+                <input type="text" class="text_field" />
+                <span class="description">Ex: test@example.com</span>
+              </div>
+            </div>
+            <div class="group wat-cf">
+              <div class="left">
+                <label class="label">Password</label>
+              </div>
+              <div class="right">
+                <input type="password" class="text_field" />
+                <span class="description">Must contains the word 'yeah'</span>
+              </div>
+            </div>
+
+            <div class="group">
+              <label class="label">Text field</label>
+              <input type="text" class="text_field" />
+              <span class="description">Ex: a simple text</span>
+            </div>
+            <div class="group">
+              <label class="label">Text field</label>
+              <input type="text" class="text_field" />
+              <span class="description">Ex: a simple text</span>
+            </div>
+            <div class="group navform wat-cf">
+              <button class="button" type="submit">
+                <img src="images/icons/tick.png" alt="Save" /> Signup
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+

apps/web_theme/media/javascripts/jquery.localscroll.js

@@ -0,0 +1,104 @@
+/**
+ * jQuery.LocalScroll
+ * Copyright (c) 2007-2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
+ * Dual licensed under MIT and GPL.
+ * Date: 6/3/2008
+ *
+ * @projectDescription Animated scrolling navigation, using anchors.
+ * http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html
+ * @author Ariel Flesler
+ * @version 1.2.6
+ *
+ * @id jQuery.fn.localScroll
+ * @param {Object} settings Hash of settings, it is passed in to jQuery.ScrollTo, none is required.
+ * @return {jQuery} Returns the same jQuery object, for chaining.
+ *
+ * @example $('ul.links').localScroll();
+ *
+ * @example $('ul.links').localScroll({ filter:'.animated', duration:400, axis:'x' });
+ *
+ * @example $.localScroll({ target:'#pane', axis:'xy', queue:true, event:'mouseover' });
+ *
+ * Notes:
+ *	- The plugin requires jQuery.ScrollTo.
+ *	- The hash of settings, is passed to jQuery.ScrollTo, so the settings are valid for that plugin as well.
+ *	- jQuery.localScroll can be used if the desired links, are all over the document, it accepts the same settings.
+ *  - If the setting 'lazy' is set to true, then the binding will still work for later added anchors.
+ *  - The setting 'speed' is deprecated, use 'duration' instead.
+ *	- If onBefore returns false, the event is ignored.
+ **/
+;(function( $ ){
+	var URI = location.href.replace(/#.*/,'');//local url without hash
+
+	var $localScroll = $.localScroll = function( settings ){
+		$('body').localScroll( settings );
+	};
+
+	//Many of these defaults, belong to jQuery.ScrollTo, check it's demo for an example of each option.
+	//@see http://www.freewebs.com/flesler/jQuery.ScrollTo/
+	$localScroll.defaults = {//the defaults are public and can be overriden.
+		duration:1000, //how long to animate.
+		axis:'y',//which of top and left should be modified.
+		event:'click',//on which event to react.
+		stop:true//avoid queuing animations 
+		/*
+		lock:false,//ignore events if already animating
+		lazy:false,//if true, links can be added later, and will still work.
+		target:null, //what to scroll (selector or element). Keep it null if want to scroll the whole window.
+		filter:null, //filter some anchors out of the matched elements.
+		hash: false//if true, the hash of the selected link, will appear on the address bar.
+		*/
+	};
+
+	//if the URL contains a hash, it will scroll to the pointed element
+	$localScroll.hash = function( settings ){
+		settings = $.extend( {}, $localScroll.defaults, settings );
+		settings.hash = false;//can't be true
+		if( location.hash )
+			setTimeout(function(){ scroll( 0, location, settings ); }, 0 );//better wrapped with a setTimeout
+	};
+
+	$.fn.localScroll = function( settings ){
+		settings = $.extend( {}, $localScroll.defaults, settings );
+
+		return ( settings.persistent || settings.lazy ) 
+				? this.bind( settings.event, function( e ){//use event delegation, more links can be added later.
+					var a = $([e.target, e.target.parentNode]).filter(filter)[0];//if a valid link was clicked.
+					a && scroll( e, a, settings );//do scroll.
+				})
+				: this.find('a,area')//bind concretely, to each matching link
+						.filter( filter ).bind( settings.event, function(e){
+							scroll( e, this, settings );
+						}).end()
+					.end();
+
+		function filter(){//is this a link that points to an anchor and passes a possible filter ? href is checked to avoid a bug in FF.
+			return !!this.href && !!this.hash && this.href.replace(this.hash,'') == URI && (!settings.filter || $(this).is( settings.filter ));
+		};
+	};
+
+	function scroll( e, link, settings ){
+		var id = link.hash.slice(1),
+			elem = document.getElementById(id) || document.getElementsByName(id)[0];
+		if ( elem ){
+			e && e.preventDefault();
+			var $target = $( settings.target || $.scrollTo.window() );//if none specified, then the window.
+
+			if( settings.lock && $target.is(':animated') ||
+			settings.onBefore && settings.onBefore.call(link, e, elem, $target) === false ) return;
+
+			if( settings.stop )
+				$target.queue('fx',[]).stop();//remove all its animations
+			$target
+				.scrollTo( elem, settings )//do scroll
+				.trigger('notify.serialScroll',[elem]);//notify serialScroll about this change
+			if( settings.hash )
+				$target.queue(function(){
+					location = link.hash;
+					// make sure this function is released
+					$(this).dequeue();
+				});
+		}
+	};
+
+})( jQuery );

apps/web_theme/media/javascripts/jquery.scrollTo.js

@@ -0,0 +1,150 @@
+/**
+ * jQuery.ScrollTo
+ * Copyright (c) 2007-2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
+ * Dual licensed under MIT and GPL.
+ * Date: 2/19/2008
+ *
+ * @projectDescription Easy element scrolling using jQuery.
+ * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
+ * Tested with jQuery 1.2.1. On FF 2.0.0.11, IE 6, Opera 9.22 and Safari 3 beta. on Windows.
+ *
+ * @author Ariel Flesler
+ * @version 1.3.3
+ *
+ * @id jQuery.scrollTo
+ * @id jQuery.fn.scrollTo
+ * @param {String, Number, DOMElement, jQuery, Object} target Where to scroll the matched elements.
+ *	  The different options for target are:
+ *		- A number position (will be applied to all axes).
+ *		- A string position ('44', '100px', '+=90', etc ) will be applied to all axes
+ *		- A jQuery/DOM element ( logically, child of the element to scroll )
+ *		- A string selector, that will be relative to the element to scroll ( 'li:eq(2)', etc )
+ *		- A hash { top:x, left:y }, x and y can be any kind of number/string like above.
+ * @param {Number} duration The OVERALL length of the animation, this argument can be the settings object instead.
+ * @param {Object} settings Hash of settings, optional.
+ *	 @option {String} axis Which axis must be scrolled, use 'x', 'y', 'xy' or 'yx'.
+ *	 @option {Number} duration The OVERALL length of the animation.
+ *	 @option {String} easing The easing method for the animation.
+ *	 @option {Boolean} margin If true, the margin of the target element will be deducted from the final position.
+ *	 @option {Object, Number} offset Add/deduct from the end position. One number for both axes or { top:x, left:y }.
+ *	 @option {Object, Number} over Add/deduct the height/width multiplied by 'over', can be { top:x, left:y } when using both axes.
+ *	 @option {Boolean} queue If true, and both axis are given, the 2nd axis will only be animated after the first one ends.
+ *	 @option {Function} onAfter Function to be called after the scrolling ends. 
+ *	 @option {Function} onAfterFirst If queuing is activated, this function will be called after the first scrolling ends.
+ * @return {jQuery} Returns the same jQuery object, for chaining.
+ *
+ * @example $('div').scrollTo( 340 );
+ *
+ * @example $('div').scrollTo( '+=340px', { axis:'y' } );
+ *
+ * @example $('div').scrollTo( 'p.paragraph:eq(2)', 500, { easing:'swing', queue:true, axis:'xy' } );
+ *
+ * @example var second_child = document.getElementById('container').firstChild.nextSibling;
+ *			$('#container').scrollTo( second_child, { duration:500, axis:'x', onAfter:function(){
+ *				alert('scrolled!!');																   
+ *			}});
+ *
+ * @example $('div').scrollTo( { top: 300, left:'+=200' }, { offset:-20 } );
+ *
+ * Notes:
+ *  - jQuery.scrollTo will make the whole window scroll, it accepts the same arguments as jQuery.fn.scrollTo.
+ *	- If you are interested in animated anchor navigation, check http://jquery.com/plugins/project/LocalScroll.
+ *	- The options margin, offset and over are ignored, if the target is not a jQuery object or a DOM element.
+ *	- The option 'queue' won't be taken into account, if only 1 axis is given.
+ */
+;(function( $ ){
+
+	var $scrollTo = $.scrollTo = function( target, duration, settings ){
+		$scrollTo.window().scrollTo( target, duration, settings );
+	};
+
+	$scrollTo.defaults = {
+		axis:'y',
+		duration:1
+	};
+
+	//returns the element that needs to be animated to scroll the window
+	$scrollTo.window = function(){
+		return $( $.browser.safari ? 'body' : 'html' );
+	};
+
+	$.fn.scrollTo = function( target, duration, settings ){
+		if( typeof duration == 'object' ){
+			settings = duration;
+			duration = 0;
+		}
+		settings = $.extend( {}, $scrollTo.defaults, settings );
+		duration = duration || settings.speed || settings.duration;//speed is still recognized for backwards compatibility
+		settings.queue = settings.queue && settings.axis.length > 1;//make sure the settings are given right
+		if( settings.queue )
+			duration /= 2;//let's keep the overall speed, the same.
+		settings.offset = both( settings.offset );
+		settings.over = both( settings.over );
+
+		return this.each(function(){
+			var elem = this, $elem = $(elem),
+				t = target, toff, attr = {},
+				win = $elem.is('html,body');
+			switch( typeof t ){
+				case 'number'://will pass the regex
+				case 'string':
+					if( /^([+-]=)?\d+(px)?$/.test(t) ){
+						t = both( t );
+						break;//we are done
+					}
+					t = $(t,this);// relative selector, no break!
+				case 'object':
+					if( t.is || t.style )//DOM/jQuery
+						toff = (t = $(t)).offset();//get the real position of the target 
+			}
+			$.each( settings.axis.split(''), function( i, axis ){
+				var Pos	= axis == 'x' ? 'Left' : 'Top',
+					pos = Pos.toLowerCase(),
+					key = 'scroll' + Pos,
+					act = elem[key],
+					Dim = axis == 'x' ? 'Width' : 'Height',
+					dim = Dim.toLowerCase();
+
+				if( toff ){//jQuery/DOM
+					attr[key] = toff[pos] + ( win ? 0 : act - $elem.offset()[pos] );
+
+					if( settings.margin ){//if it's a dom element, reduce the margin
+						attr[key] -= parseInt(t.css('margin'+Pos)) || 0;
+						attr[key] -= parseInt(t.css('border'+Pos+'Width')) || 0;
+					}
+					
+					attr[key] += settings.offset[pos] || 0;//add/deduct the offset
+					
+					if( settings.over[pos] )//scroll to a fraction of its width/height
+						attr[key] += t[dim]() * settings.over[pos];
+				}else
+					attr[key] = t[pos];//remove the unnecesary 'px'
+
+				if( /^\d+$/.test(attr[key]) )//number or 'number'
+					attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max(Dim) );//check the limits
+
+				if( !i && settings.queue ){//queueing each axis is required					
+					if( act != attr[key] )//don't waste time animating, if there's no need.
+						animate( settings.onAfterFirst );//intermediate animation
+					delete attr[key];//don't animate this axis again in the next iteration.
+				}
+			});			
+			animate( settings.onAfter );			
+
+			function animate( callback ){
+				$elem.animate( attr, duration, settings.easing, callback && function(){
+					callback.call(this, target);
+				});
+			};
+			function max( Dim ){
+				var el = win ? $.browser.opera ? document.body : document.documentElement : elem;
+				return el['scroll'+Dim] - el['client'+Dim];
+			};
+		});
+	};
+
+	function both( val ){
+		return typeof val == 'object' ? val : { top:val, left:val };
+	};
+
+})( jQuery );

apps/web_theme/media/lib/generators/web_app_theme/theme/templates/layout_admin.html.erb

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title><%= options.app_name %></title>
+  <%%= stylesheet_link_tag "web-app-theme/base", "web-app-theme/themes/<%= options.theme %>/style", "web-app-theme/override", :cache => true %>
+  <%%= javascript_include_tag :defaults, :cache => true %>
+  <%%= csrf_meta_tag %>
+</head>
+<body>
+  <div id="container">
+    <div id="header">
+      <h1><a href="/"><%= options.app_name %></a></h1>
+      <div id="user-navigation">
+        <ul class="wat-cf">
+          <li><a href="#"><%%= t("web-app-theme.profile", :default => "Profile") %></a></li>
+          <li><a href="#"><%%= t("web-app-theme.settings", :default => "Settings") %></a></li>
+          <li><a href="/logout" class="logout"><%%= t("web-app-theme.logout", :default => "Logout") %></a></li>
+        </ul>
+      </div>
+      <div id="main-navigation">
+        <ul class="wat-cf"></ul>
+      </div>
+    </div>    
+    <div id="wrapper" class="wat-cf">
+      <div class="flash">
+        <%% flash.each do |type, message| -%>
+          <div class="message <%%= type %>">
+            <p><%%= message %></p>
+          </div>
+        <%% end -%>
+      </div>
+      <div id="main">
+        <%%= yield %>
+        <div id="footer">
+          <div class="block">
+            <p>Copyright &copy; <%%= Time.now.year %> <%= options.app_name %>.</p>
+          </div>      
+        </div>
+      </div>
+      <div id="sidebar">
+        <%%= yield :sidebar %>
+      </div>
+    </div>    
+  </div>
+</body>
+</html>

apps/web_theme/media/lib/generators/web_app_theme/theme/templates/layout_sign.html.erb

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title><%= options.app_name %></title>
+  <%%= stylesheet_link_tag "web-app-theme/base", "web-app-theme/themes/<%= options.theme %>/style", "web-app-theme/override", :cache => true %>
+  <%%= csrf_meta_tag %>
+</head>
+<body>
+  <div id="container">
+    <div id="box">
+      <%%= yield %>            
+    </div>
+  </div>
+</body>
+</html>

apps/web_theme/media/lib/generators/web_app_theme/theme/theme_generator.rb

@@ -0,0 +1,61 @@
+module WebAppTheme
+  class ThemeGenerator < Rails::Generators::Base
+    source_root File.expand_path('../templates', __FILE__)
+    
+    argument :layout_name, :type => :string, :default => 'application'
+    
+    class_option :theme,        :type => :string,   :default => :default,   :desc => 'Specify the layout theme'
+    class_option :app_name,     :type => :string,   :default => 'Web App',  :desc => 'Specify the application name'
+    class_option :engine,       :type => :string,   :default => 'erb',      :desc => 'Specify the template engine'
+    class_option :no_layout,    :type => :boolean,  :default => false,      :desc => 'Use this option if you want to generate only stylesheets'
+    class_option :layout_type,  :type => :string,   :default => 'admin',    :desc => 'Layout type, admin or sign'
+    
+    def copy_layout
+      return if options.no_layout      
+      admin_layout_name = options.layout_type == 'sign' ? "layout_sign.html.erb" : "layout_admin.html.erb"
+      case options.engine
+      when 'erb'
+        template  admin_layout_name, "app/views/layouts/#{layout_name.underscore}.html.erb"
+      when 'haml'
+        generate_haml_layout(admin_layout_name)        
+      end                  
+    end
+
+    def copy_base_stylesheets
+      copy_file "#{stylesheets_path}/base.css",     "public/stylesheets/web-app-theme/base.css"
+      copy_file "#{stylesheets_path}/override.css", "public/stylesheets/web-app-theme/override.css"
+    end
+    
+    def copy_theme_stylesheets
+      directory "#{stylesheets_path}/themes/#{options.theme}", "public/stylesheets/web-app-theme/themes/#{options.theme}"
+    end
+    
+    def copy_images
+      directory "#{images_path}", "public/images/web-app-theme"
+    end
+    
+  protected
+  
+    def stylesheets_path
+      "../../../../../stylesheets"
+    end
+    
+    def images_path
+      "../../../../../images"
+    end
+    
+    def generate_haml_layout(admin_layout_name)
+      require 'haml'
+      Dir.mktmpdir('web-app-theme-haml') do |haml_root|
+        tmp_html_path = "#{haml_root}/#{admin_layout_name}"
+        tmp_haml_path = "#{haml_root}/#{admin_layout_name}.haml"
+        template admin_layout_name, tmp_html_path, :verbose => false
+        `html2haml --erb --xhtml #{tmp_html_path} #{tmp_haml_path}`
+        copy_file tmp_haml_path, "app/views/layouts/#{layout_name.underscore}.html.haml"
+      end
+    rescue LoadError
+      say "HAML is not installed, or it is not specified in your Gemfile."
+      exit
+    end
+  end
+end

apps/web_theme/media/lib/generators/web_app_theme/themed/templates/view_edit.html.erb

@@ -0,0 +1,19 @@
+<div class="block">
+  <div class="secondary-navigation">
+    <ul class="wat-cf">
+      <li class="first"><%%= link_to "#{t("web-app-theme.list", :default => "List")}", <%= controller_routing_path %>_path  %></li>
+      <li><%%= link_to "#{t("web-app-theme.new", :default => "New")}", new_<%= singular_controller_routing_path %>_path %></li>
+      <li class="active"><%%= link_to "#{t("web-app-theme.edit", :default => "Edit")}", edit_<%= singular_controller_routing_path %>_path %></li>
+    </ul>
+  </div>          
+  <div class="content">            
+    <h2 class="title"><%%= t("web-app-theme.edit", :default => "Edit") %> <%= model_name %></h2>
+    <div class="inner">
+      <%%= form_for @<%= model_name.underscore  %>, :url => <%= singular_controller_routing_path %>_path(@<%= resource_name %>), :html => { :class => :form } do |f| -%>
+        <%%= render :partial => "form", :locals => {:f => f} %>
+      <%% end -%>
+    </div>
+  </div>
+</div>
+
+<%% content_for :sidebar, render(:partial => 'sidebar') -%>

apps/web_theme/media/lib/generators/web_app_theme/themed/templates/view_form.html.erb

@@ -0,0 +1,14 @@
+<% columns.each do |column| %>
+  <div class="group">
+    <%%= f.label :<%= column.name %>, t("activerecord.attributes.<%= model_name.underscore %>.<%= column.name %>", :default => "<%= column.name.humanize %>"), :class => :label %>
+    <%%= f.<%= column.field_type %> :<%= column.name %>, :class => '<%= column.field_type %>' %>
+    <span class="description">Ex: a simple text</span>
+  </div>
+<%- end -%>        
+<div class="group navform wat-cf">
+  <button class="button" type="submit">
+    <%%= image_tag("web-app-theme/icons/tick.png", :alt => "#{t("web-app-theme.save", :default => "Save")}") %> <%%= t("web-app-theme.save", :default => "Save") %>
+  </button>
+  <span class="text_button_padding"><%%= t("web-app-theme.or", :default => "or") %></span>
+	<%%= link_to t("web-app-theme.cancel", :default => "Cancel"), <%= controller_routing_path %>_path, :class => "text_button_padding link_button" %>
+</div>

apps/web_theme/media/lib/generators/web_app_theme/themed/templates/view_new.html.erb

@@ -0,0 +1,18 @@
+<div class="block">
+  <div class="secondary-navigation">
+    <ul class="wat-cf">
+      <li class="first"><%%= link_to "#{t("web-app-theme.list", :default => "List")}", <%= controller_routing_path %>_path  %></li>
+      <li class="active"><%%= link_to "#{t("web-app-theme.new", :default => "New")}", new_<%= singular_controller_routing_path %>_path %></li>
+    </ul>
+  </div>          
+  <div class="content">            
+    <h2 class="title"><%%= t("web-app-theme.new", :default => "New")%>  <%= model_name %></h2>
+    <div class="inner">
+      <%%= form_for :<%= model_name.underscore  %>, :url => <%= controller_routing_path %>_path, :html => { :class => :form } do |f| -%>
+        <%%= render :partial => "form", :locals => {:f => f} %>
+      <%% end -%>
+    </div>
+  </div>
+</div>
+
+<%% content_for :sidebar, render(:partial => 'sidebar') -%>

apps/web_theme/media/lib/generators/web_app_theme/themed/templates/view_show.html.erb

@@ -0,0 +1,25 @@
+<div class="block">
+  <div class="secondary-navigation">
+    <ul class="wat-cf">
+      <li class="first"><%%= link_to "#{t("web-app-theme.list", :default => "List")}", <%= controller_routing_path %>_path  %></li>
+      <li><%%= link_to "#{t("web-app-theme.new", :default => "New")}", new_<%= singular_controller_routing_path %>_path %></li>
+      <li class="active"><%%= link_to "#{t("web-app-theme.show", :default => "Show")}", <%= singular_controller_routing_path %>_path %></li>
+    </ul>
+  </div>          
+  <div class="content">
+    <div class="inner">
+      <% columns.each do |column| %>
+        <p>
+          <b><%%= t("activerecord.attributes.<%= singular_controller_routing_path %>.<%= column.name %>", :default => t("activerecord.labels.<%= column.name %>", :default => "<%= column.name.humanize %>")) %>:</b>
+          <%%= @<%= resource_name %>.<%= column.name %> %>
+        </p>
+      <%- end -%>
+      <div class="wat-cf">
+        <%%= link_to image_tag("web-app-theme/icons/application_edit.png", :alt => "#{t("web-app-theme.edit", :default=> "Edit")}") + " " + t("web-app-theme.edit", :default=> "Edit"), edit_<%= singular_controller_routing_path %>_path(@<%= resource_name %>), :class => "button" %> 
+        <%%= link_to image_tag("web-app-theme/icons/cross.png", :alt => "#{t("web-app-theme.delete", :default=> "Delete")}") + " " + t("web-app-theme.delete", :default => "Delete"), <%= singular_controller_routing_path %>_path(@<%= resource_name %>), :method => "delete", :class => "button", :confirm => "#{t("web-app-theme.confirm", :default => "Are you sure?")}" %>
+      </div>      
+    </div>
+  </div>
+</div>
+
+<%% content_for :sidebar, render(:partial => 'sidebar') -%>

apps/web_theme/media/lib/generators/web_app_theme/themed/templates/view_sidebar.html.erb

@@ -0,0 +1,13 @@
+<div class="block notice">
+  <h3>Simple Block</h3>
+  <div class="content">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  </div>
+</div>
+<div class="block">
+  <h3>Links</h3>
+  <ul class="navigation">
+    <li><a href="#">Link 1</a></li>
+    <li><a href="#">Link 2</a></li>
+  </ul>
+</div>

apps/web_theme/media/lib/generators/web_app_theme/themed/templates/view_signin.html.erb

@@ -0,0 +1,36 @@
+<h1><%= options[:app_name] %></h1>
+<div class="block" id="block-login">
+  <h2>Login Box</h2>        
+  <div class="content login">
+    <div class="flash">
+      <%% flash.each do |type, message| -%>
+      <div class="message <%%= type %>">
+        <p><%%=  message %></p>
+      </div>
+      <%% end -%>
+    </div>
+    <%% form_tag({:action => :create}, :class => 'form login') do -%>
+      <div class="group wat-cf">
+        <div class="left">
+          <label class="label right">Login</label>
+        </div>
+        <div class="right">
+          <%%= text_field_tag :login, @login, :class => 'text_field' %>
+        </div>              
+      </div>
+      <div class="group wat-cf">
+        <div class="left">
+          <label class="label right">Password</label>
+        </div>
+        <div class="right">
+          <%%= password_field_tag :password, nil, :class => 'text_field' %>
+        </div>              
+      </div>
+      <div class="group navform wat-cf">
+        <div class="right">
+          <input type="submit" class="button" value="Sign in" />
+        </div>
+      </div>            
+    <%% end -%>
+  </div>
+</div>

apps/web_theme/media/lib/generators/web_app_theme/themed/templates/view_signup.html.erb

@@ -0,0 +1,52 @@
+<h1><%= options[:app_name] %></h1>
+<div class="block" id="block-signup">
+  <h2>Sign up</h2>        
+  <div class="content">
+    <div class="flash">
+      <%% flash.each do |type, message| -%>
+      <div class="message <%%= type %>">
+        <p><%%=  message %></p>
+      </div>
+      <%% end -%>
+    </div>
+    <%% form_for :<%= resource_name %>, :url => <%= controller_routing_path %>_path, :html => { :class => 'form' } do |f| -%>
+      <div class="group wat-cf">
+        <div class="left">
+          <label class="label">Login</label>
+        </div>
+        <div class="right">
+          <%%= f.text_field :login, :class => 'text_field' %>
+        </div>              
+      </div>
+      <div class="group wat-cf">
+        <div class="left">
+          <label class="label">Email</label>                
+        </div>
+        <div class="right">
+          <%%= f.text_field :email, :class => 'text_field' %>
+        </div>              
+      </div>
+      <div class="group wat-cf">
+        <div class="left">
+          <label class="label">Password</label>
+        </div>
+        <div class="right">
+          <%%= f.password_field :password, :class => 'text_field' %>
+        </div>              
+      </div>
+      
+      <div class="group">
+        <div class="left wat-cf">
+          <label class="label">Password</label>
+        </div>
+        <div class="right">
+          <%%= f.password_field :password_confirmation, :class => 'text_field' %>
+        </div>              
+      </div>
+      
+      <div class="group navform">
+        <input type="submit" class="button" value="Sign up" />
+      </div>
+    <%% end -%>
+  </div>
+</div>

apps/web_theme/media/lib/generators/web_app_theme/themed/templates/view_tables.html.erb

@@ -0,0 +1,54 @@
+<div class="block">
+  <div class="secondary-navigation">
+    <ul class="wat-cf">
+      <li class="first active"><%%= link_to "#{t("web-app-theme.list", :default => "List")}", <%= controller_routing_path %>_path  %></li>
+      <li><%%= link_to "#{t("web-app-theme.new", :default => "New")}", new_<%= singular_controller_routing_path %>_path %></li>
+    </ul>
+  </div>          
+  <div class="content">          
+    <h2 class="title"><%%= t("web-app-theme.all", :default => "All")  %> <%= plural_model_name %></h2>
+    <div class="inner">
+      <table class="table">
+        <tr>             
+          <th class="first">ID</th>
+          <% unless columns.empty? -%>
+          <th>
+            <%%= t("activerecord.attributes.<%= singular_controller_routing_path %>.<%= columns.first.name %>", :default => t("activerecord.labels.<%= columns.first.name %>", :default => "<%= columns.first.name.capitalize %>")) %>
+          </th>
+          <% end -%>
+          <th><%%= t("web-app-theme.created_at", :default => "Created at")  %></th>
+          <th class="last">&nbsp;</th>
+        </tr>
+        <%% @<%= plural_resource_name %>.each do |<%= resource_name %>| -%>
+        <tr class="<%%= cycle("odd", "even") %>">
+          <td>
+            <%%= <%= resource_name %>.id %>
+          </td>
+          <% unless columns.empty? -%>
+          <td>
+            <%%= link_to <%= resource_name %>.<%= columns.first.name %>, <%= singular_controller_routing_path %>_path(<%= resource_name %>) %>
+          </td>
+          <% end -%>
+          <td>
+            <%%= <%= resource_name %>.created_at %>
+          </td>
+          <td class="last">
+            <%%= link_to "#{t("web-app-theme.show", :default => "Show")}", <%= singular_controller_routing_path %>_path(<%= resource_name %>) %> |
+            <%%= link_to "#{t("web-app-theme.edit", :default => "Edit")}", edit_<%= singular_controller_routing_path %>_path(<%= resource_name %>) %> |
+            <%%= link_to "#{t("web-app-theme.delete", :default => "Delete")}", <%= singular_controller_routing_path %>_path(<%= resource_name %>), :method => :delete, :confirm => "#{t("web-app-theme.confirm", :default => "Are you sure?")}" %>
+          </td>
+        </tr>          
+        <%% end -%>
+      </table>
+      <div class="actions-bar wat-cf">
+        <div class="actions">
+        </div>
+        <% if options.will_paginate %>
+        <%%= will_paginate @<%= plural_resource_name %>  %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<%% content_for :sidebar, render(:partial => 'sidebar') -%>

apps/web_theme/media/lib/generators/web_app_theme/themed/templates/view_text.html.erb

@@ -0,0 +1,18 @@
+<div class="block" id="block-text">  
+  <div class="content">
+    <h2 class="title"><%= resource_name.capitalize %></h2>
+    <div class="inner">
+      <p class="first">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="hightlight">Excepteur sint occaecat cupidatat non proident</span>, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+      <p> <span class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</span></p>
+      <p> <span class="gray">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</span></p>
+      <hr />
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="hightlight">Excepteur sint occaecat cupidatat non proident</span>, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </div>
+  </div>
+</div>
+
+<%% content_for :sidebar, render(:partial => 'sidebar') -%>

apps/web_theme/media/lib/generators/web_app_theme/themed/themed_generator.rb

@@ -0,0 +1,137 @@
+require 'rails/generators/generated_attribute'
+
+module WebAppTheme
+  class ThemedGenerator < Rails::Generators::Base
+    source_root File.expand_path('../templates', __FILE__)
+        
+    argument :controller_path,  :type => :string
+    argument :model_name,       :type => :string, :required => false    
+    
+    class_option :layout,         :type => :string,   :desc => 'Specify the layout name'
+    class_option :engine,         :type => :string,   :default => 'erb', :desc => 'Specify the template engine'
+    class_option :will_paginate,  :type => :boolean,  :default => false, :desc => 'Specify if you use will_paginate'
+    class_option :themed_type,    :type => :string,   :default => 'crud', :desc => 'Specify the themed type, crud or text. Default is crud'
+    
+    def initialize(args, *options)
+      super(args, *options)
+      initialize_views_variables
+    end
+    
+    def copy_views
+      generate_views      
+      unless options.layout.blank?
+        if options.engine =~ /erb/
+          gsub_file(File.join('app/views/layouts', "#{options[:layout]}.html.#{options.engine}"), /\<div\s+id=\"main-navigation\">.*\<\/ul\>/mi) do |match|
+            match.gsub!(/\<\/ul\>/, "")
+            %|#{match} <li class="<%= controller.controller_path == '#{@controller_file_path}' ? 'active' : '' %>"><a href="<%= #{controller_routing_path}_path %>">#{plural_model_name}</a></li></ul>|
+          end
+        elsif options.engine =~ /haml/
+          gsub_file(File.join('app/views/layouts', "#{options[:layout]}.html.#{options.engine}"), /#main-navigation.*#wrapper.wat-cf/mi) do |match|
+            match.gsub!(/      #wrapper.wat-cf/, "")
+            %|#{match}| +
+            "  "*6 + %|%li{:class => controller.controller_path == '#{@controller_file_path}' ? 'active' : '' }\n| +
+            "  "*7 + %|%a{:href => #{controller_routing_path}_path} #{plural_model_name}\n| +
+            "  "*3 + %|#wrapper.wat-cf|
+          end
+        end
+      end
+    end
+
+  protected
+    
+    def initialize_views_variables
+      @base_name, @controller_class_path, @controller_file_path, @controller_class_nesting, @controller_class_nesting_depth = extract_modules(controller_path)
+      @controller_routing_path = @controller_file_path.gsub(/\//, '_')
+      @model_name = @base_name.singularize unless @model_name
+      @model_name = @model_name.camelize
+    end
+    
+    def controller_routing_path
+      @controller_routing_path
+    end
+    
+    def singular_controller_routing_path
+      @controller_routing_path.singularize
+    end
+    
+    def model_name
+      @model_name
+    end
+    
+    def plural_model_name
+      @model_name.pluralize
+    end
+    
+    def resource_name
+      @model_name.underscore
+    end
+    
+    def plural_resource_name
+      resource_name.pluralize
+    end
+    
+    ## 
+    # Attempts to call #columns on the model's class
+    # If the (Active Record) #columns method does not exist, it attempts to
+    # perform the (Mongoid) #fields method instead
+    def columns
+      begin
+        excluded_column_names = %w[id created_at updated_at]
+        Kernel.const_get(@model_name).columns.reject{|c| excluded_column_names.include?(c.name) }.collect{|c| Rails::Generators::GeneratedAttribute.new(c.name, c.type)} 
+      rescue NoMethodError
+        Kernel.const_get(@model_name).fields.collect{|c| c[1]}.reject{|c| excluded_column_names.include?(c.name) }.collect{|c| Rails::Generators::GeneratedAttribute.new(c.name, c.type.to_s)}
+      end
+    end
+    
+    def extract_modules(name)
+      modules = name.include?('/') ? name.split('/') : name.split('::')
+      name    = modules.pop
+      path    = modules.map { |m| m.underscore }
+      file_path = (path + [name.underscore]).join('/')
+      nesting = modules.map { |m| m.camelize }.join('::')
+      [name, path, file_path, nesting, modules.size]
+    end
+    
+    def generate_views
+      views = {
+        'crud' => {
+          'view_tables.html.erb'  => File.join('app/views', @controller_file_path, "index.html.#{options.engine}"),
+          'view_new.html.erb'     => File.join('app/views', @controller_file_path, "new.html.#{options.engine}"),
+          'view_edit.html.erb'    => File.join('app/views', @controller_file_path, "edit.html.#{options.engine}"),
+          'view_form.html.erb'    => File.join('app/views', @controller_file_path, "_form.html.#{options.engine}"),
+          'view_show.html.erb'    => File.join('app/views', @controller_file_path, "show.html.#{options.engine}"),
+          'view_sidebar.html.erb' => File.join('app/views', @controller_file_path, "_sidebar.html.#{options.engine}")
+        },
+        'text' => {
+          'view_text.html.erb'    => File.join('app/views', @controller_file_path, "show.html.#{options.engine}"),
+          'view_sidebar.html.erb' => File.join('app/views', @controller_file_path, "_sidebar.html.#{options.engine}")
+        }
+      }
+      selected_views = views[options.themed_type]
+      options.engine == 'haml' ? generate_haml_views(selected_views) : generate_erb_views(selected_views)
+    end
+    
+    def generate_erb_views(views)
+      views.each do |template_name, output_path|
+        template template_name, output_path
+      end
+    end
+    
+    def generate_haml_views(views)
+      require 'haml'
+      Dir.mktmpdir('web-app-theme-haml') do |haml_root|
+        views.each do |template_name, output_path|
+          tmp_html_path = "#{haml_root}/#{template_name}"
+          tmp_haml_path = "#{haml_root}/#{template_name}.haml"
+          template template_name, tmp_html_path, :verbose => false
+          `html2haml --erb --xhtml #{tmp_html_path} #{tmp_haml_path}`
+          copy_file tmp_haml_path, output_path
+        end
+      end
+      
+    rescue LoadError
+      say "HAML is not installed, or it is not specified in your Gemfile."
+      exit
+    end
+  end
+end

apps/web_theme/media/lib/web_app_theme.rb

@@ -0,0 +1,2 @@
+module WebAppTheme
+end

apps/web_theme/media/stylesheets/base.css

@@ -0,0 +1,410 @@
+* {margin:0;padding:0}
+.clear { clear: both; height: 0; }
+
+.wat-cf:after {
+     content: "."; 
+     display: block; 
+     height: 0; 
+     clear: both; 
+     visibility: hidden;
+}
+
+.wat-cf {display: inline-block;}
+
+/* Hides from IE-mac \*/
+* html .wat-cf {height: 1%;}
+.wat-cf {display: block;}
+/* End hide from IE-mac */
+
+h1 { margin: 15px 0; font-size: 22px; font-weight: normal; }
+h2 { font-size: 22px; margin: 15px 0; font-weight: normal;}
+h3 { font-size: 18px; margin: 10px 0; font-weight: normal;}
+h4 { font-size: 16px; margin: 10px 0; font-weight: normal;}
+hr {height: 1px; border: 0; }
+p { margin: 15px 0;}
+a img { border: none; }
+
+body {
+  font-size: 12px;
+  font-family: sans-serif;  
+}
+
+#container {
+  min-width: 960px;
+}
+
+#header, #wrapper {
+  padding: 0 20px;
+}
+
+#header {
+  position: relative;
+  padding-top: 1px;  
+}
+
+#header h1 {
+  margin: 0;
+  padding: 10px 0;  
+  font-size: 26px;
+}
+
+#header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
+  text-decoration: none;
+}
+
+#main {  
+  width: 70%;
+  float: left;    
+}
+
+.actions-bar {
+  padding: 10px 1px;
+}
+
+.actions-bar .actions {
+  float: left;
+}
+
+
+.actions-bar .pagination {
+  float: right;
+  padding: 1px 0;
+}
+
+#sidebar {
+  width: 25%;
+  float: right;      
+}
+
+#sidebar h3 {  
+  padding: 10px 15px;
+  margin: 0;
+  font-size: 13px;
+}
+
+#sidebar .block {
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+}
+
+#sidebar .block .content {
+  padding: 0 15px;
+}
+
+#sidebar ul.navigation li a:link, #sidebar ul.navigation li a:visited {
+  display: block;
+  padding: 10px 15px;
+}
+
+#sidebar .block .sidebar-block, #sidebar .notice {
+  padding:10px;
+}
+
+#wrapper {
+  padding-top: 20px;
+}
+
+#main .block {
+  margin-bottom: 20px;
+  padding-top: 1px;
+}
+
+#main .block .content .inner {
+  padding: 0 15px 15px;  
+}
+
+#main .main p.first {
+  margin-top: 0;
+}
+
+#user-navigation {
+  position: absolute;
+  top: 0px;
+  right: 20px;  
+}
+
+#main-navigation {
+  width: 100%;
+}
+
+#user-navigation ul, #main-navigation ul, .secondary-navigation ul, #sidebar ul.navigation {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+#user-navigation ul li, #main-navigation ul li, .secondary-navigation ul li {
+  float: left;  
+}
+
+#main-navigation ul li {
+  margin-right: 5px;
+}
+
+#user-navigation ul li {
+  padding: 5px 10px;
+}
+
+#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
+.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
+#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
+  text-decoration: none;
+}
+
+#main-navigation ul li a {
+  font-size: 14px;
+  line-height: 14px;
+  display: block;
+  padding: 8px 15px;
+}
+
+.secondary-navigation {
+  font-size: 13px;  
+  border-bottom-width: 10px;
+  border-bottom-style: solid;
+}
+
+.secondary-navigation ul li a {
+  display: block;
+  padding: 10px 15px;  
+}
+
+#footer {
+  padding-bottom: 20px;
+}
+
+/* pagination */
+
+.pagination a, .pagination span, .pagination em {
+  padding: 2px 5px;
+  margin-right: 5px; 
+  display: block;
+  float: left;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.pagination em {
+  font-weight: bold;  
+}
+
+.pagination a {
+  text-decoration: none;  
+}
+
+/* tables */
+.table {
+  width: 100%;
+  border-collapse: collapse;  
+  margin-bottom: 15px;
+}
+
+.table th {
+  padding: 10px;
+  font-weight: bold;
+  text-align: left;
+}
+
+.table th.first {
+  width: 30px;
+}
+
+.table th.last {
+  width: 200px;  
+}
+
+.table .checkbox {
+  margin-left: 10px;
+}
+
+.table td {
+  padding: 10px;
+}
+
+.table td.last {
+  text-align: right;
+}
+
+/* forms */
+
+input.checkbox {
+  margin: 0;
+  padding: 0;
+}
+
+.form .group {
+  margin-bottom: 15px;
+}
+
+.form div.left {
+  width: 20%;
+  float: left;
+}
+
+.form div.right {
+  width: 75%;
+  float: right;
+}
+
+.form .columns .column {
+  width: 48%;
+}
+
+.form .columns .left {
+  float: left;
+}
+
+.form .columns .right {
+  float: right;
+}
+
+.form label.label, .form input.text_field, .form textarea.text_area {
+  font-size: 1.2em;
+  padding: 1px 0;
+  margin: 0;
+}
+
+.form label.right {
+  text-align: right;
+}
+
+.form input.checkbox, .form input.radio {
+  margin-right: 5px;
+}
+
+.form label.checkbox, .form label.radio {
+  line-height: 1.5em;
+}
+
+.form label.label {
+  display: block;
+  padding-bottom: 2px;  
+  font-weight: bold;
+}
+
+.form div.fieldWithErrors label.label {
+  display: inline;
+}
+
+.form .fieldWithErrors .error {
+  color: red;
+}
+
+.form input.text_field, .form textarea.text_area {
+  width: 100%;
+  border-width: 1px;
+  border-style: solid;
+}
+
+/* lists */
+
+ul.list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+ul.list li {
+  clear: left;
+  padding-bottom: 5px;
+}
+
+ul.list li .left {
+  float: left;  
+}
+
+ul.list li .left .avatar {
+  width: 50px;
+  height: 50px;
+}
+
+ul.list li .item {
+  margin-left: 80px;
+}
+
+ul.list li .item .avatar {
+  float: left;
+  margin: 0 5px 5px 0;
+  width: 30px;
+  height: 30px;
+}
+
+/* box */
+
+#box {
+  width: 500px;
+  margin: 50px auto;  
+}
+
+#box .block {
+  margin-bottom: 20px;
+}
+
+#box .block h2 {
+  padding: 10px 15px;
+  margin: 0;  
+}
+
+#box .block .content {
+  padding: 10px 20px;
+}
+
+/*  Inspired by http://particletree.com/features/rediscovering-the-button-element */
+
+a.button:link, a.button:visited, a.button:hover, a.button:active, button.button {
+  color: #222;
+  display:block;
+  float:left;
+  margin:0 7px 0 0;
+  background-color: #eee;
+  border:1px solid #bfbfbf;
+  font-size: 1em;
+  line-height: 1.3em;
+  font-weight:bold;
+  cursor:pointer;
+  padding:5px 10px 6px 7px;
+  text-decoration: none;
+}
+
+button.button {
+  width:auto;
+  overflow:visible;
+  padding:4px 10px 3px 7px; /* IE6 */
+}
+button.button[type] {
+  padding:5px 10px 5px 7px; /* Firefox */
+  line-height:17px; /* Safari */
+}
+
+*:first-child+html button.button[type] {
+  padding:4px 10px 3px 7px; /* IE7 */
+}
+
+button.button img, a.button img {
+  margin:0 3px -3px 0 !important;
+  padding:0;
+  border:none;
+  width:16px;
+  height:16px;
+}
+
+button.button:hover, a.button:hover {
+  background-color:#dedede;
+}
+
+button.button:active, a.button:active {
+  background-color:#e5e5e5;
+}
+.text_button_padding{
+  color: #222222;
+  display: block;
+  float: left;
+  font-size: 1em;
+  line-height: 2em;
+  margin: 0 7px 0 0;
+  padding: 5px 0 6px 7px;
+  text-decoration: none;
+}
+.link_button{
+  cursor: pointer;
+}

apps/web_theme/media/stylesheets/override.css

@@ -0,0 +1 @@
+/* Override here any style defined by web-app-theme */

apps/web_theme/media/stylesheets/themes/amro/style.css

@@ -0,0 +1,357 @@
+/*
+
+    Amro
+    by Sandro Duarte
+       sandro[at]gmail.com
+
+    dark green        #008080
+    light yellow      #F6F5CD
+    orange            #E8C53B
+    light green       #76BBA5
+    light             #F3F4EC
+
+*/
+
+.small {
+  font-size: 11px;
+  font-style: normal;
+  font-weight: normal;
+  text-transform: normal;
+  letter-spacing: normal;
+  line-height: 1.4em;
+}
+
+.gray {
+  color:#999999;
+  font-family: Georgia, serif;
+  font-size: 13px;
+  font-style: italic;
+  font-weight: normal;
+  text-transform: normal;
+  letter-spacing: normal;
+  line-height: 1.6em;
+}
+
+.hightlight {
+  background-color: #ffff88;
+  font-weight: bold;
+  color: #36393d;
+}
+
+a:link, a:visited, a:hover, a:active, h1, h2, h3 { color: #008080; }
+a { -moz-outline: none; }
+
+body {
+  color: #222;
+  background: #F6F5CD;
+	font-family: helvetica,Arial,sans-serif;
+}
+
+hr {
+  background: #f0f0ee; 
+  color: #f0f0ee;
+}
+
+p {
+	margin: 10px 0;
+
+}
+
+#header {
+  background: #008080;
+}
+
+#header h1 {
+  padding: 15px 0;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: bold;
+  text-transform: normal;
+  letter-spacing: -1px;
+  line-height: 1.2em;
+}
+
+#header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
+  color: #FFF;
+}
+
+#user-navigation {
+  top: auto;
+  bottom: 5px;
+  right: 25px;
+}
+
+#main .block .content {
+  background: #FFF;
+  padding-top: 1px;
+}
+
+#main .block .content h2 {
+  margin-left: 15px;
+}
+
+#main .block .content p {
+	font-size:13px;
+	line-height:1.45em;
+}
+
+#main .block .content h2 {
+	font-size:22px;
+	font-style:normal;
+	font-weight:bold;
+	letter-spacing:-1px;
+	line-height:1.2em;
+	margin-left:15px;
+}
+
+#sidebar .block {
+  background: #FFF;
+}
+
+#sidebar .notice {
+	background: #76BBA5;
+	color: #fff;
+}
+
+#sidebar h3 {  
+  background: #008080;
+  color: #FFF;
+  border-bottom: 6px solid #E8C53B;
+}
+
+#main-navigation ul li {
+  padding-left: 15px;
+}
+
+#main-navigation ul li a {
+  padding: 8px 0;
+}
+
+#main-navigation ul li.active {
+  padding: 0;
+  margin-left: 15px;
+}
+
+#main-navigation ul li.active {
+  margin-left: 15px;
+}
+
+#main-navigation ul li.active a {
+  padding: 8px 15px;
+}
+
+#sidebar ul li a:link, #sidebar ul li a:visited {
+  background: #FFF;
+  border-bottom: 1px solid #F0F0EE;
+  text-decoration: none;
+}
+
+#sidebar ul li a:hover, #sidebar ul li a:active {
+  background: #76BBA5;
+  color: #FFF;
+}
+
+#main-navigation {
+  background: #E8C53B;
+}
+
+#main-navigation ul li {
+  background: #E8C53B;
+  margin-right: 0;
+}
+
+#main-navigation ul li.active {
+  background: #F6F5CD;
+}
+
+#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
+#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
+  text-decoration: none;
+  color: #fff;
+}
+
+
+.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active {
+  text-decoration: none;
+  color: #FFF;
+}
+
+#user-navigation a.logout {
+  background: #cc0000;
+  padding: 2px 6px;
+  -moz-border-radius: 4px;
+	-webkit-border-radius: 3px;
+}
+
+.secondary-navigation li a:hover {
+  background: #76BBA5;
+}
+
+#main-navigation ul li.active a:link, #main-navigation ul li.active a:visited, #main-navigation ul li.active a:hover, #main-navigation ul li.active a:active {
+  color: #008080;
+}
+
+.secondary-navigation {
+  background: #008080;
+	border-bottom: 6px solid #E8C53B;
+}
+
+.secondary-navigation ul li.active, .secondary-navigation ul li.active a {
+  background-color: #E8C53B;
+}
+
+.secondary-navigation ul li a {
+	padding:8px 12px;
+}
+
+#footer .block {  
+  color: #FFF;
+  background: #E8C53B;
+}
+
+#footer .block p {      
+  margin: 0;  
+  padding: 10px;
+}
+
+/* pagination */
+
+.pagination span.disabled {
+  color: #bbb;
+  border-color: #bbb;
+}
+
+.pagination em {
+  background: #008080;
+  color: #FFF;
+  border-color: #008080;
+}
+
+.pagination a, .pagination span {
+  color: #008080;
+  border-color: #008080;
+}
+
+.pagination a:hover {
+    color: #FFF;
+    background: #008080;
+}
+
+/* tables */
+
+.table th {
+  background: #008080;
+  color: #FFF;
+}
+
+.table td {
+  border-bottom:1px solid #F0F0EE;
+}
+
+.table tr.even {
+	background: #EFF3E4;
+}
+/* forms */
+
+.form input.text_field, .form textarea.text_area {
+  width: 100%;
+	border:1px solid #CFCFCF;
+}
+
+.form input.button {
+  background: #EEE;
+  color: #262626;
+  padding: 2px 5px;
+  border: 1px solid #262626;
+  cursor: pointer;
+}
+
+.form .description {
+  font-style: italic;
+  color: #8C8C8C;
+  font-size: .9em;
+}
+
+/* flash-messages */
+.flash .message {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  text-align:center;
+  margin: 0 auto 15px;
+
+}
+
+.flash .message p {
+  margin:8px;
+}
+.flash .error {
+  border: 1px solid #fbb;
+  background-color: #fdd;
+}
+.flash .warning {
+  border: 1px solid #fffaaa;
+  background-color: #ffffcc;
+}
+.flash .notice {
+  border: 1px solid #1FDF00;
+  background-color: #BBFFB6;
+}
+
+/* lists */
+
+ul.list li {
+  border-bottom-color: #F0F0EE;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
+ul.list li .item .avatar {
+  border-color: #F0F0EE;
+  border-width: 1px;
+  border-style: solid;
+  padding: 2px; 
+}
+
+/* box */
+
+#box .block {
+  background: #FFF;  
+}
+
+#box .block h2 {
+  background: #008080;
+  color: #FFF;
+}
+
+
+/* rounded borders */
+
+#main, #main-navigation, #main-navigation li, .secondary-navigation, #main .block, #sidebar .block, #sidebar h3, ul.list li, 
+#footer .block, .form input.button, #box .block, #box .block h2 {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation li.first a, .secondary-navigation ul li.first, .table th.first, .table th.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+.table th.last {
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation ul li.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+#sidebar, #sidebar .block, #main .block, #sidebar ul.navigation, ul.list li, #footer .block, .form input.button, #box .block {
+  -moz-border-radius-bottomleft: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+}

apps/web_theme/media/stylesheets/themes/bec-green/style.css

@@ -0,0 +1,290 @@
+a:link, a:visited, a:hover, a:active { color: #33f; }
+h1, h2, h3 {color:#444}
+
+body {
+  color: #222;
+  background: #e5e5e5;
+  font-family: "Bitstream Vera Sans", verdana, sans-serif;  
+}
+
+hr {
+  background: #f0f0ee; 
+}
+
+p {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+input.checkbox {
+  vertical-align:middle;
+}
+
+#header h1 {
+  font-size: 28px;
+  padding: 5px 0;
+  margin: 5px 0;
+}
+
+.hightlight {
+  background-color: #ffc;
+}
+.small {
+  font-size: 11px;
+}
+.gray {
+  color: #999;
+}
+#header {
+  background: #48625B;
+}
+
+#header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
+  color: #FFF;
+}
+
+#main {
+  background: #e5e5e5;
+  width: 69%;
+}
+
+#main .block {
+  -moz-border-radius-topleft: 4px;
+  -moz-border-radius-topright: 4px;
+  padding: 0;
+  margin-bottom:20px;
+  padding-bottom: 20px;
+  background: #fff;
+}
+
+#main .block h2.title {
+  margin: 0 0 20px 0;
+  background-color: #E9FAE6;
+  padding: 5px 5px 5px 15px;
+  font-size:18px;
+}
+
+.main_container {
+  padding:10px;
+}
+
+/* #sidebar .block { background: #FFF; padding-bottom:0px; } */
+
+#sidebar .notice {
+  background-color: #ffc;
+  padding: 0 10px;
+  border-bottom:1px solid #ddd;
+  border-right:1px solid #ddd;
+  border-top:1px solid #fff;
+  border-left:1px solid #fff;
+}
+#sidebar .notice h2 {
+  font-size:16px;
+  margin: 5px 0;
+  border-bottom:1px solid #aaa;
+}
+#sidebar .notice p {
+  font-size:12px;
+}
+
+#sidebar .block {
+  padding-bottom: 0;
+}
+
+#sidebar .block .content {
+  padding: 0 10px;
+}
+
+
+#sidebar h3 {  
+  background: #c7d8d8;
+  border-bottom:1px solid #999;
+  padding: 5px 10px;
+}
+
+#sidebar ul li a:link, #sidebar ul li a:visited {
+  font-size:14px;
+}
+
+#sidebar ul li a:hover, #sidebar ul li a:active {
+  background: #E9FAE6;
+  color: #444;
+  font-size:14px;
+  text-decoration:underline;
+}
+#sidebar ul.navigation li.last a {
+  border-bottom: none;
+}
+
+#sidebar ul.navigation li a:link,#sidebar ul.navigation li a:visited {
+  padding: 5px 10px;
+  color:#444;
+  text-decoration: none;
+}
+#sidebar ul.navigation li a:hover {
+  text-decoration:underline;
+}
+#sidebar .block .sidebar-block h4 {
+  border-bottom: 1px solid #bbb;
+}
+#main-navigation ul li {
+  background: #30423E;
+}
+
+#main-navigation ul li:hover {
+  background: #23302D;
+}
+
+#main-navigation ul li.active {
+  background: #e5e5e5;
+}
+
+#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
+.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
+#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
+  text-decoration: none;
+  color: #FFF;
+}
+
+#main-navigation ul li a {
+  font-size: 14px;
+  padding: 4px 10px;
+}
+
+#main-navigation ul li.active a:link, #main-navigation ul li.active a:visited, #main-navigation ul li.active a:hover, #main-navigation ul li.active a:active {
+  color: #333;
+}
+#user-navigation ul li a:hover {
+  text-decoration: underline;
+}
+.secondary-navigation {
+  background: #48625B;
+  border-bottom-color: #30423e;
+  border-bottom: 5px solid #30423e;
+}
+
+.secondary-navigation ul li.active {
+  background-color: #30423e;
+}
+
+.secondary-navigation ul li:hover {
+  background-color: #23302d;
+}
+
+/* pagination */
+
+.pagination em {
+  background: #30423e;
+  color: #FFF;
+  border: 1px solid #30423e;
+  -moz-border-radius:5px;
+}
+
+.pagination a {
+  color: #364B69;
+  border: 1px solid #ddd;
+  -moz-border-radius:5px;
+}
+
+.pagination a:hover {
+  color: #444;
+  background: #E9FAE6;
+}
+
+/* tables */
+
+.table th {
+  background: #48625B;
+  color: #FFF;
+  font-weight:normal;
+  padding:3px;
+}
+
+.table th a.toggle {
+  display: block;
+  width: 12px;
+  height: 12px;
+  background: transparent url('images/tick.png') center no-repeat;
+  text-indent: -9999px;
+  -moz-outline: none;
+}
+
+.table th.first {
+  width: 30px;
+  text-align: center;
+}
+
+.table td {
+  border-bottom: 1px solid #F0F0EE;
+}
+
+/* forms */
+
+.form input.text, .form textarea.textarea {
+  border: 1px solid #ddd;
+  padding: 5px;
+  width: 95%;
+}
+
+.form .navform {
+  padding:10px;
+  background-color: #E9FAE6;
+  font-size:14px;
+  border-bottom:1px solid #ddd;
+  border-right:1px solid #ddd;
+  border-top:1px solid #eee;
+  border-left:1px solid #eee;
+}
+.form .navform input {
+  font-size:14px;
+}
+
+/* flash-messages */
+.flash .message {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  text-align:center;
+  margin:0 auto 5px;
+  width:80%;
+}
+.flash .message p {
+  margin:8px;
+}
+.flash .error {
+  border: 1px solid #fbb;
+  background-color: #fdd;
+}
+.flash .warning {
+  border: 1px solid #fffaaa;
+  background-color: #ffffcc;
+}
+.flash .notice {
+  border: 1px solid #ddf;
+  background-color: #eef;
+}
+
+/* lists */
+
+ul.list li {
+  border-bottom-color: #F0F0EE;
+}
+
+ul.list li .item .avatar {
+  border-color: #F0F0EE;
+  margin: 3px 10px 0 0;
+}
+
+ul.list li .left  {
+  padding: 5px 5px;
+}
+
+/* box */
+
+#box .block {
+  background: #FFF;  
+}
+
+#box .block h2 {
+  background: #48625B;  
+  color: #FFF;
+}

apps/web_theme/media/stylesheets/themes/bec/style.css

@@ -0,0 +1,301 @@
+a:link, a:visited, a:hover, a:active { color: #33f; }
+h1, h2, h3 {color:#444}
+
+body {
+  color: #333;
+  background: #e5e5e5;
+  font-family: Verdana, Arial, "Bitstream Vera Sans", sans-serif;  
+}
+
+hr {
+  background: #f0f0ee; 
+}
+
+p {
+  font-size: 12px;
+  line-height: 20px;
+}
+
+input.checkbox {
+  vertical-align:middle;
+}
+
+#header h1 {
+  font-size: 28px;
+  padding: 5px 0;
+  margin: 5px 0;
+}
+
+.hightlight {
+  background-color: #ffc;
+}
+.small {
+  font-size: 11px;
+}
+.gray {
+  color: #999;
+}
+#header {
+  background: #006666;
+}
+
+#header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
+  color: #FFF;
+}
+
+#main {
+  background: #e5e5e5;
+  width: 73%;
+}
+
+#main .block {
+  -moz-border-radius-topleft: 4px;
+  -moz-border-radius-topright: 4px;
+  padding: 0;
+  margin-bottom:20px;
+  padding-bottom: 20px;
+  background: #fff;
+}
+
+#main .block h2.title {
+  margin: 0 0 20px 0;
+  background-color: #E6FAFA;
+  padding: 5px 5px 5px 15px;
+  font-size:18px;
+}
+
+.main_container {
+  padding:10px;
+}
+
+#footer .block p {
+  color:#aaa;
+  font-size:11px;
+}
+
+/* #sidebar .block { background: #FFF; padding-bottom:0px; } */
+
+#sidebar .notice {
+  background-color: #ffc;
+  padding: 0 10px;
+  border-bottom:1px solid #ddd;
+  border-right:1px solid #ddd;
+  border-top:1px solid #fff;
+  border-left:1px solid #fff;
+}
+#sidebar .notice h2 {
+  font-size:16px;
+  margin: 5px 0;
+  border-bottom:1px solid #aaa;
+}
+#sidebar .notice p {
+  font-size:12px;
+}
+
+#sidebar .block {
+  padding-bottom: 0;
+}
+
+#sidebar .block .content {
+  padding: 0 10px;
+}
+
+
+#sidebar h3 {  
+  background: #c7d8d8;
+  border-bottom:1px solid #999;
+  padding: 5px 10px;
+}
+
+#sidebar ul li a:link, #sidebar ul li a:visited {
+  font-size:12px;
+}
+
+#sidebar ul li a:hover, #sidebar ul li a:active {
+  background: #e1efef;
+  color: #444;
+  font-size:12px;
+  text-decoration:underline;
+}
+#sidebar ul.navigation li.last a {
+  border-bottom: none;
+}
+
+#sidebar ul.navigation li a:link,#sidebar ul.navigation li a:visited {
+  padding: 5px 10px;
+  color:#444;
+  text-decoration: none;
+}
+#sidebar ul.navigation li a:hover {
+  text-decoration:underline;
+}
+#sidebar .block .sidebar-block h4 {
+  border-bottom: 1px solid #bbb;
+}
+#main-navigation ul li {
+  background: #008c8c;
+}
+
+#main-navigation ul li:hover {
+  background: #00b2b2;
+}
+
+#main-navigation ul li.active {
+  background: #f0f0ee;
+}
+
+#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
+.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
+#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
+  text-decoration: none;
+  color: #FFF;
+}
+
+#main-navigation ul li a {
+  font-size: 12px;
+  padding: 4px 10px;
+}
+
+#main-navigation ul li.active a:link, #main-navigation ul li.active a:visited, #main-navigation ul li.active a:hover, #main-navigation ul li.active a:active {
+  color: #364b69;
+}
+#user-navigation ul li a:hover {
+  text-decoration: underline;
+}
+.secondary-navigation {
+  background: #006666;
+  border-bottom-color: #008c8c;
+  border-bottom: 5px solid #008c8c;
+}
+
+.secondary-navigation ul li.active {
+  background-color: #008c8c;
+}
+
+.secondary-navigation ul li:hover {
+  background-color: #00b2b2;
+}
+
+/* pagination */
+
+.pagination em {
+  background: #008c8c;
+  color: #FFF;
+  border: 1px solid #008c8c;
+  -moz-border-radius:5px;
+}
+
+.pagination a {
+  color: #364B69;
+  border: 1px solid #ddd;
+  -moz-border-radius:5px;
+  font-size:11px;
+}
+
+.pagination a:hover {
+  color: #444;
+  background: #E6FAFA;
+}
+
+/* tables */
+
+.table th {
+  background: #006666;
+  color: #FFF;
+  font-weight:normal;
+  padding:3px;
+}
+
+.table th a.toggle {
+  display: block;
+  width: 12px;
+  height: 12px;
+  background: transparent url('images/tick.png') center no-repeat;
+  text-indent: -9999px;
+  -moz-outline: none;
+}
+
+.table th.first {
+  width: 30px;
+  text-align: center;
+}
+
+.table td {
+  border-bottom: 1px solid #F0F0EE;
+}
+
+/* forms */
+
+.form input.text, .form textarea.textarea {
+  border: 1px solid #ddd;
+  padding: 5px;
+  width:99%;
+}
+
+.form .navform {
+  padding:10px;
+  background-color: #f1f8f8;
+  font-size:14px;
+  border-bottom:1px solid #ddd;
+  border-right:1px solid #ddd;
+  border-top:1px solid #eee;
+  border-left:1px solid #eee;
+}
+.form .navform input {
+  font-size:14px;
+}
+
+.description {
+  color:#aaa;
+  font-family:Georgia, serif;
+}
+
+/* flash-messages */
+.flash .message {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  text-align:center;
+  margin:0 auto 5px;
+  width:80%;
+}
+.flash .message p {
+  margin:8px;
+}
+.flash .error {
+  border: 1px solid #fbb;
+  background-color: #fdd;
+}
+.flash .warning {
+  border: 1px solid #fffaaa;
+  background-color: #ffffcc;
+}
+.flash .notice {
+  border: 1px solid #ddf;
+  background-color: #eef;
+}
+
+/* lists */
+
+ul.list li {
+  border-bottom-color: #F0F0EE;
+}
+
+ul.list li .item .avatar {
+  border-color: #F0F0EE;
+  margin: 3px 10px 0 0;
+}
+
+ul.list li .left  {
+  padding: 5px 5px;
+}
+
+/* box */
+
+#box .block {
+  background: #FFF;  
+}
+
+#box .block h2 {
+  background: #006666;  
+  color: #FFF;
+}

apps/web_theme/media/stylesheets/themes/blue/style.css

@@ -0,0 +1,280 @@
+.small { font-size:12px; }
+.gray { color:#999999; }
+.hightlight { background-color:#FFFFCC; }
+
+a:link, a:visited, a:hover, a:active, h1, h2, h3 { color: #2F427A; }
+a { -moz-outline: none; }
+
+body {
+  color: #222;
+  background: #f0f0ee;
+  font-family: helvetica, arial, sans-serif;
+  font-size: 14px;
+}
+
+hr {
+  background: #f0f0ee; 
+  color: #f0f0ee;
+}
+
+#header {
+  background: #2F427A;
+}
+
+#header h1 {
+  padding: 20px 0;
+}
+
+#header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
+  color: #FFF;
+}
+
+#user-navigation {
+  top: auto;
+  bottom: 5px;
+  right: 25px;
+}
+
+#main .block .content {
+  background: #FFF;
+  padding-top: 1px;
+}
+
+#main .block .content h2 {
+  margin-left: 15px;
+}
+
+#sidebar .block {
+  background: #FFF;
+}
+
+#sidebar .notice {
+  background: #FFFFCC;
+}
+
+#sidebar h3 {  
+  background: #2F427A;
+  color: #FFF;
+  border-bottom: 10px solid #262626;
+  font-size: 15px;
+}
+
+#main-navigation ul li {
+  padding-left: 15px;
+}
+
+#main-navigation ul li a {
+  padding: 8px 0;
+}
+
+#main-navigation ul li.active {
+  padding: 0;
+  margin-left: 15px;
+}
+
+#main-navigation ul li.active {
+  margin-left: 15px;
+}
+
+#main-navigation ul li.active a {
+  padding: 8px 15px;
+}
+
+#sidebar ul li a:link, #sidebar ul li a:visited {
+  background: #FFF;
+  border-bottom: 1px solid #F0F0EE;
+  text-decoration: none;
+}
+
+#sidebar ul li a:hover, #sidebar ul li a:active {
+  background: #316291;
+  color: #FFF;
+}
+
+#main-navigation {
+  background: #262626;
+}
+
+#main-navigation ul li {
+  background: #262626;
+  margin-right: 0;
+}
+
+#main-navigation ul li.active {
+  background: #f0f0ee;
+}
+
+#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
+.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
+#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
+  text-decoration: none;
+  color: #FFF;
+}
+
+.secondary-navigation li a:hover {
+  background: #5C637A;
+}
+
+#main-navigation ul li.active a:link, #main-navigation ul li.active a:visited, #main-navigation ul li.active a:hover, #main-navigation ul li.active a:active {
+  color: #262626;
+}
+
+.secondary-navigation {
+  background: #2F427A;
+  border-bottom-color: #262626;
+  font-size: 15px;
+}
+
+.secondary-navigation ul li.active, .secondary-navigation ul li.active a:hover {
+  background-color: #262626;
+}
+
+#footer .block {  
+  color: #FFF;
+  background: #262626;
+}
+
+#footer .block p {      
+  margin: 0;  
+  padding: 10px;
+}
+
+/* pagination */
+
+.pagination span, .pagination a {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  padding-top: 4px;
+}
+
+.pagination em {
+  background: #262626;
+  color: #FFF;
+  border-color: #262626;
+}
+
+.pagination a {
+  color: #262626;
+  border-color: #262626;
+}
+
+.pagination a:hover {
+    color: #FFF;
+    background: #262626;
+}
+
+/* tables */
+
+.table th {
+  background: #262626;
+  color: #FFF;
+}
+
+.table td {
+  border-bottom:1px solid #F0F0EE;
+}
+
+/* forms */
+
+.form input.text_field, .form textarea.text_area {
+  width: 100%;
+  border: 1px solid #262626;
+}
+
+.form input.button {
+  background: #EEE;
+  color: #262626;
+  padding: 2px 5px;
+  border: 1px solid #262626;
+  cursor: pointer;
+}
+
+.form .description {
+  font-style: italic;
+  color: #8C8C8C;
+  font-size: .9em;
+}
+
+/* flash-messages */
+.flash .message {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  text-align:center;
+  margin: 0 auto 15px;
+
+}
+
+.flash .message p {
+  margin:8px;
+}
+.flash .error {
+  border: 1px solid #fbb;
+  background-color: #fdd;
+}
+.flash .warning {
+  border: 1px solid #fffaaa;
+  background-color: #ffffcc;
+}
+.flash .notice {
+  border: 1px solid #1FDF00;
+  background-color: #BBFFB6;
+}
+
+/* lists */
+
+ul.list li {
+  border-bottom-color: #F0F0EE;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
+ul.list li .item .avatar {
+  border-color: #F0F0EE;
+  border-width: 1px;
+  border-style: solid;
+  padding: 2px; 
+}
+
+/* box */
+
+#box .block {
+  background: #FFF;  
+}
+
+#box .block h2 {
+  background: #2F427A;  
+  color: #FFF;
+}
+
+
+/* rounded borders */
+
+#main, #main-navigation, #main-navigation li, .secondary-navigation, #main .block, #sidebar .block, #sidebar h3, ul.list li, 
+#footer .block, .form input.button, #box .block, #box .block h2 {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation li.first a, .secondary-navigation ul li.first, .table th.first, .table th.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+.table th.last {
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation ul li.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+#sidebar, #sidebar .block, #main .block, #sidebar ul.navigation, ul.list li, #footer .block, .form input.button, #box .block {
+  -moz-border-radius-bottomleft: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+}

apps/web_theme/media/stylesheets/themes/default/style.css

@@ -0,0 +1,462 @@
+/*
+   activo
+   by David Francisco (dmfrancisc[at]gmail.com)
+
+   based on "Drastic Dark" by Juan Maria Martinez Arce (juan[at]insignia4u.com)
+*/
+
+.small {
+  font-size: 11px;
+  font-style: normal;
+  font-weight: normal;
+  text-transform: none;
+  letter-spacing: normal;
+  line-height: 1.4em;
+}
+
+.gray {
+  color:#999999;
+  font-family: Georgia, serif;
+  font-size: 13px;
+  font-style: italic;
+  font-weight: normal;
+  text-transform: none;
+  letter-spacing: normal;
+  line-height: 1.6em;
+}
+
+.hightlight {
+  background-color: #ffff88;
+  font-weight: bold;
+  color: #36393d;
+}
+
+a:link, a:visited, a:hover, a:active, h1, h2, h3 { color: #111; }
+a { -moz-outline: none; }
+
+body {
+  color: #111;
+  background: #E5E5E5;
+  font-family: helvetica, arial, sans-serif;
+}
+
+hr {
+  background: #e2e2e2;
+  color: #e2e2e2;
+}
+
+#header {  
+  background: #002134;
+}
+
+#header h1 {
+  padding: 15px 0;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: bold;
+  text-transform: none;
+  letter-spacing: -1px;
+  line-height: 1.2em;
+  color: #fff;
+  text-shadow: #000 1px 1px 2px;
+}
+
+#header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
+  color: #fff;
+}
+
+#user-navigation {
+  top: auto;
+  bottom: 5px;
+  right: 25px;
+}
+
+#user-navigation a.logout {
+  background: #ccc;
+  padding: 1px 4px;
+}
+
+#main {
+  width: 71%;
+}
+
+#main .block {
+  padding-top: 0px;
+  background: #fff;
+
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+
+#main .block .content {
+  padding-top: 1px;
+}
+
+#main .block .content h2 {
+  margin-left: 15px;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: bold;
+  text-transform: none;
+  letter-spacing: -1px;
+  line-height: 1.2em;
+}
+
+#main .block .content p {
+  font-size: 13px;
+  font-style: normal;
+  font-weight: normal;
+  text-transform: none;
+  letter-spacing: normal;
+  line-height: 1.45em;
+}
+
+#sidebar .block h4 {
+  font-weight: bold;
+}
+
+#sidebar .notice {
+  background: #fff;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+
+#sidebar h3 {
+  color: #111;
+  border-bottom: 1px solid #c0c0c0;
+}
+
+#main-navigation ul li {
+  padding-left: 15px;
+}
+
+#main-navigation ul li a {
+  padding: 8px 0;
+}
+
+#main-navigation ul li.active {
+  padding: 0;
+  margin-left: 15px;
+}
+
+#main-navigation ul li.active {
+  background: #E5E5E5;
+  margin-left: 15px;
+}
+
+#main-navigation ul li.active a {
+  padding: 8px 15px;
+}
+
+#sidebar ul li {
+  background-position: 15px 11px;
+  background-repeat: no-repeat;
+  background-image: url("images/arrow.png");
+  border-bottom: 1px solid #e2e2e2;
+}
+
+#sidebar ul li a {
+  text-decoration: none;
+  margin-left: 20px;
+}
+
+#sidebar ul li a:link, #sidebar ul li a:visited {
+  text-decoration: none;
+}
+
+#main-navigation {
+  background-color: #f4f4f4;
+  background-image: url("images/menubar-background.png");
+  background-repeat: repeat-x;
+}
+
+#main-navigation ul li {
+  margin-right: 0;
+  padding-left: 15px;
+  padding-right: 5px;
+}
+
+#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active {
+  text-decoration: none;
+  color: #111;
+}
+
+.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
+#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
+  text-decoration: none;
+  color: #111;
+}
+
+.secondary-navigation {
+  background-color: #f2f1ee;
+  border-bottom: none;
+  border-bottom-width: 5px;
+  background-image: url("images/boxbar-background.png");
+}
+
+.secondary-navigation ul li.active, .secondary-navigation ul li.active a:hover {
+  background-color: #fff;
+}
+
+#footer .block {
+  text-align: center;
+  color: #111;
+  background: #fff;
+
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+#footer .block p {
+  margin: 0;
+  padding: 4px;
+}
+
+/* pagination */
+
+.pagination a, .pagination span {
+  background-color: #f4f4f4;
+  background-image: url("images/button-background.png");
+  color: #111;
+  text-align: center;
+  min-width: 15px;
+  margin-right: 5px;
+  padding: 6px;
+  border: 1px solid #c3c4ba;
+}
+
+.pagination em {
+  background: #002134;
+  color: #fff;
+  border: 1px solid #002134;
+}
+
+.pagination a {
+  color: #1a1a1a;
+}
+
+.pagination a:hover {
+  border: 1px solid #818171;
+  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+}
+
+.pagination a:active {
+  background-image: url("images/button-background-active.png");
+  outline: none;
+}
+
+/* tables */
+
+.table th {
+  background: #eaeaea;
+  color: #222;
+  font-weight: normal;
+}
+
+.table td {
+  border-bottom: 1px solid #eaeaea;
+}
+
+.table tr.even {
+  background: #f8f8f8;
+}
+
+/* forms */
+
+.form label.label {
+  color: #666666;
+}
+
+.form input.text_field, .form textarea.text_area {
+  width: 100%;
+  border: 1px solid #e2e2e2;
+}
+
+.form input:hover, .form textarea:hover {
+  -webkit-box-shadow: rgba(0,0,0,0.3) 0 0 3px;
+  -moz-box-shadow: rgba(0,0,0,0.3) 0 0 3px;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+  border: 1px solid #a2a294;
+}
+
+.form input:focus, .form textarea:focus {
+  border: 1px solid #a2a294;
+}
+
+.form input.button {
+  background: #e2e2e2;
+  border: 1px solid #c1c1c1;
+  padding: 2px 5px;
+  cursor: pointer;
+  color: #111;
+  font-weight: bold;
+  font-size: 11px;
+}
+
+.form input.button:hover {
+  border: 1px solid #666;
+}
+
+.form .description {
+  font-style: italic;
+  color: #8C8C8C;
+  font-size: .9em;
+}
+
+.form .navform a {
+  color: #cc0000;
+}
+
+/* buttons */
+
+a.button, button.button {
+  background-color: #f4f4f4;
+  background-image: url("images/button-background.png");
+  border: 1px solid #c3c4ba;
+  font-family: helvetica, arial, sans-serif;
+  font-weight: normal;
+}
+
+a.button:link, a.button:visited, a.button:hover, a.button:active, button.button:link, button.button:visited, button.button:hover, button.button:active {
+  font-weight: normal;
+  background-color: #f4f4f4;
+}
+
+a.button:hover, button.button:hover {
+  background-color: #eee;
+  border: 1px solid #818171;
+  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+}
+
+a.button:active, button.button:active {
+  outline: none;
+  background-color: #ddd;
+  background-image: url("images/button-background-active.png");
+}
+
+/* flash-messages */
+.flash .message {
+  text-align:center;
+  margin: 0 auto 15px;
+}
+
+.flash .message p {
+  margin:8px;
+}
+.flash .error {
+  border: 1px solid #ffbbbb;
+  background-color: #ffdddd;
+}
+.flash .warning {
+  border: 1px solid #ffff88;
+  background-color: #ffffcc;
+}
+.flash .notice {
+  border: 1px solid #1fdf00;
+  background-color: #bbffb6;
+}
+
+/* lists */
+
+ul.list li {
+  border-bottom-color: #e2e2e2;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
+ul.list li .item .avatar {
+  border-color: #e2e2e2;
+  border-width: 1px;
+  border-style: solid;
+  padding: 2px;
+}
+
+/* box */
+
+#box .block {
+  background: #fff;
+
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+
+#box .block h2 {
+  background: #002134;
+  color: #fff;
+}
+
+
+/* rounded borders */
+
+#main, #main-navigation, #main-navigation li, .secondary-navigation, #main .block, #sidebar .block, #sidebar h3, ul.list li,
+#footer .block, .form input.button, #box .block, #box .block h2 {
+  -moz-border-radius-topleft: 9px;
+  -webkit-border-top-left-radius: 9px;
+  -moz-border-radius-topright: 9px;
+  -webkit-border-top-right-radius: 9px;
+}
+
+.secondary-navigation li.first a, .secondary-navigation ul li.first {
+  -moz-border-radius-topleft: 9px;
+  -webkit-border-top-left-radius: 9px;
+}
+
+.secondary-navigation ul li.first {
+  -moz-border-radius-topleft: 9px;
+  -webkit-border-top-left-radius: 9px;
+}
+
+#sidebar, #sidebar .block, #main .block, #sidebar ul.navigation, ul.list li, #footer .block, .form input.button, #box .block {
+  -moz-border-radius-bottomleft: 9px;
+  -webkit-border-bottom-left-radius: 9px;
+  -moz-border-radius-bottomright: 9px;
+  -webkit-border-bottom-right-radius: 9px;
+}
+
+#main .block {
+  -moz-border-radius: 9px;
+  -webkit-border-radius: 9px;
+  border-radius: 9px;
+}
+
+#main-navigation, .secondary-navigation {
+  -moz-border-radius-topleft: 9px;
+  -webkit-border-top-left-radius: 9px;
+  border-top-left-radius: 9px;
+
+  -moz-border-radius-topright: 9px;
+  -webkit-border-top-right-radius: 9px;
+  border-top-right-radius: 9px;
+}
+
+a.button, button.button, .pagination a, .pagination span {
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.flash .message {
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+}
+
+.form input.button {
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+
+#user-navigation a.logout {
+  -moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+  border-radius: 4px;
+}

apps/web_theme/media/stylesheets/themes/djime-cerulean/style.css

@@ -0,0 +1,298 @@
+/**
+ * Cerulean web-app-theme made for Djime: http://github.com/mikl/djime/
+ *
+ * Please note that we're using CSSEdit's @group comment syntax.
+ *
+ * Colour sheme:
+ *   Cerulean:       #007BA7
+ *   Bright blue:    #01B8DE
+ *   Near-white:     #F7F7F8
+ *   Silver grey:    #C2C8D1
+ *   Dark blue:      #001C26
+ *
+ * http://www.colourlovers.com/palette/646252/Cerulean_touch
+ */
+
+/* @group General styles */
+
+.small { font-size:11px; }
+.gray { color:#999; }
+.hightlight { background-color:#ffc; }
+
+a:link, a:visited, a:hover, a:active, h1, h2, h3 { color: #007BA7; }
+
+body {
+  color: #222;
+  background: #C2C8D1;
+  font-family: "Helvetica Neue",Helvetica,Arial,"Bitstream Vera Sans",sans-serif;
+}
+
+hr {
+  background: #EEF0F0;
+  color: #EEF0F0;
+}
+
+/* @end */
+
+/* @group Header */
+
+#header {
+  background: #007BA7;
+}
+
+#header h1 {
+  padding: 20px 0;
+}
+
+#header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
+  color: #F7F7F8;
+}
+
+/* @end */
+
+#user-navigation {
+  top: auto;
+  bottom: 5px;
+  right: 25px;
+}
+
+#main .block .content {
+  background: #F7F7F8;
+  padding-top: 1px;
+}
+
+#main .block .content h2 {
+  margin-left: 15px;
+}
+
+
+
+/* @group Main navigation */
+
+#main-navigation ul li {
+  padding-left: 0;
+}
+
+#main-navigation ul li a {
+  padding: 8px 0;
+}
+
+#main-navigation ul li a {
+  padding: 8px 15px;
+}
+
+#main-navigation {
+  background-color: #005573;
+}
+
+#main-navigation ul li a:hover {
+  background-color: #001C26;
+}
+
+#main-navigation ul li.active a {
+  background-color: #C2C8D1;
+  background: -webkit-gradient(linear, left top, left bottom, from(#C2C8D1), to(#C2C8D1), color-stop(0.5, #F7F7F8), color-stop(0.5, #F7F7F8));
+
+}
+
+/* @end */
+
+/* @group Secondary navigation */
+
+.secondary-navigation li a:hover {
+  background: #005573;
+}
+
+.secondary-navigation {
+  background: #007BA7;
+  border-bottom-width: 7px;
+  border-bottom-color: #005573;
+}
+
+.secondary-navigation ul li.active, .secondary-navigation ul li.active a:hover {
+  background-color: #005573;
+}
+
+/* @end */
+
+/* @group Sidebar */
+
+#sidebar .block {
+  background: #F7F7F8;
+}
+
+#sidebar h3 {
+  background: #007BA7;
+  color: #F7F7F8;
+  border-bottom: 7px solid #005573;
+}
+
+#sidebar ul li a:link, #sidebar ul li a:visited {
+  background: #F7F7F8;
+  border-bottom: 1px solid #EEF0F0;
+  text-decoration: none;
+}
+
+#sidebar ul li a:hover, #sidebar ul li a:active {
+  background: #005573;
+  color: #F7F7F8;
+}
+
+/* @end */
+
+#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
+.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
+#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
+  text-decoration: none;
+  color: #F7F7F8;
+}
+
+#main-navigation ul li.active a:link, #main-navigation ul li.active a:visited, #main-navigation ul li.active a:hover, #main-navigation ul li.active a:active {
+  color: #001C26;
+}
+
+#footer .block {
+  color: #F7F7F8;
+  background: #005573;
+}
+
+#footer .block p {
+  margin: 0;
+  padding: 10px;
+}
+
+/* pagination */
+
+.pagination em {
+  background: #005573;
+  color: #F7F7F8;
+  border-color: #005573;
+}
+
+.pagination a,
+.pagination span {
+  color: #001C26;
+  border-color: #005573;
+}
+
+.pagination a:hover {
+    color: #F7F7F8;
+    background: #005573;
+}
+
+/* tables */
+
+.table th {
+  background: #C2C8D1;
+  color: #001C26;
+}
+
+.table td {
+  border-bottom:1px solid #EEF0F0;
+}
+
+/* forms */
+
+.form input.text_field, .form textarea.text_area {
+  width: 100%;
+  border: 1px solid #001C26;
+}
+
+.form input.button {
+  background: #EEE;
+  color: #001C26;
+  padding: 2px 5px;
+  border: 1px solid #001C26;
+  cursor: pointer;
+}
+
+.form .description {
+  color: #8C8C8C;
+  font-size: .9em;
+}
+
+/* @group Flash messages */
+
+.flash .message {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  text-align:center;
+  margin: 0 auto 15px;
+}
+
+.flash .message p {
+  margin:8px;
+}
+.flash .error {
+  border: 1px solid #fbb;
+  background-color: #fdd;
+}
+.flash .warning {
+  border: 1px solid #e0d300;
+  background-color: #ffffcc;
+}
+.flash .notice {
+  border: 1px solid #8ec4df;
+  background-color: #dffaff;
+}
+
+/* @end */
+
+/* lists */
+
+ul.list li {
+  border-bottom-color: #EEF0F0;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
+ul.list li .item .avatar {
+  border-color: #EEF0F0;
+  border-width: 1px;
+  border-style: solid;
+  padding: 2px;
+}
+
+/* box */
+
+#box .block {
+  background: #F7F7F8;
+}
+
+#box .block h2 {
+  background: #005573;
+  color: #F7F7F8;
+}
+
+
+/* rounded borders */
+
+#main, #main-navigation, #main-navigation li, #main-navigation li a, .secondary-navigation, #main .block, #sidebar .block, #sidebar h3, ul.list li, 
+#footer .block, .form input.button, #box .block, #box .block h2 {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation li.first a, .secondary-navigation ul li.first, .table th.first, .table th.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+.table th.last {
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation ul li.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+#sidebar, #sidebar .block, #main .block, #sidebar ul.navigation, ul.list li, #footer .block, .form input.button, #box .block {
+  -moz-border-radius-bottomleft: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+}

apps/web_theme/media/stylesheets/themes/drastic-dark/style.css

@@ -0,0 +1,373 @@
+/*
+
+    Drastic Dark
+    by Juan Maria Martinez Arce
+       juan[at]insignia4u.com
+
+    light grey:                 #cfcfcf
+    medium grey:                #36393d
+    dark grey:                  #1a1a1a
+    interactive action yellow   #ffff88
+    red                         #cc0000
+    light blue                  #E6EEFC
+    dark blue                   #0B43A8
+
+*/
+
+.small {
+  font-size: 11px;
+  font-style: normal;
+  font-weight: normal;
+  text-transform: normal;
+  letter-spacing: normal;
+  line-height: 1.4em;
+}
+
+.gray {
+  color:#999999;
+  font-family: Georgia, serif;
+  font-size: 13px;
+  font-style: italic;
+  font-weight: normal;
+  text-transform: normal;
+  letter-spacing: normal;
+  line-height: 1.6em;
+}
+
+.hightlight {
+  background-color: #ffff88;
+  font-weight: bold;
+  color: #36393d;
+}
+
+a:link, a:visited, a:hover, a:active, h1, h2, h3 { color: #36393d; }
+a { -moz-outline: none; }
+
+body {
+  color: #222;
+  background: #cfcfcf;
+  font-family: helvetica, arial, sans-serif;
+}
+
+hr {
+  background: #f0f0ee;
+  color: #f0f0ee;
+}
+
+#header {
+  background: #36393d;
+}
+
+#header h1 {
+  padding: 15px 0;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: bold;
+  text-transform: normal;
+  letter-spacing: -1px;
+  line-height: 1.2em;
+}
+
+#header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
+  color: #FFF;
+}
+
+#user-navigation {
+  top: auto;
+  bottom: 5px;
+  right: 25px;
+}
+
+#user-navigation a.logout {
+  background: #cc0000;
+  padding: 1px 4px;
+  -moz-border-radius: 4px;
+	-webkit-border-radius: 3px;
+}
+
+#main .block .content {
+  background: #FFF;
+  padding-top: 1px;
+}
+
+#main .block .content h2 {
+  margin-left: 15px;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: bold;
+  text-transform: normal;
+  letter-spacing: -1px;
+  line-height: 1.2em;
+}
+
+#main .block .content p {
+  font-size: 13px;
+  font-style: normal;
+  font-weight: normal;
+  text-transform: normal;
+  letter-spacing: normal;
+  line-height: 1.45em;
+}
+
+#sidebar .block {
+  background: #FFF;
+}
+
+#sidebar .block h4 {
+  font-weight: bold;
+}
+
+#sidebar .notice {
+  background: #E6EEFC;
+}
+
+#sidebar .notice h4 {
+  color: #0B43A8;
+}
+
+#sidebar h3 {
+  background: #36393d;
+  color: #FFF;
+  border-bottom: 5px solid #1a1a1a;
+}
+
+#main-navigation ul li {
+  padding-left: 15px;
+}
+
+#main-navigation ul li a {
+  padding: 8px 0;
+}
+
+#main-navigation ul li.active {
+  padding: 0;
+  margin-left: 15px;
+}
+
+#main-navigation ul li.active {
+  margin-left: 15px;
+}
+
+#main-navigation ul li.active a {
+  padding: 8px 15px;
+}
+
+#sidebar ul li a:link, #sidebar ul li a:visited {
+  background: #FFF;
+  border-bottom: 1px solid #F0F0EE;
+  text-decoration: none;
+}
+
+#sidebar ul li a:hover, #sidebar ul li a:active {
+  background: #666666;
+  color: #ffffff;;
+}
+
+#main-navigation {
+  background: #1a1a1a;
+}
+
+#main-navigation ul li {
+  background: #1a1a1a;
+  margin-right: 0;
+}
+
+#main-navigation ul li.active {
+  background: #f0f0ee;
+}
+
+#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
+.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
+#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
+  text-decoration: none;
+  color: #FFF;
+}
+
+.secondary-navigation li a:hover {
+  background: #666666;
+}
+
+#main-navigation ul li.active a:link, #main-navigation ul li.active a:visited, #main-navigation ul li.active a:hover, #main-navigation ul li.active a:active {
+  color: #1a1a1a;
+}
+
+.secondary-navigation {
+  background: #36393d;
+  border-bottom-color: #1a1a1a;
+}
+
+.secondary-navigation ul li.active, .secondary-navigation ul li.active a:hover {
+  background-color: #1a1a1a;
+}
+
+#footer .block {
+  color: #FFF;
+  background: #1a1a1a;
+}
+
+#footer .block p {
+  margin: 0;
+  padding: 10px;
+}
+
+/* pagination */
+
+.pagination a, .pagination span {
+  background: #cfcfcf;
+  -moz-border-radius: 3px;
+  border: 1px solid #c1c1c1;
+}
+
+.pagination em {
+  background: #36393d;
+  color: #FFF;
+  border: 1px solid #36393d;
+}
+
+.pagination a {
+  color: #1a1a1a;
+}
+
+.pagination a:hover {
+  border: 1px solid #666;
+}
+
+/* tables */
+
+.table th {
+  background: #36393d;  
+  color: #FFF;
+}
+
+.table td {
+  border-bottom:1px solid #F0F0EE;
+}
+
+.table tr.even {
+  background: #ebebeb;
+}
+
+/* forms */
+
+.form label.label {
+  color: #666666;
+}
+
+.form input.text_field, .form textarea.text_area {
+  width: 100%;
+  border: 1px solid #cfcfcf;
+}
+
+.form input.button {
+  background: #cfcfcf;
+  -moz-border-radius: 5px;
+  border: 1px solid #c1c1c1;
+  padding: 2px 5px;
+  cursor: pointer;
+  color: #36393d;
+  font-weight: bold;
+  font-size: 11px;
+}
+
+.form input.button:hover {
+  border: 1px solid #666;
+}
+
+.form .description {
+  font-style: italic;
+  color: #8C8C8C;
+  font-size: .9em;
+}
+
+.form .navform a {
+  color: #cc0000;
+}
+
+/* flash-messages */
+.flash .message {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  text-align:center;
+  margin: 0 auto 15px;
+
+}
+
+.flash .message p {
+  margin:8px;
+}
+.flash .error {
+  border: 1px solid #fbb;
+  background-color: #fdd;
+}
+.flash .warning {
+  border: 1px solid #fffaaa;
+  background-color: #ffffcc;
+}
+.flash .notice {
+  border: 1px solid #1FDF00;
+  background-color: #BBFFB6;
+}
+
+/* lists */
+
+ul.list li {
+  border-bottom-color: #F0F0EE;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
+ul.list li .item .avatar {
+  border-color: #F0F0EE;
+  border-width: 1px;
+  border-style: solid;
+  padding: 2px;
+}
+
+/* box */
+
+#box .block {
+  background: #FFF;
+}
+
+#box .block h2 {
+  background: #36393d;
+  color: #FFF;
+}
+
+
+/* rounded borders */
+
+#main, #main-navigation, #main-navigation li, .secondary-navigation, #main .block, #sidebar .block, #sidebar h3, ul.list li,
+#footer .block, .form input.button, #box .block, #box .block h2 {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation li.first a, .secondary-navigation ul li.first, .table th.first, .table th.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+.table th.last {
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation ul li.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+#sidebar, #sidebar .block, #main .block, #sidebar ul.navigation, ul.list li, #footer .block, .form input.button, #box .block {
+  -moz-border-radius-bottomleft: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+}
+
+.secondary-navigation {
+  border-bottom-width: 5px;
+}
+

apps/web_theme/media/stylesheets/themes/kathleene/style.css

@@ -0,0 +1,272 @@
+.small { font-size:11px; }
+.gray { color:#999999; }
+.hightlight { background-color:#FFFFCC; }
+
+a:link, a:visited, a:hover, a:active, h1, h2, h3 { color: #AF0000; }
+a { -moz-outline: none; }
+
+body {
+  color: #222;
+  background: #f0f0ee;
+  font-family: helvetica, arial, sans-serif;
+}
+
+hr {
+  background: #f0f0ee; 
+  color: #f0f0ee;
+}
+
+#header {
+  background: #AF0000;
+}
+
+#header h1 {
+  padding: 20px 0;
+}
+
+#header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
+  color: #FFF;
+}
+
+#user-navigation {
+  top: auto;
+  bottom: 5px;
+  right: 25px;
+}
+
+#main .block .content {
+  background: #FFF;
+  padding-top: 1px;
+}
+
+#main .block .content h2 {
+  margin-left: 15px;
+}
+
+#sidebar .block {
+  background: #FFF;
+}
+
+#sidebar h3 {  
+  background: #AF0000;
+  color: #FFF;
+  border-bottom: 5px solid #2a0000;
+}
+
+#main-navigation ul li {
+  padding-left: 15px;
+}
+
+#main-navigation ul li a {
+  padding: 8px 0;
+}
+
+#main-navigation ul li.active {
+  padding: 0;
+  margin-left: 15px;
+}
+
+#main-navigation ul li.active {
+  margin-left: 15px;
+}
+
+#main-navigation ul li.active a {
+  padding: 8px 15px;
+}
+
+#sidebar ul li a:link, #sidebar ul li a:visited {
+  background: #FFF;
+  border-bottom: 1px solid #F0F0EE;
+  text-decoration: none;
+}
+
+#sidebar ul li a:hover, #sidebar ul li a:active {
+  background: #470E0E;
+  color: #FFF;
+}
+
+#main-navigation {
+  background: #2a0000;
+}
+
+#main-navigation ul li {
+  background: #2a0000;
+  margin-right: 0;
+}
+
+#main-navigation ul li.active {
+  background: #f0f0ee;
+}
+
+#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
+.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
+#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
+  text-decoration: none;
+  color: #FFF;
+}
+
+.secondary-navigation li a:hover {
+  background: #470E0E;
+}
+
+#main-navigation ul li.active a:link, #main-navigation ul li.active a:visited, #main-navigation ul li.active a:hover, #main-navigation ul li.active a:active {
+  color: #2a0000;
+}
+
+.secondary-navigation {
+  background: #AF0000;
+  border-bottom-color: #2a0000;
+}
+
+.secondary-navigation ul li.active, .secondary-navigation ul li.active a:hover {
+  background-color: #2a0000;
+}
+
+#footer .block {  
+  color: #FFF;
+  background: #2a0000;
+}
+
+#footer .block p {      
+  margin: 0;  
+  padding: 10px;
+}
+
+/* pagination */
+
+.pagination em {
+  background: #2a0000;
+  color: #FFF;
+  border-color: #2a0000;
+}
+
+.pagination a {
+  color: #2a0000;
+  border-color: #2a0000;
+}
+
+.pagination a:hover {
+    color: #FFF;
+    background: #2a0000;
+}
+
+/* tables */
+
+.table th {
+  background: #100000;
+  border-bottom: 3px solid #700000;
+  color: #FFF;
+}
+
+.table td {
+  border-bottom:1px solid #F0F0EE;
+}
+
+/* forms */
+
+.form input.text_field, .form textarea.text_area {
+  width: 100%;
+  border: 1px solid #2a0000;
+}
+
+.form input.button {
+  background: #EEE;
+  color: #2a0000;
+  padding: 2px 5px;
+  border: 1px solid #2a0000;
+  cursor: pointer;
+}
+
+.form .description {
+  font-style: italic;
+  color: #8C8C8C;
+  font-size: .9em;
+}
+
+/* flash-messages */
+.flash .message {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  text-align:center;
+  margin: 0 auto 15px;
+
+}
+
+.flash .message p {
+  margin:8px;
+}
+.flash .error {
+  border: 1px solid #fbb;
+  background-color: #fdd;
+}
+.flash .warning {
+  border: 1px solid #fffaaa;
+  background-color: #ffffcc;
+}
+.flash .notice {
+  border: 1px solid #1FDF00;
+  background-color: #BBFFB6;
+}
+
+/* lists */
+
+ul.list li {
+  border-bottom-color: #F0F0EE;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
+ul.list li .item .avatar {
+  border-color: #F0F0EE;
+  border-width: 1px;
+  border-style: solid;
+  padding: 2px; 
+}
+
+/* box */
+
+#box .block {
+  background: #FFF;  
+}
+
+#box .block h2 {
+  background: #AF0000;  
+  color: #FFF;
+}
+
+
+/* rounded borders */
+
+#main, #main-navigation, #main-navigation li, .secondary-navigation, #main .block, #sidebar .block, #sidebar h3, ul.list li, 
+#footer .block, .form input.button, #box .block, #box .block h2 {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation li.first a, .secondary-navigation ul li.first, .table th.first, .table th.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+.table th.last {
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation ul li.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+#sidebar, #sidebar .block, #main .block, #sidebar ul.navigation, ul.list li, #footer .block, .form input.button, #box .block {
+  -moz-border-radius-bottomleft: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+}
+
+.secondary-navigation {
+  border-bottom-width: 5px;
+}

apps/web_theme/media/stylesheets/themes/olive/style.css

@@ -0,0 +1,338 @@
+.small {
+  font-size: 11px;
+  font-style: normal;
+  font-weight: normal;
+  text-transform: normal;
+  letter-spacing: normal;
+  line-height: 1.4em;
+}
+
+.gray {
+  color:#999999;
+  font-family: Georgia, serif;
+  font-size: 13px;
+  font-style: italic;
+  font-weight: normal;
+  text-transform: normal;
+  letter-spacing: normal;
+  line-height: 1.6em;
+}
+
+.hightlight {
+  background-color: #ffff88;
+  font-weight: bold;
+  color: #36393d;
+}
+
+a:link, a:visited, a:hover, a:active, h1, h2, h3 { color: #A3AB74; }
+a { -moz-outline: none; }
+
+body {
+  color: #222;
+  background: #EFF3E4;
+	font-family: helvetica,Arial,sans-serif;
+}
+
+hr {
+  background: #f0f0ee; 
+  color: #f0f0ee;
+}
+
+p {
+	margin: 10px 0;
+
+}
+
+#header {
+  background: #5E634E;
+}
+
+#header h1 {
+  padding: 15px 0;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: bold;
+  text-transform: normal;
+  letter-spacing: -1px;
+  line-height: 1.2em;
+}
+
+#header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
+  color: #FFF;
+}
+
+#user-navigation {
+  top: auto;
+  bottom: 5px;
+  right: 25px;
+}
+
+#main .block .content {
+  background: #FFF;
+  padding-top: 1px;
+}
+
+#main .block .content h2 {
+  margin-left: 15px;
+}
+
+#main .block .content p {
+	font-size:13px;
+	line-height:1.45em;
+}
+
+#main .block .content h2 {
+	font-size:22px;
+	font-style:normal;
+	font-weight:bold;
+	letter-spacing:-1px;
+	line-height:1.2em;
+	margin-left:15px;
+}
+
+#sidebar .block {
+  background: #FFF;
+}
+
+#sidebar .notice {
+	background: #869453;
+	color: #fff;
+}
+
+#sidebar h3 {  
+  background: #5E634E;
+  color: #FFF;
+  border-bottom: 6px solid #DACF77;
+}
+
+#main-navigation ul li {
+  padding-left: 15px;
+}
+
+#main-navigation ul li a {
+  padding: 8px 0;
+}
+
+#main-navigation ul li.active {
+  padding: 0;
+  margin-left: 15px;
+}
+
+#main-navigation ul li.active {
+  margin-left: 15px;
+}
+
+#main-navigation ul li.active a {
+  padding: 8px 15px;
+}
+
+#sidebar ul li a:link, #sidebar ul li a:visited {
+  background: #FFF;
+  border-bottom: 1px solid #F0F0EE;
+  text-decoration: none;
+}
+
+#sidebar ul li a:hover, #sidebar ul li a:active {
+  background: #ADBFD6;
+  color: #FFF;
+}
+
+#main-navigation {
+  background: #DACF77;
+}
+
+#main-navigation ul li {
+  background: #DACF77;
+  margin-right: 0;
+}
+
+#main-navigation ul li.active {
+  background: #EFF3E4;
+}
+
+#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
+.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
+#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
+  text-decoration: none;
+  color: #FFF;
+}
+
+#user-navigation a.logout {
+  background: #cc0000;
+  padding: 2px 6px;
+  -moz-border-radius: 4px;
+	-webkit-border-radius: 3px;
+}
+
+.secondary-navigation li a:hover {
+  background: #ADBFD6;
+}
+
+#main-navigation ul li.active a:link, #main-navigation ul li.active a:visited, #main-navigation ul li.active a:hover, #main-navigation ul li.active a:active {
+  color: #262626;
+}
+
+.secondary-navigation {
+  background: #5E634E;
+	border-bottom: 6px solid #DACF77;
+}
+
+.secondary-navigation ul li.active, .secondary-navigation ul li.active a:hover {
+  background-color: #DACF77;
+}
+
+.secondary-navigation ul li a {
+	padding:8px 12px;
+}
+
+#footer .block {  
+  color: #FFF;
+  background: #262626;
+}
+
+#footer .block p {      
+  margin: 0;  
+  padding: 10px;
+}
+
+/* pagination */
+
+.pagination span.disabled {
+  color: #bbb;
+  border-color: #bbb;
+}
+
+.pagination em {
+  background: #869453;
+  color: #FFF;
+  border-color: #869453;
+}
+
+.pagination a, .pagination span {
+  color: #869453;
+  border-color: #869453;
+}
+
+.pagination a:hover {
+    color: #FFF;
+    background: #869453;
+}
+
+/* tables */
+
+.table th {
+  background: #5E634E;
+  color: #FFF;
+}
+
+.table td {
+  border-bottom:1px solid #F0F0EE;
+}
+
+.table tr.even {
+	background: #EFF3E4;
+}
+/* forms */
+
+.form input.text_field, .form textarea.text_area {
+  width: 100%;
+	border:1px solid #CFCFCF;
+}
+
+.form input.button {
+  background: #EEE;
+  color: #262626;
+  padding: 2px 5px;
+  border: 1px solid #262626;
+  cursor: pointer;
+}
+
+.form .description {
+  font-style: italic;
+  color: #8C8C8C;
+  font-size: .9em;
+}
+
+/* flash-messages */
+.flash .message {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  text-align:center;
+  margin: 0 auto 15px;
+
+}
+
+.flash .message p {
+  margin:8px;
+}
+.flash .error {
+  border: 1px solid #fbb;
+  background-color: #fdd;
+}
+.flash .warning {
+  border: 1px solid #fffaaa;
+  background-color: #ffffcc;
+}
+.flash .notice {
+  border: 1px solid #1FDF00;
+  background-color: #BBFFB6;
+}
+
+/* lists */
+
+ul.list li {
+  border-bottom-color: #F0F0EE;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
+ul.list li .item .avatar {
+  border-color: #F0F0EE;
+  border-width: 1px;
+  border-style: solid;
+  padding: 2px; 
+}
+
+/* box */
+
+#box .block {
+  background: #FFF;  
+}
+
+#box .block h2 {
+  background: #869453;
+  color: #FFF;
+}
+
+
+/* rounded borders */
+
+#main, #main-navigation, #main-navigation li, .secondary-navigation, #main .block, #sidebar .block, #sidebar h3, ul.list li, 
+#footer .block, .form input.button, #box .block, #box .block h2 {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation li.first a, .secondary-navigation ul li.first, .table th.first, .table th.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+.table th.last {
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation ul li.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+#sidebar, #sidebar .block, #main .block, #sidebar ul.navigation, ul.list li, #footer .block, .form input.button, #box .block {
+  -moz-border-radius-bottomleft: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+}

apps/web_theme/media/stylesheets/themes/orange/style.css

@@ -0,0 +1,263 @@
+.small { font-size:11px; }
+.gray { color:#999999; }
+.hightlight { background-color:#FFFFCC; }
+
+a:link, a:visited, a:hover, a:active, h1, h2, h3 { color: #ff7900; }
+a { -moz-outline: none; }
+
+body {
+  color: #222;
+  background: #f0f0ee;
+  font-family: helvetica, arial, sans-serif;
+}
+
+hr {
+  background: #f0f0ee; 
+  color: #f0f0ee;
+}
+
+#header {
+  background: #ff7900;
+}
+
+#header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
+  color: #FFF;
+}
+
+#user-navigation {
+  top: auto;
+  bottom: 5px;
+  right: 25px;
+}
+
+#main .block .content {
+  background: #FFF;
+  padding-top: 1px;
+}
+
+#main .block .content h2 {
+  margin-left: 15px;
+}
+
+#sidebar .block {
+  background: #FFF;
+}
+
+#sidebar h3 {  
+  background: #ff7900;
+  color: #FFF;
+  border-bottom: 10px solid #262626;
+}
+
+#main-navigation ul li {
+  padding-left: 15px;
+}
+
+#main-navigation ul li a {
+  padding: 8px 0;
+}
+
+#main-navigation ul li.active {
+  padding: 0;
+  margin-left: 15px;
+}
+
+#main-navigation ul li.active {
+  margin-left: 15px;
+}
+
+#main-navigation ul li.active a {
+  padding: 8px 15px;
+}
+
+#sidebar ul li a:link, #sidebar ul li a:visited {
+  background: #FFF;
+  border-bottom: 1px solid #F0F0EE;
+  text-decoration: none;
+}
+
+#sidebar ul li a:hover, #sidebar ul li a:active {
+  background: #863800;
+  color: #FFF;
+}
+
+#main-navigation {
+  background: #262626;
+}
+
+#main-navigation ul li {
+  background: #262626;
+  margin-right: 0;
+}
+
+#main-navigation ul li.active {
+  background: #f0f0ee;
+}
+
+#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
+.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
+#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
+  text-decoration: none;
+  color: #FFF;
+}
+
+.secondary-navigation li a:hover {
+  background: #863800;
+}
+
+#main-navigation ul li.active a:link, #main-navigation ul li.active a:visited, #main-navigation ul li.active a:hover, #main-navigation ul li.active a:active {
+  color: #262626;
+}
+
+.secondary-navigation {
+  background: #ff7900;
+  border-bottom-color: #262626;
+}
+
+.secondary-navigation ul li.active, .secondary-navigation ul li.active a:hover {
+  background-color: #262626;
+}
+
+#footer .block {  
+  color: #FFF;
+  background: #262626;
+  width: 70%;  
+}
+
+#footer .block p {      
+  margin: 0;  
+  padding: 10px;
+}
+
+/* pagination */
+
+.pagination em {
+  background: #262626;
+  color: #FFF;
+  border-color: #262626;
+}
+
+.pagination a {
+  color: #262626;
+  border-color: #262626;
+}
+
+.pagination a:hover {
+    color: #FFF;
+    background: #262626;
+}
+
+/* tables */
+
+.table th {
+  background: #262626;
+  color: #FFF;
+}
+
+.table td {
+  border-bottom:1px solid #F0F0EE;
+}
+
+/* forms */
+
+.form input.text, .form textarea {
+  width: 100%;
+  border: 1px solid #262626;
+}
+
+.form input.button {
+  background: #EEE;
+  color: #262626;
+  padding: 2px 5px;
+  border: 1px solid #262626;
+  cursor: pointer;
+}
+
+.form .description {
+  font-style: italic;
+  color: #8C8C8C;
+  font-size: .9em;
+}
+
+/* flash-messages */
+.flash .message {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  text-align:center;
+  margin:0 auto 5px;
+
+}
+.flash .message p {
+  margin:8px;
+}
+.flash .error {
+  border: 1px solid #fbb;
+  background-color: #fdd;
+}
+.flash .warning {
+  border: 1px solid #fffaaa;
+  background-color: #ffffcc;
+}
+.flash .notice {
+  border: 1px solid #1FDF00;
+  background-color: #BBFFB6;
+}
+
+/* lists */
+
+ul.list li {
+  border-bottom-color: #F0F0EE;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
+ul.list li .item .avatar {
+  border-color: #F0F0EE;
+  border-width: 1px;
+  border-style: solid;
+  padding: 2px; 
+}
+
+/* box */
+
+#box .block {
+  background: #FFF;  
+}
+
+#box .block h2 {
+  background: #ff7900;  
+  color: #FFF;
+}
+
+
+/* rounded borders */
+
+#main, #main-navigation, #main-navigation li, .secondary-navigation, #main .block, #sidebar .block, #sidebar h3, ul.list li, 
+#footer .block, .form input.button, #box .block, #box .block h2 {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation li.first a, .secondary-navigation ul li.first, .table th.first, .table th.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+.table th.last {
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation ul li.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+#sidebar, #sidebar .block, #main .block, #sidebar ul.navigation, ul.list li, #footer .block, .form input.button, #box .block {
+  -moz-border-radius-bottomleft: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+}

apps/web_theme/media/stylesheets/themes/red/style.css

@@ -0,0 +1,274 @@
+.small { font-size:11px; }
+.gray { color:#999999; }
+.hightlight { background-color:#FFFFCC; }
+
+a:link, a:visited, a:hover, a:active, h1, h2, h3 { color: #7A1818; }
+a { -moz-outline: none; }
+
+body {
+  color: #222;
+  background: #e5e5e5;
+  font-family: helvetica, arial, sans-serif;
+}
+
+hr {
+  background: #f0f0ee; 
+  color: #f0f0ee;
+}
+
+#header {
+  background: #7A1818;
+}
+
+#header h1 {
+  padding: 15px 0;
+}
+
+#header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
+  color: #FFF;
+}
+
+#user-navigation {
+  top: auto;
+  bottom: 5px;
+  right: 25px;
+}
+
+#main .block .content {
+  background: #FFF;
+  padding-top: 1px;
+}
+
+#main .block .content h2 {
+  margin-left: 15px;
+}
+
+#sidebar .block {
+  background: #FFF;
+}
+
+#sidebar h3 {  
+  background: #7A1818;
+  color: #FFF;
+  border-bottom: 10px solid #262626;
+}
+
+#main-navigation ul li {
+  padding-left: 15px;
+}
+
+#main-navigation ul li a {
+  padding: 8px 0;
+}
+
+#main-navigation ul li.active {
+  padding: 0;
+  margin-left: 15px;
+}
+
+#main-navigation ul li.active {
+  margin-left: 15px;
+}
+
+#main-navigation ul li.active a {
+  padding: 8px 15px;
+}
+
+#sidebar ul li a:link, #sidebar ul li a:visited {
+  background: #FFF;
+  border-bottom: 1px solid #F0F0EE;
+  text-decoration: none;
+}
+
+#sidebar ul li a:hover, #sidebar ul li a:active {
+  background: #470E0E;
+  color: #FFF;
+}
+
+#main-navigation {
+  background: #262626;
+}
+
+#main-navigation ul li {
+  background: #262626;
+  margin-right: 0;
+}
+
+#main-navigation ul li.active {
+  background: #e5e5e5;
+}
+
+#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
+.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
+#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
+  text-decoration: none;
+  color: #FFF;
+}
+
+#user-navigation a.logout {
+  background: #cc0000;
+  padding: 2px 6px;
+  -moz-border-radius: 4px;
+	-webkit-border-radius: 3px;
+}
+
+.secondary-navigation li a:hover {
+  background: #470E0E;
+}
+
+#main-navigation ul li.active a:link, #main-navigation ul li.active a:visited, #main-navigation ul li.active a:hover, #main-navigation ul li.active a:active {
+  color: #262626;
+}
+
+.secondary-navigation {
+  background: #7A1818;
+  border-bottom-color: #262626;
+}
+
+.secondary-navigation ul li.active, .secondary-navigation ul li.active a:hover {
+  background-color: #262626;
+}
+
+#footer .block {  
+  color: #FFF;
+  background: #262626;
+}
+
+#footer .block p {      
+  margin: 0;  
+  padding: 10px;
+}
+
+/* pagination */
+
+.pagination em {
+  background: #262626;
+  color: #FFF;
+  border-color: #262626;
+}
+
+.pagination a {
+  color: #262626;
+  border-color: #262626;
+}
+
+.pagination a:hover {
+    color: #FFF;
+    background: #262626;
+}
+
+/* tables */
+
+.table th {
+  background: #262626;
+  color: #FFF;
+}
+
+.table td {
+  border-bottom:1px solid #F0F0EE;
+}
+
+/* forms */
+
+.form input.text_field, .form textarea.text_area {
+  width: 100%;
+  border: 1px solid #262626;
+}
+
+.form input.button {
+  background: #EEE;
+  color: #262626;
+  padding: 2px 5px;
+  border: 1px solid #262626;
+  cursor: pointer;
+}
+
+.form .description {
+  font-style: italic;
+  color: #8C8C8C;
+  font-size: .9em;
+}
+
+/* flash-messages */
+.flash .message {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  text-align:center;
+  margin: 0 auto 15px;
+
+}
+
+.flash .message p {
+  margin:8px;
+}
+.flash .error {
+  border: 1px solid #fbb;
+  background-color: #fdd;
+}
+.flash .warning {
+  border: 1px solid #fffaaa;
+  background-color: #ffffcc;
+}
+.flash .notice {
+  border: 1px solid #1FDF00;
+  background-color: #BBFFB6;
+}
+
+/* lists */
+
+ul.list li {
+  border-bottom-color: #F0F0EE;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
+ul.list li .item .avatar {
+  border-color: #F0F0EE;
+  border-width: 1px;
+  border-style: solid;
+  padding: 2px; 
+}
+
+/* box */
+
+#box .block {
+  background: #FFF;  
+}
+
+#box .block h2 {
+  background: #7A1818;  
+  color: #FFF;
+}
+
+
+/* rounded borders */
+
+#main, #main-navigation, #main-navigation li, .secondary-navigation, #main .block, #sidebar .block, #sidebar h3, ul.list li, 
+#footer .block, .form input.button, #box .block, #box .block h2 {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation li.first a, .secondary-navigation ul li.first, .table th.first, .table th.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+.table th.last {
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation ul li.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+#sidebar, #sidebar .block, #main .block, #sidebar ul.navigation, ul.list li, #footer .block, .form input.button, #box .block {
+  -moz-border-radius-bottomleft: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+}

apps/web_theme/media/stylesheets/themes/reidb-greenish/style.css

@@ -0,0 +1,301 @@
+.small { font-size:11px; }
+.gray { color:#a2b0b6; }
+.hightlight { background-color:#d6e7c7; }
+
+a:link, a:visited, a:hover, a:active { color: #81B953; } 
+h1, h2, h3 { color: #3B5526; }
+a { -moz-outline: none; }
+
+body {
+  color: #222;
+  background: #e4ebe4;
+  font-family: helvetica, arial, sans-serif;
+}
+
+hr {
+  background: #f0f0ee; 
+  color: #f0f0ee;
+}
+
+#header {
+  background: #c9deb7;
+
+}
+
+#header h1{
+  padding: 20px 0;
+  font-weight: bold;
+
+}
+
+#header h1 a:link, #header h1 a:active, 
+#header h1 a:hover, #header h1 a:visited {
+  color: #3B5526;
+}
+
+#main .block .content {
+  background: #FFF;
+  padding-top: 1px;
+}
+
+#main .block .content h2 {
+  margin-left: 15px;
+}
+
+#main .content { border: 1px solid #81B953;}
+
+#sidebar .block {
+  background: #FFF;
+  border: none;
+}
+
+#sidebar h3 {  
+  padding: 8px 12px;
+  background: #3B5526;
+  color: #FFF;
+  font-weight: bold;
+  border-bottom: 5px solid #81B953;
+}
+
+
+#sidebar ul li a:link, 
+#sidebar ul li a:visited {
+  background: #FFF;
+  border-bottom: 1px solid #F0F0EE;
+  text-decoration: none;
+}
+
+#sidebar ul li a:hover, 
+#sidebar ul li a:active {
+  background: #D3E8C1;
+  color: #FFF;
+}
+
+#main-navigation {
+  background: #44721e;
+  margin-right: 20px;
+  padding: 7px 7px 0 7px; 
+}
+
+#main-navigation ul li {
+  background: #91B96F;
+  margin-right: 7px;
+}
+
+#main-navigation ul li a {
+  padding: 10px 10px 5px 10px;
+}
+
+#main-navigation ul li.active {
+  background: #e4ebe4;
+  border: 1px solid #91B96F;
+  border-bottom: none;
+  font-weight: bold;
+}
+
+#main-navigation ul li a:hover,
+#main-navigation ul li a:link, 
+#main-navigation ul li a:visited, 
+#main-navigation ul li a:active,
+.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, 
+.secondary-navigation ul li a:hover, .secondary-navigation ul li a:active {
+  text-decoration: none;
+  color: #FFF;
+}
+
+#user-navigation ul li a:link, 
+#user-navigation ul li a:visited,  
+#user-navigation ul li a:active {
+	color: #3B5526;
+}
+
+#user-navigation ul li a:hover { color: #fff; }
+
+#main-navigation ul li.active a:link, 
+#main-navigation ul li.active a:visited, 
+#main-navigation ul li.active a:hover, 
+#main-navigation ul li.active a:active {
+  color: #262626;
+}
+
+.secondary-navigation {
+  background: #3B5526;
+  border-bottom: 5px solid #81b953;
+}
+
+.secondary-navigation ul li a {
+display:block;
+padding: 8px 12px;
+}
+
+.secondary-navigation ul li.active {background: #81b953;  font-weight: bold;}
+.secondary-navigation ul li.active a:hover {
+  background-color: #81B953;
+}
+
+.secondary-navigation li a:hover {
+  background: #81B953;
+}
+
+#footer .block {  
+  color: #FFF;
+  background: #3B5526;
+}
+
+#footer .block p {      
+  margin: 0;  
+  padding: 5px;
+}
+
+/* pagination */
+
+.pagination em {
+  background: #262626;
+  color: #FFF;
+  border-color: #262626;
+}
+
+.pagination a {
+  color: #262626;
+  border-color: #262626;
+}
+
+.pagination a:hover {
+    color: #FFF;
+    background: #262626;
+}
+
+/* tables */
+
+
+.table th {
+  background: #253618;
+  color: #FFF;
+}
+
+.table tr th { padding: 5px; }
+
+.table td {
+  border-bottom:1px solid #F0F0EE;
+}
+.table tr.odd {background: #ebfadf;}
+.table tr.even {background: #d3e8c1;}
+
+
+/* forms */
+
+.form input.text_field, .form textarea.text_area {
+  width: 100%;
+  border: 1px solid #262626;
+}
+
+.form input.button {
+  background: #EEE;
+  color: #262626;
+  padding: 2px 5px;
+  border: 1px solid #262626;
+  cursor: pointer;
+}
+
+.form .description {
+  font-style: italic;
+  color: #8C8C8C;
+  font-size: .9em;
+}
+
+/* flash-messages */
+.flash .message {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  text-align:center;
+  margin: 0 auto 15px;
+
+}
+
+.flash .message p {
+  margin:8px;
+}
+.flash .error {
+  border: 1px solid #fbb;
+  background-color: #fdd;
+}
+.flash .warning {
+  border: 1px solid #fffaaa;
+  background-color: #ffffcc;
+}
+.flash .notice {
+  border: 1px solid #1FDF00;
+  background-color: #BBFFB6;
+}
+
+/* lists */
+
+ul.list li {
+  border-bottom-color: #F0F0EE;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
+ul.list li .item .avatar {
+  border-color: #F0F0EE;
+  border-width: 1px;
+  border-style: solid;
+  padding: 2px; 
+}
+
+/* box */
+
+#box .block {
+  background: #FFF;  
+}
+
+#box .block h2 {
+  color: #fff;
+  background: #3B5526;
+  border-bottom: 5px solid #81b953;
+}
+
+#box .block .content { border: 1px solid #81b953; border}
+
+/* login */
+
+#block-login {   }
+#block-login h2 { background: #3B5526;border-bottom: 5px solid #81b953;}
+
+/* rounded borders */
+
+#main, #main-navigation, #main-navigation li, 
+.secondary-navigation, #main .block, #sidebar .block, 
+#sidebar h3, ul.list li, #footer .block, 
+.form input.button, #box .block, #box .block h2 {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation li.first a, 
+.secondary-navigation ul li.first, 
+.table th.first, .table th.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+.table th.last {
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+}
+
+.secondary-navigation ul li.first {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+}
+
+#sidebar, #sidebar .block, #main .block, 
+#sidebar ul.navigation, ul.list li, 
+#footer .block, .form input.button, #box .block {
+  -moz-border-radius-bottomleft: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+}

apps/web_theme/media/stylesheets/themes/warehouse/style.css

@@ -0,0 +1,391 @@
+a:link, a:visited { color: #07b; text-decoration: none; }
+a, a:hover, a:active { color: #d30; }
+h1, h2, h3 {color: #444}
+
+body {
+  color: #333;
+  background: #EBEBEB;
+  font: normal 12px/1.5em "Lucida Grande", "Helvetica Neue", Arial, sans-serif;
+}
+
+hr {
+  background: #aaa; 
+}
+
+p {
+  font-size: 12px;
+  line-height: 20px;
+}
+
+input.checkbox {
+  vertical-align:middle;
+}
+
+#header h1 {
+  font-size: 28px;
+  padding: 5px 0;
+  margin: 5px 0;
+}
+
+.hightlight {
+  background-color: #ffc;
+}
+.small {
+  font-size: 11px;
+}
+.gray {
+  color: #999;
+}
+#header {
+  background: #232C30;
+}
+
+#header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
+  color: #eaeaea;
+}
+
+#main {
+  background: #EBEBEB;
+  width: 73%;
+}
+
+#main .block {
+  -moz-border-radius-topleft: 4px;
+  -moz-border-radius-topright: 4px;
+  padding: 0;
+  margin-bottom:20px;
+  padding-bottom: 20px;
+  background: transparent;
+}
+
+#main .block .content {
+  border-left: 1px solid #ddd;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  background: #fff;
+}
+
+#main .block h2.title {
+  margin: 10px 0 5px 0;
+  background-color: none;
+  padding: 5px 5px 5px 15px;
+  font-size:18px;
+  color: #456;
+}
+
+.main_container {
+  padding:10px;
+}
+
+#footer {
+  background-color: #ddd;
+  border-top: 1px solid #bbb;
+}
+
+#footer .block {
+  font-size:11px;
+  background-color: #ddd;
+  padding: 0 10px;
+  text-align: right;
+}
+
+/* #sidebar .block { background: #FFF; padding-bottom:0px; } */
+
+#sidebar .notice {
+  background-color: #ffc;
+  padding: 0 10px;
+  border-bottom:1px solid #ddd;
+  border-right:1px solid #ddd;
+  border-top:1px solid #fff;
+  border-left:1px solid #fff;
+}
+#sidebar .notice h2 {
+  font-size:16px;
+  margin: 5px 0;
+  border-bottom:1px solid #456;
+}
+#sidebar .notice p {
+  font-size:12px;
+}
+
+#sidebar .block {
+  padding-bottom: 0;
+}
+
+#sidebar .block .content {
+  padding: 0 10px;
+}
+
+
+#sidebar h3 {  
+  background: #fff;
+  border-bottom:1px solid #ccc;
+  border-right:1px solid #ccc;
+  border-left:1px solid #ddd;
+  border-top:1px solid #ddd;
+  padding: 5px 10px;
+  color: #333;
+  font-weight: bold;
+}
+
+#sidebar ul li a:link, #sidebar ul li a:visited {
+  font-size:12px;
+}
+
+#sidebar ul li a:hover, #sidebar ul li a:active {
+  background: none;
+  color: #444;
+  font-size:12px;
+  text-decoration:underline;
+}
+#sidebar ul.navigation li.last a {
+  border-bottom: none;
+}
+
+#sidebar ul.navigation li a:link,#sidebar ul.navigation li a:visited {
+  padding: 5px 10px;
+  color:#6a6a6a;
+  text-decoration: none;
+}
+#sidebar ul.navigation li a:hover {
+  text-decoration:underline;
+}
+#sidebar .block .sidebar-block h4 {
+  border-bottom: 1px dotted #aaa;
+}
+#main-navigation ul li {
+  background: #456;
+  border-top: 1px solid #5C738A;
+  color: #eee;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+#main-navigation ul li:hover {
+  border-top-color: #7593B0;
+  background-color: #576C82 !important;
+  color: #fff;
+}
+
+#main-navigation ul li.active {
+  border-top: 1px solid #fff;
+  background-color: #eee !important;
+  color: #333;
+}
+
+#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
+.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
+#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
+  text-decoration: none;
+  color: #FFF;
+}
+
+#user-navigation ul li a:link, #user-navigation ul li a:visited {
+  color: #CDE;
+  border-bottom: 1px dotted #345;
+}
+
+#user-navigation ul li a:hover {
+  color: #fff;
+  border-bottom: 1px dotted #CDE;
+  text-decoration: none;
+}
+
+#main-navigation ul li a {
+  font-size: 12px;
+  padding: 3px 10px;
+}
+
+#main-navigation ul li.active a:link, #main-navigation ul li.active a:visited, #main-navigation ul li.active a:hover, #main-navigation ul li.active a:active {
+  color: #364b69;
+}
+
+.secondary-navigation {
+  background: #eaeaea;
+  border-bottom: 0px;
+}
+
+.secondary-navigation ul li {
+  background: #456;
+  border-top: 1px solid #5C738A;
+  color: #eee;
+  margin-right: 5px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.secondary-navigation ul li a {
+  padding: 3px 10px;
+}
+
+.secondary-navigation ul li.active:hover {
+  background: #fff !important;
+  border-top: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+}
+
+.secondary-navigation ul li.active {
+  border-top: 1px solid #ddd;
+  border-left: 1px solid #ddd;
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #fff;
+  margin-bottom: -1px;
+  background-color: #fff !important;
+  color: #333;
+}
+
+.secondary-navigation ul li.active a {
+  color: #333;
+}
+
+.secondary-navigation ul li:hover {
+  border-top-color: #7593B0;
+  background-color: #576C82 !important;
+  color: #fff;
+}
+
+/* pagination */
+
+.pagination em {
+  background: #576C82;
+  color: #FFF;
+  border: 1px solid #7593B0;
+  -moz-border-radius:5px;
+}
+
+.pagination span.disabled {
+  background: #eee;
+  color: #aaa;
+  border: 1px solid #ddd;
+  -moz-border-radius:5px;
+}
+
+.pagination a {
+  color: #364B69;
+  border: 1px solid #ddd;
+  -moz-border-radius:5px;
+  font-size:11px;
+}
+
+.pagination a:hover {
+  color: #444;
+  background: #eaeaea;
+  border: 1px solid #576C82;
+}
+
+/* tables */
+
+.table th {
+  background: #576C82;
+  color: #FFF;
+  font-weight:normal;
+  padding:3px;
+}
+
+.table th a.toggle {
+  display: block;
+  width: 12px;
+  height: 12px;
+  background: transparent url('images/tick.png') center no-repeat;
+  text-indent: -9999px;
+  -moz-outline: none;
+}
+
+.table th.first {
+  width: 30px;
+  text-align: center;
+}
+
+.table td {
+  border-bottom: 1px solid #AAA;
+}
+
+/* forms */
+
+.form input.text, .form textarea.textarea {
+  border: 1px solid #ddd;
+  padding: 5px;
+  width:99%;
+}
+
+.form input.text_field, .form textarea.text_area {
+  border-right: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  border-top: 2px solid #ccc;
+  border-left: 2px solid #ccc;
+  width:99%;
+}
+
+.form .navform {
+  padding:10px;
+  background-color: #eee;
+  font-size:14px;
+  border-bottom:1px solid #ddd;
+  border-right:1px solid #ddd;
+  border-top:1px solid #eee;
+  border-left:1px solid #eee;
+}
+
+.form .navform input {
+  font-size:14px;
+}
+
+.description {
+  color:#aaa;
+  font-family:Georgia, serif;
+}
+
+/* flash-messages */
+.flash .message {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  text-align:center;
+  margin:0 auto 5px;
+  width:80%;
+}
+.flash .message p {
+  margin:8px;
+}
+.flash .error {
+  border: 1px solid #fbb;
+  background-color: #fdd;
+}
+.flash .warning {
+  border: 1px solid #fffaaa;
+  background-color: #ffffcc;
+}
+.flash .notice {
+  border: 1px solid #ddf;
+  background-color: #eef;
+}
+
+/* lists */
+
+ul.list li {
+  border-bottom-color: #F0F0EE;
+}
+
+ul.list li .item .avatar {
+  border-color: #F0F0EE;
+  margin: 3px 10px 0 0;
+}
+
+ul.list li .left  {
+  padding: 5px 5px;
+}
+
+/* box */
+
+#box .block {
+  background: #FFF;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+}
+
+#box .block h2 {
+  background: #576C82;  
+  color: #FFF;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}

apps/web_theme/media/test/spec_helper.rb

@@ -0,0 +1,5 @@
+require "rubygems"
+require "spec"
+require "rails_generator"
+require "rails_generator/scripts/generate"
+require File.dirname(__FILE__) + "/../rails_generators/themed/themed_generator"

apps/web_theme/media/test/themed_generator_spec.rb

@@ -0,0 +1,115 @@
+require File.dirname(__FILE__) + "/spec_helper"
+
+describe ThemedGenerator, "with 'script/generate themed posts'" do 
+  before do
+    Post = Class.new
+    Post.stub!(:columns).and_return([])
+    options = {:destination => File.dirname(__FILE__), :quiet => true, :source => File.dirname(__FILE__)}
+    @generator = ThemedGenerator.new(["posts", "post"], options)
+    @generator.manifest
+  end
+  
+  after do
+    Object::send(:remove_const, :Post)
+  end
+  
+  it "should set the right controller_routing_path" do            
+    @generator.instance_variable_get("@controller_routing_path").should == "posts"
+  end
+  
+  it "should set the right singular_controller_routing_path" do
+    @generator.instance_variable_get("@singular_controller_routing_path").should == "post"
+  end
+  
+  it "should set the right model_name" do
+    @generator.instance_variable_get("@model_name").should == "Post"
+  end
+  
+  it "should set the right plural_model_name" do
+    @generator.instance_variable_get("@plural_model_name").should == "Posts"
+  end
+
+  it "should set the right resource_name" do
+    @generator.instance_variable_get("@resource_name").should == "post"
+  end
+  
+  it "should set the right plural_resource_name" do
+    @generator.instance_variable_get("@plural_resource_name").should == "posts"
+  end      
+end
+
+describe ThemedGenerator, "with 'script/generate themed admin/gallery_items'" do 
+  before do
+    GalleryItem = Class.new
+    GalleryItem.stub!(:columns).and_return([])
+    options = {:destination => File.dirname(__FILE__), :quiet => true, :source => File.dirname(__FILE__)}
+    @generator = ThemedGenerator.new(["admin/gallery_items"], options)
+    @generator.manifest
+  end
+  
+  after do
+    Object::send(:remove_const, :GalleryItem)
+  end
+  
+  it "should set the right controller_routing_path" do            
+    @generator.instance_variable_get("@controller_routing_path").should == "admin_gallery_items"
+  end
+  
+  it "should set the right singular_controller_routing_path" do
+    @generator.instance_variable_get("@singular_controller_routing_path").should == "admin_gallery_item"
+  end
+  
+  it "should set the right model_name" do
+    @generator.instance_variable_get("@model_name").should == "GalleryItem"
+  end
+  
+  it "should set the right plural_model_name" do
+    @generator.instance_variable_get("@plural_model_name").should == "GalleryItems"
+  end
+
+  it "should set the right resource_name" do
+    @generator.instance_variable_get("@resource_name").should == "gallery_item"
+  end
+  
+  it "should set the right plural_resource_name" do
+    @generator.instance_variable_get("@plural_resource_name").should == "gallery_items"
+  end      
+end
+
+describe ThemedGenerator, "with 'script/generate themed admin/gallery_items pictures'" do 
+  before do
+    Picture = Class.new
+    Picture.stub!(:columns).and_return([])
+    options = {:destination => File.dirname(__FILE__), :quiet => true, :source => File.dirname(__FILE__)}
+    @generator = ThemedGenerator.new(["admin/gallery_items", "picture"], options)
+    @generator.manifest
+  end
+  
+  after do
+    Object::send(:remove_const, :Picture)
+  end
+  
+  it "should set the right controller_routing_path" do            
+    @generator.instance_variable_get("@controller_routing_path").should == "admin_gallery_items"
+  end
+  
+  it "should set the right singular_controller_routing_path" do
+    @generator.instance_variable_get("@singular_controller_routing_path").should == "admin_gallery_item"
+  end
+  
+  it "should set the right model_name" do
+    @generator.instance_variable_get("@model_name").should == "Picture"
+  end
+  
+  it "should set the right plural_model_name" do
+    @generator.instance_variable_get("@plural_model_name").should == "Pictures"
+  end
+
+  it "should set the right resource_name" do
+    @generator.instance_variable_get("@resource_name").should == "picture"
+  end
+  
+  it "should set the right plural_resource_name" do
+    @generator.instance_variable_get("@plural_resource_name").should == "pictures"
+  end      
+end

apps/web_theme/media/web-app-theme.gemspec

@@ -0,0 +1,97 @@
+# Generated by jeweler
+# DO NOT EDIT THIS FILE DIRECTLY
+# Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
+# -*- encoding: utf-8 -*-
+
+Gem::Specification.new do |s|
+  s.name = %q{web-app-theme}
+  s.version = "0.6.3"
+
+  s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
+  s.authors = ["Andrea Franz"]
+  s.date = %q{2010-12-28}
+  s.description = %q{Web app theme generator for rails projects}
+  s.email = %q{andrea@gravityblast.com}
+  s.extra_rdoc_files = [
+    "LICENSE",
+    "README.md"
+  ]
+  s.files = [
+    "LICENSE",
+    "README.md",
+    "Rakefile",
+    "VERSION",
+    "config/locales/de_de.yml",
+    "config/locales/pt_br.yml",
+    "features/step_definitions/layout_steps.rb",
+    "features/step_definitions/themed_steps.rb",
+    "features/support/env.rb",
+    "features/theme_generator.feature",
+    "features/themed_generator.feature",
+    "images/avatar.png",
+    "images/icons/application_edit.png",
+    "images/icons/cross.png",
+    "images/icons/key.png",
+    "images/icons/tick.png",
+    "index.html",
+    "javascripts/jquery-1.3.min.js",
+    "javascripts/jquery.localscroll.js",
+    "javascripts/jquery.scrollTo.js",
+    "lib/generators/web_app_theme/theme/templates/layout_admin.html.erb",
+    "lib/generators/web_app_theme/theme/templates/layout_sign.html.erb",
+    "lib/generators/web_app_theme/theme/theme_generator.rb",
+    "lib/generators/web_app_theme/themed/templates/view_edit.html.erb",
+    "lib/generators/web_app_theme/themed/templates/view_form.html.erb",
+    "lib/generators/web_app_theme/themed/templates/view_new.html.erb",
+    "lib/generators/web_app_theme/themed/templates/view_show.html.erb",
+    "lib/generators/web_app_theme/themed/templates/view_sidebar.html.erb",
+    "lib/generators/web_app_theme/themed/templates/view_signin.html.erb",
+    "lib/generators/web_app_theme/themed/templates/view_signup.html.erb",
+    "lib/generators/web_app_theme/themed/templates/view_tables.html.erb",
+    "lib/generators/web_app_theme/themed/templates/view_text.html.erb",
+    "lib/generators/web_app_theme/themed/themed_generator.rb",
+    "lib/web_app_theme.rb",
+    "stylesheets/base.css",
+    "stylesheets/override.css",
+    "stylesheets/themes/amro/style.css",
+    "stylesheets/themes/bec-green/style.css",
+    "stylesheets/themes/bec/style.css",
+    "stylesheets/themes/blue/style.css",
+    "stylesheets/themes/default/images/arrow.png",
+    "stylesheets/themes/default/images/boxbar-background.png",
+    "stylesheets/themes/default/images/button-background-active.png",
+    "stylesheets/themes/default/images/button-background.png",
+    "stylesheets/themes/default/images/menubar-background.png",
+    "stylesheets/themes/default/style.css",
+    "stylesheets/themes/djime-cerulean/style.css",
+    "stylesheets/themes/drastic-dark/style.css",
+    "stylesheets/themes/kathleene/style.css",
+    "stylesheets/themes/olive/style.css",
+    "stylesheets/themes/orange/style.css",
+    "stylesheets/themes/red/style.css",
+    "stylesheets/themes/reidb-greenish/style.css",
+    "stylesheets/themes/warehouse/style.css",
+    "test/spec_helper.rb",
+    "test/themed_generator_spec.rb",
+    "web-app-theme.gemspec"
+  ]
+  s.homepage = %q{http://github.com/pilu/web-app-theme}
+  s.require_paths = ["lib"]
+  s.rubygems_version = %q{1.3.7}
+  s.summary = %q{Web app theme generator}
+  s.test_files = [
+    "test/spec_helper.rb",
+    "test/themed_generator_spec.rb"
+  ]
+
+  if s.respond_to? :specification_version then
+    current_version = Gem::Specification::CURRENT_SPECIFICATION_VERSION
+    s.specification_version = 3
+
+    if Gem::Version.new(Gem::VERSION) >= Gem::Version.new('1.2.0') then
+    else
+    end
+  else
+  end
+end
+

requirements/development.txt

@@ -0,0 +1,7 @@
+Django==1.2.4
+Werkzeug==0.6.2
+distribute==0.6.10
+django-extensions==0.6
+django-pagination==1.0.7
+django-rosetta==0.5.6
+wsgiref==0.1.2