hologram_rails 0.0.3

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/.ruby-version

@@ -0,0 +1 @@
+2.0.0-p353

data/.rvmrc

@@ -0,0 +1,62 @@
+#!/usr/bin/env bash
+
+# This is an RVM Project .rvmrc file, used to automatically load the ruby
+# development environment upon cd'ing into the directory
+
+# First we specify our desired <ruby>[@<gemset>], the @gemset name is optional,
+# Only full ruby name is supported here, for short names use:
+#     echo "rvm use 2.0.0" > .rvmrc
+environment_id="ruby-2.0.0-p353@hologram_rails"
+
+# Uncomment the following lines if you want to verify rvm version per project
+# rvmrc_rvm_version="1.25.18 (master)" # 1.10.1 seems like a safe start
+# eval "$(echo ${rvm_version}.${rvmrc_rvm_version} | __rvm_awk -F. '{print "[[ "$1*65536+$2*256+$3" -ge "$4*65536+$5*256+$6" ]]"}' )" || {
+#   echo "This .rvmrc file requires at least RVM ${rvmrc_rvm_version}, aborting loading."
+#   return 1
+# }
+
+# First we attempt to load the desired environment directly from the environment
+# file. This is very fast and efficient compared to running through the entire
+# CLI and selector. If you want feedback on which environment was used then
+# insert the word 'use' after --create as this triggers verbose mode.
+if [[ -d "${rvm_path:-$HOME/.rvm}/environments"
+  && -s "${rvm_path:-$HOME/.rvm}/environments/$environment_id" ]]
+then
+  \. "${rvm_path:-$HOME/.rvm}/environments/$environment_id"
+  for __hook in "${rvm_path:-$HOME/.rvm}/hooks/after_use"*
+  do
+    if [[ -f "${__hook}" && -x "${__hook}" && -s "${__hook}" ]]
+    then \. "${__hook}" || true
+    fi
+  done
+  unset __hook
+  if (( ${rvm_use_flag:=1} >= 2 )) # display only when forced
+  then
+    if [[ $- == *i* ]] # check for interactive shells
+    then printf "%b" "Using: $(tput setaf 2 2>/dev/null)$GEM_HOME$(tput sgr0 2>/dev/null)
+" # show the user the ruby and gemset they are using in green
+    else printf "%b" "Using: $GEM_HOME
+" # don't use colors in non-interactive shells
+    fi
+  fi
+else
+  # If the environment file has not yet been created, use the RVM CLI to select.
+  rvm --create  "$environment_id" || {
+    echo "Failed to create RVM environment '${environment_id}'."
+    return 1
+  }
+fi
+
+# If you use bundler, this might be useful to you:
+# if [[ -s Gemfile ]] && {
+#   ! builtin command -v bundle >/dev/null ||
+#   builtin command -v bundle | GREP_OPTIONS="" \grep $rvm_path/bin/bundle >/dev/null
+# }
+# then
+#   printf "%b" "The rubygem 'bundler' is not installed. Installing it now.\n"
+#   gem install bundler
+# fi
+# if [[ -s Gemfile ]] && builtin command -v bundle >/dev/null
+# then
+#   bundle install | GREP_OPTIONS="" \grep -vE '^Using|Your bundle is complete'
+# fi

data/Gemfile

@@ -0,0 +1,6 @@
+source 'https://rubygems.org'
+
+gem "bundler"
+gem "activesupport"
+# Specify your gem's dependencies in hologram_rails.gemspec
+gemspec

data/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 chou
+
+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.

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2014 Jenny Chou
+
+MIT License
+
+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.

data/README.md

@@ -0,0 +1,47 @@
+#hologram_rails
+<br>A gem to quickly get off the ground using Trulia's [Hologram](https://github.com/trulia/hologram) with a Rails project.  
+
+##Installation
+```ruby
+./Gemfile  
+
+gem 'hologram_rails'
+gem 'hologram', github: 'trulia/hologram'
+```
+(At the time of writing, *it's necessary to specify the trulia/hologram github repo* because it's ahead of the published gem and allows using categories in \_header.html)  
+<br>
+`bundle && rails g hologram_rails:install && bundle exec guard`  
+<br>
+Edit `./doc_assets/_header.html` as needed! This is where all the styleguide-specific html and css is placed. You can extract the styles to assets compiled in the asset pipeline and just link to the stylesheets if you want. See [this post](http://pivotallabs.com/using-hologram-rails-auto-generate-styleguides/) for details on that approach.  
+
+## What it Does
+### [Hologram](https://github.com/trulia/hologram) Setup  
++ Parses all asset files in ./app/assets.
++ Outputs to ./public/styleguide
++ Hologram compilation assets are in ./doc_assets
++ Indexes to basics category
++ These configuration options can be changed by editing `./hologram_config.yml`
+
+###[guard-hologram](https://github.com/kmayer/guard-hologram) Setup
++ Watches everything in ./doc_assets and all assets in ./app/assets; runs `hologram` upon change.
++ Settings editable in ./Guardfile
+
+###Hologram
+Hologram parses your assets (sass, less, css, md, styl, js) for comments of the following format and generates an .html file for each category of component using the _header.html and _footer.html partials Hologram provides.
+
+    /*doc
+    ---
+    title: Alert
+    name: alert
+    category: alerts
+    ---
+    ```html_example
+        <div class='alert'>Hello</div>
+    ```
+    */
+    
+    .alert{
+      color: blue;
+    }
+
+From the comments above, Hologram will create a file called alerts.html that has one component, .alert, and inserts an html snippet demonstrating its usage.

data/Rakefile

@@ -0,0 +1,8 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+require "genspec"
+
+RSpec::Core::RakeTask.new
+
+task default: :spec
+task test: :spec

data/hologram_rails.gemspec

@@ -0,0 +1,26 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'hologram_rails/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "hologram_rails"
+  spec.version       = HologramRails::VERSION
+  spec.authors       = ["Jenny Chou"]
+  spec.email         = ["pair+jchou@pivotallabs.com"]
+  spec.summary       = %q{Hologram with Rails.}
+  spec.description   = %q{Write a longer description. Optional.}
+  spec.homepage      = ""
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files`.split($/)
+  spec.executables   = `git ls-files -- bin/*`.split("\n").map { |f| File.basename(f) }
+  spec.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.5"
+  spec.add_development_dependency "rake"
+  spec.add_development_dependency "rails", ">= 3.0"
+  spec.add_development_dependency "rspec"
+  spec.add_dependency "guard-hologram"
+end

data/lib/generators/hologram_rails/install/install_generator.rb

@@ -0,0 +1,34 @@
+require 'rails/generators'
+
+module HologramRails
+  module Generators
+    class InstallGenerator < ::Rails::Generators::Base
+      desc "init and configure hologram and guard-hologram"
+
+      source_root File.join(File.dirname(__FILE__), "templates")
+
+      def init_hologram
+        `bundle exec hologram init`
+        remove_file('hologram_config.yml')
+        copy_file('hologram_config.yml', 'hologram_config.yml')
+
+        remove_file('doc_assets/_header.html')
+        copy_file('_header.html', 'doc_assets/_header.html')
+        remove_file('doc_assets/_footer.html')
+        copy_file('_footer.html', 'doc_assets/_footer.html')
+      end
+
+      def init_guard
+        `bundle exec guard init`
+        gsub_file('Guardfile', 'guard "hologram"', <<-RUBY)
+          guard 'hologram', config_path: 'hologram_config.yml' do
+            watch(%r{app/assets/stylesheets/.*css})
+            watch(%r{app/assets/javascripts/.*js})
+            watch(%r{doc_assets/*})
+            watch('hologram_config.yml')
+          end
+        RUBY
+      end
+    end
+  end
+end

data/lib/generators/hologram_rails/install/templates/_footer.html

@@ -0,0 +1,6 @@
+                    </div>
+                </div>
+            </section>
+        </div>
+    </body>
+</html>

data/lib/generators/hologram_rails/install/templates/_header.html

@@ -0,0 +1,1755 @@
+<!doctype html>
+<html>
+<head>
+    <title>HologramExample</title>
+    <style type="text/css">
+        @charset "UTF-8";
+        /* https://raw.github.com/trulia/hologram-example/master/templates/static/css/doc.css */
+        .container {
+            max-width: 1128px;
+            width: auto;
+            margin: 0 auto;
+        }
+
+        .content {
+            margin-top: 5px;
+        }
+
+
+        .main > h1 {
+            margin-top: 30px;
+        }
+
+        .main > h1:first-child {
+            margin-top: 0;
+        }
+
+        footer {
+            margin-top: 20px;
+            text-align: center;
+        }
+
+
+        .componentMenu {
+            max-height: 535px;
+            width: 175px;
+            overflow-y: auto;
+        }
+
+        blockquote:before {
+            content: "Design Note:";
+            font-weight: bold;
+        }
+
+        blockquote {
+            border: 1px solid #eee;
+            border-radius: 4px;
+            font-family: "Comic Sans MS";
+            font-size:16px;
+            margin: 10px 0;
+            padding: 5px;
+
+        }
+
+
+        code {
+            padding: 2px 4px;
+            color: #d14;
+            white-space: nowrap;
+            background-color: #f9f9f9;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+
+        div.codeExample, div.jsExample {
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            margin: 10px 0;
+        }
+
+        div.jsExample {
+            border-top: 0px;
+        }
+
+        div.codeExample:before, div.jsExample:before {
+            font-family: "OpenSans", sans-serif;
+            color: #222;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            border-bottom-left-radius: 0;
+            border-top-right-radius: 0;
+            position: relative;
+            padding: 2px;
+            display: block;
+        }
+
+        div.codeExample:before {
+            content: "Example";
+            background-color: #f9f9f9;
+            width: 60px;
+            top: -1px;
+            left: -1px;
+        }
+
+        div.jsExample:before {
+            content: "JS Example";
+            background-color: #fff;
+            width: 80px;
+            top: -11px;
+            left: -11px;
+        }
+
+        div.codeBlock, div.exampleOutput {
+            padding: 10px;
+        }
+
+        div.codeBlock {
+            background-color: #f9f9f9;
+            border-top: 1px solid #ccc;
+            border-bottom-left-radius: 4px;
+            border-bottom-right-radius: 4px;
+        }
+
+        .docSwatch {
+            min-height: 218.21px;
+            border: 1px solid #ccc;
+            padding: 10px 0 0 10px;
+            font-size: 12px;
+            margin-bottom: 5px;
+        }
+
+        .codeExample .line > div:after {
+            content: attr(class);
+            display: block;
+            min-height: 40px;
+            line-height: 40px;
+            background-color: #EEE;
+            text-align: center;
+            border-radius: 3px;
+            font-size: 12px;
+        }
+
+        table, table tr, table td, table th {
+            padding: 7px;
+            border: 1px solid #ccc;
+        }
+
+        table th {
+            font-weight: bold;
+        }
+
+        /* https://raw.github.com/trulia/hologram-example/master/templates/static/css/github.css */
+
+        hll { background-color: #ffffcc; }
+        .c { color: #999988; font-style: italic; } /* Comment */
+        .err { color: #a61717; background-color: #e3d2d2; } /* Error */
+        .k { color: #000000; font-weight: bold; } /* Keyword */
+        .o { color: #000000; font-weight: bold; } /* Operator */
+        .cm { color: #999988; font-style: italic; } /* Comment.Multiline */
+        .cp { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Preproc */
+        .c1 { color: #999988; font-style: italic; } /* Comment.Single */
+        .cs { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Special */
+        .gd { color: #000000; background-color: #ffdddd; } /* Generic.Deleted */
+        .ge { color: #000000; font-style: italic; } /* Generic.Emph */
+        .gr { color: #aa0000; } /* Generic.Error */
+        .gh { color: #999999; } /* Generic.Heading */
+        .gi { color: #000000; background-color: #ddffdd; } /* Generic.Inserted */
+        .go { color: #888888; } /* Generic.Output */
+        .gp { color: #555555; } /* Generic.Prompt */
+        .gs { font-weight: bold; } /* Generic.Strong */
+        .gu { color: #aaaaaa; } /* Generic.Subheading */
+        .gt { color: #aa0000; } /* Generic.Traceback */
+        .kc { color: #000000; font-weight: bold; } /* Keyword.Constant */
+        .kd { color: #000000; font-weight: bold; } /* Keyword.Declaration */
+        .kn { color: #000000; font-weight: bold; } /* Keyword.Namespace */
+        .kp { color: #000000; font-weight: bold; } /* Keyword.Pseudo */
+        .kr { color: #000000; font-weight: bold; } /* Keyword.Reserved */
+        .kt { color: #445588; font-weight: bold; } /* Keyword.Type */
+        .m { color: #009999; } /* Literal.Number */
+        .s { color: #d01040; } /* Literal.String */
+        .na { color: #008080; } /* Name.Attribute */
+        .nb { color: #0086B3; } /* Name.Builtin */
+        .nc { color: #445588; font-weight: bold; } /* Name.Class */
+        .no { color: #008080; } /* Name.Constant */
+        .nd { color: #3c5d5d; font-weight: bold; } /* Name.Decorator */
+        .ni { color: #800080; } /* Name.Entity */
+        .ne { color: #990000; font-weight: bold; } /* Name.Exception */
+        .nf { color: #990000; font-weight: bold; } /* Name.Function */
+        .nl { color: #990000; font-weight: bold; } /* Name.Label */
+        .nn { color: #555555; } /* Name.Namespace */
+        .nt { color: #000080; } /* Name.Tag */
+        .nv { color: #008080; } /* Name.Variable */
+        .ow { color: #000000; font-weight: bold; } /* Operator.Word */
+        .w { color: #bbbbbb; } /* Text.Whitespace */
+        .mf { color: #009999; } /* Literal.Number.Float */
+        .mh { color: #009999; } /* Literal.Number.Hex */
+        .mi { color: #009999; } /* Literal.Number.Integer */
+        .mo { color: #009999; } /* Literal.Number.Oct */
+        .sb { color: #d01040; } /* Literal.String.Backtick */
+        .sc { color: #d01040; } /* Literal.String.Char */
+        .sd { color: #d01040; } /* Literal.String.Doc */
+        .s2 { color: #d01040; } /* Literal.String.Double */
+        .se { color: #d01040; } /* Literal.String.Escape */
+        .sh { color: #d01040; } /* Literal.String.Heredoc */
+        .si { color: #d01040; } /* Literal.String.Interpol */
+        .sx { color: #d01040; } /* Literal.String.Other */
+        .sr { color: #009926; } /* Literal.String.Regex */
+        .s1 { color: #d01040; } /* Literal.String.Single */
+        .ss { color: #990073; } /* Literal.String.Symbol */
+        .bp { color: #999999; } /* Name.Builtin.Pseudo */
+        .vc { color: #008080; } /* Name.Variable.Class */
+        .vg { color: #008080; } /* Name.Variable.Global */
+        .vi { color: #008080; } /* Name.Variable.Instance */
+        .il { color: #009999; } /* Literal.Number.Integer.Long */
+
+        /* https://raw.github.com/trulia/hologram-example/master/build/css/screen.css */
+
+        article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
+            display: block;
+        }
+
+        audio, canvas, video {
+            display: inline-block;
+            *display: inline;
+            *zoom: 1;
+        }
+
+        audio:not([controls]) {
+            display: none;
+            height: 0;
+        }
+
+        [hidden] {
+            display: none;
+        }
+
+        html {
+            font-size: 100%;
+            -webkit-text-size-adjust: 100%;
+            -ms-text-size-adjust: 100%
+        }
+
+        body {
+            margin: 0;
+        }
+
+        a:focus {
+            outline: thin dotted;
+        }
+
+        a:active, a:hover {
+            outline: 0;
+        }
+
+        b, strong {
+            font-weight: bold;
+        }
+
+        dfn {
+            font-style: italic;
+        }
+
+        pre {
+            white-space: pre;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+
+        q {
+            quotes: none;
+        }
+
+        q:before, q:after {
+            content: '';
+            content: none;
+        }
+
+        small {
+            font-size: 80%
+        }
+
+        sub, sup {
+            font-size: 75%;
+            line-height: 0;
+            position: relative;
+            vertical-align: baseline;
+        }
+
+        sup {
+            top: -0.5em;
+        }
+
+        sub {
+            bottom: -0.25em;
+        }
+
+        dl, dt, dd, menu, ol, ul {
+            margin: 0;
+            padding: 0;
+            list-style-type: none;
+        }
+
+        img {
+            border: 0;
+            -ms-interpolation-mode: bicubic;
+        }
+
+        svg:not(:root) {
+            overflow: hidden;
+        }
+
+        figure {
+            margin: 0;
+        }
+
+        form {
+            margin: 0;
+        }
+
+        fieldset {
+            margin: 0;
+            padding: 0;
+        }
+
+        legend {
+            border: 0;
+            padding: 0;
+            white-space: normal;
+            *margin-left: -7px;
+        }
+
+        button, input, select, textarea {
+            font-size: 100%;
+            margin: 0;
+            vertical-align: baseline;
+            *vertical-align: middle;
+        }
+
+        button, input {
+            line-height: normal;
+        }
+
+        button, html input[type="button"], input[type="reset"], input[type="submit"] {
+            -webkit-appearance: button;
+            cursor: pointer;
+            *overflow: visible;
+        }
+
+        button[disabled], input[disabled] {
+            cursor: default;
+        }
+
+        input[type="checkbox"], input[type="radio"] {
+            box-sizing: border-box;
+            padding: 0;
+            *height: 13px;
+            *width: 13px;
+        }
+
+        input[type="search"] {
+            -webkit-appearance: textfield;
+            -moz-box-sizing: content-box;
+            -webkit-box-sizing: content-box;
+            box-sizing: content-box;
+        }
+
+        input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
+            -webkit-appearance: none;
+        }
+
+        button::-moz-focus-inner, input::-moz-focus-inner {
+            border: 0;
+            padding: 0;
+        }
+
+        textarea {
+            overflow: auto;
+            vertical-align: top;
+        }
+
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+
+        th {
+            font-weight: normal;
+        }
+
+        .main {
+            overflow: hidden;
+            *overflow: visible;
+            zoom: 1;
+        }
+
+        .line .lastCol {
+            display: table-cell;
+            vertical-align: top;
+            width: 10000px !important;
+            *display: block;
+            *zoom: 1;
+            *width: auto !important;
+        }
+
+        .line, .box, .box .boxHead, .box .boxFoot, .content > section, .container {
+            zoom: 1;
+        }
+
+        .line:before, .box:before, .box .boxHead:before, .box .boxFoot:before, .content > section:before, .container:before, .line:after, .box:after, .box .boxHead:after, .box .boxFoot:after, .content > section:after, .container:after {
+            content: " ";
+            display: table;
+        }
+
+        .line:after, .box:after, .box .boxHead:after, .box .boxFoot:after, .content > section:after, .container:after {
+            clear: both;
+        }
+
+        .listInline > li {
+            display: inline-block;
+            *display: inline;
+            *zoom: 1;
+        }
+
+        .hideVisually {
+            border: 0;
+            clip: rect(0 0 0 0);
+            height: 1px;
+            margin: -1px;
+            overflow: hidden;
+            padding: 0;
+            position: absolute;
+            width: 1px;
+        }
+
+        .hideVisually.focusable:active, .hideVisually.focusable:focus {
+            clip: auto;
+            height: auto;
+            margin: 0;
+            overflow: visible;
+            position: static;
+            width: auto;
+        }
+
+        .hideText {
+            background-color: transparent;
+            border: 0;
+            overflow: hidden;
+            *text-indent: -9999px;
+        }
+
+        .hideText:before {
+            content: "";
+            display: block;
+            width: 0;
+            height: 100%
+        }
+
+        .hideFully {
+            display: none !important;
+            visibility: hidden;
+        }
+
+        .txtC, table .txtC, table tr .txtC {
+            text-align: center;
+        }
+
+        .txtL, table .txtL, table tr .txtL {
+            text-align: left;
+        }
+
+        .txtR, table .txtR, table tr .txtR {
+            text-align: right;
+        }
+
+        .txtT, table .txtT, table tr .txtT {
+            vertical-align: top;
+        }
+
+        .txtB, table .txtB, table tr .txtB {
+            vertical-align: bottom;
+        }
+
+        .txtM, table .txtM, table tr .txtM {
+            vertical-align: middle;
+        }
+
+        p, .headingDoubleSub, ol, ul, .table {
+            margin-top: 5px;
+            margin-bottom: 5px;
+        }
+
+        .box {
+            margin-top: 21px;
+            margin-bottom: 21px;
+        }
+
+        table h1, table h2, table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl, table blockquote, table .media, table pre {
+            margin-left: 0;
+            margin-right: 0;
+        }
+
+        .pan {
+            padding: 0 !important;
+        }
+
+        .man {
+            margin: 0 !important;
+        }
+
+        .pas {
+            padding: 5px !important;
+        }
+
+        .mas {
+            margin: 5px !important;
+        }
+
+        .pam {
+            padding: 10px !important;
+        }
+
+        .mam {
+            margin: 10px !important;
+        }
+
+        .pal {
+            padding: 21px !important;
+        }
+
+        .mal {
+            margin: 21px !important;
+        }
+
+        .pvn {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+        }
+
+        .mvn {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+        }
+
+        .pvs {
+            padding-top: 5px !important;
+            padding-bottom: 5px !important;
+        }
+
+        .mvs {
+            margin-top: 5px !important;
+            margin-bottom: 5px !important;
+        }
+
+        .pvm {
+            padding-top: 10px !important;
+            padding-bottom: 10px !important;
+        }
+
+        .mvm {
+            margin-top: 10px !important;
+            margin-bottom: 10px !important;
+        }
+
+        .pvl {
+            padding-top: 21px !important;
+            padding-bottom: 21px !important;
+        }
+
+        .mvl {
+            margin-top: 21px !important;
+            margin-bottom: 21px !important;
+        }
+
+        .phn {
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+        }
+
+        .mhn {
+            margin-left: 0 !important;
+            margin-right: 0 !important;
+        }
+
+        .phs {
+            padding-left: 5px !important;
+            padding-right: 5px !important;
+        }
+
+        .mhs {
+            margin-left: 5px !important;
+            margin-right: 5px !important;
+        }
+
+        .phm {
+            padding-left: 10px !important;
+            padding-right: 10px !important;
+        }
+
+        .mhm {
+            margin-left: 10px !important;
+            margin-right: 10px !important;
+        }
+
+        .phl {
+            padding-left: 21px !important;
+            padding-right: 21px !important;
+        }
+
+        .mhl {
+            margin-left: 21px !important;
+            margin-right: 21px !important;
+        }
+
+        .ptn {
+            padding-top: 0 !important;
+        }
+
+        .mtn {
+            margin-top: 0 !important;
+        }
+
+        .pts {
+            padding-top: 5px !important;
+        }
+
+        .mts {
+            margin-top: 5px !important;
+        }
+
+        .ptm {
+            padding-top: 10px !important;
+        }
+
+        .mtm {
+            margin-top: 10px !important;
+        }
+
+        .ptl {
+            padding-top: 21px !important;
+        }
+
+        .mtl {
+            margin-top: 21px !important;
+        }
+
+        .prn {
+            padding-right: 0 !important;
+        }
+
+        .mrn {
+            margin-right: 0 !important;
+        }
+
+        .prs {
+            padding-right: 5px !important;
+        }
+
+        .mrs {
+            margin-right: 5px !important;
+        }
+
+        .prm {
+            padding-right: 10px !important;
+        }
+
+        .mrm {
+            margin-right: 10px !important;
+        }
+
+        .prl {
+            padding-right: 21px !important;
+        }
+
+        .mrl {
+            margin-right: 21px !important;
+        }
+
+        .pbn {
+            padding-bottom: 0 !important;
+        }
+
+        .mbn {
+            margin-bottom: 0 !important;
+        }
+
+        .pbs {
+            padding-bottom: 5px !important;
+        }
+
+        .mbs {
+            margin-bottom: 5px !important;
+        }
+
+        .pbm {
+            padding-bottom: 10px !important;
+        }
+
+        .mbm {
+            margin-bottom: 10px !important;
+        }
+
+        .pbl {
+            padding-bottom: 21px !important;
+        }
+
+        .mbl {
+            margin-bottom: 21px !important;
+        }
+
+        .pln {
+            padding-left: 0 !important;
+        }
+
+        .mln {
+            margin-left: 0 !important;
+        }
+
+        .pls {
+            padding-left: 5px !important;
+        }
+
+        .mls {
+            margin-left: 5px !important;
+        }
+
+        .plm {
+            padding-left: 10px !important;
+        }
+
+        .mlm {
+            margin-left: 10px !important;
+        }
+
+        .pll {
+            padding-left: 21px !important;
+        }
+
+        .mll {
+            margin-left: 21px !important;
+        }
+
+        @font-face {
+            font-family: "OpenSans";
+            src: url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.eot");
+            src: url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.woff") format("woff"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.ttf") format("truetype"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.svg#OpenSansLight") format("svg");
+            font-weight: 300;
+            font-style: normal;
+        }
+
+        @font-face {
+            font-family: "OpenSans";
+            src: url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.eot");
+            src: url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.woff") format("woff"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.ttf") format("truetype"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.svg#OpenSansRegular") format("svg");
+            font-weight: 400;
+            font-style: normal;
+        }
+
+        @font-face {
+            font-family: "OpenSans";
+            src: url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.eot");
+            src: url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.woff") format("woff"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.ttf") format("truetype"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.svg#OpenSansBold") format("svg");
+            font-weight: 600;
+            font-style: normal;
+        }
+
+        body {
+            font-size: 14px;
+            font-size: .875rem;
+            line-height: 1.5em;
+            color: #222;
+        }
+
+        body, input, select, textarea, button {
+            font-family: OpenSans, sans-serif;
+        }
+
+        h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
+            font-weight: 300;
+            font-style: normal;
+        }
+
+        h1, .h1 {
+            font-size: 36px;
+            font-size: 2.25rem;
+            line-height: 1.3;
+            margin: 5px 0;
+            font-weight: bold;
+        }
+
+        h2, .h2 {
+            font-size: 28px;
+            font-size: 1.75rem;
+            line-height: 1.4;
+            margin: 5px 0;
+        }
+
+        h3, .h3 {
+            font-size: 24px;
+            font-size: 1.5rem;
+            line-height: 1.4;
+            margin: 5px 0;
+        }
+
+        h4, .h4 {
+            font-size: 20px;
+            font-size: 1.25rem;
+            line-height: 1.4;
+            margin: 5px 0;
+        }
+
+        h5, .h5 {
+            font-size: 16px;
+            font-size: 1rem;
+            line-height: 1.5;
+            margin: 5px 0;
+            font-weight: bold;
+        }
+
+        h6, .h6 {
+            font-size: 14px;
+            font-size: .875rem;
+            line-height: 1.5;
+            margin: 5px 0;
+            font-weight: bold;
+        }
+
+        .h7 {
+            font-size: 12px;
+            font-size: .75rem;
+            line-height: 1.6;
+            margin: 5px 0;
+        }
+
+        .headingDoubleSuper {
+            display: block;
+            clear: both;
+            min-width: 10px;
+        }
+
+        .headingDoubleSub {
+            font-size: 14px;
+            font-size: .875rem;
+            display: block;
+            float: left;
+            font-weight: normal;
+            line-height: 1.5;
+        }
+
+        .headingDoubleInline {
+            display: inline-block;
+        }
+
+        pre, code {
+            font-family: Menlo, Consolas, Monaco, "Lucida Console", monospace;
+        }
+
+        .typeWarning {
+            color: #cc2114;
+        }
+
+        .typeHighlight {
+            color: #5eab1f;
+        }
+
+        .typeLowlight {
+            color: #999;
+        }
+
+        .typeReversed1 {
+            color: white;
+        }
+
+        .typeReversed2 {
+            color: #eff6e9;
+        }
+
+        .typeDeemphasize {
+            font-weight: 300 !important;
+        }
+
+        .typeWeightNormal {
+            font-weight: normal !important;
+        }
+
+        .typeEmphasize {
+            font-weight: bold !important;
+        }
+
+        .cols1 {
+            width: 4.16667% !important;
+            *width: 2.30496% !important;
+        }
+
+        .cols2 {
+            width: 8.33333% !important;
+            *width: 6.47163% !important;
+        }
+
+        .cols3 {
+            width: 12.5% !important;
+            *width: 10.6383% !important;
+        }
+
+        .cols4 {
+            width: 16.66667% !important;
+            *width: 14.80496% !important;
+        }
+
+        .cols5 {
+            width: 20.83333% !important;
+            *width: 18.97163% !important;
+        }
+
+        .cols6 {
+            width: 25% !important;
+            *width: 23.1383% !important;
+        }
+
+        .cols7 {
+            width: 29.16667% !important;
+            *width: 27.30496% !important;
+        }
+
+        .cols8 {
+            width: 33.33333% !important;
+            *width: 31.47163% !important;
+        }
+
+        .cols9 {
+            width: 37.5% !important;
+            *width: 35.6383% !important;
+        }
+
+        .cols10 {
+            width: 41.66667% !important;
+            *width: 39.80496% !important;
+        }
+
+        .cols11 {
+            width: 45.83333% !important;
+            *width: 43.97163% !important;
+        }
+
+        .cols12 {
+            width: 50% !important;
+            *width: 48.1383% !important;
+        }
+
+        .cols13 {
+            width: 54.16667% !important;
+            *width: 52.30496% !important;
+        }
+
+        .cols14 {
+            width: 58.33333% !important;
+            *width: 56.47163% !important;
+        }
+
+        .cols15 {
+            width: 62.5% !important;
+            *width: 60.6383% !important;
+        }
+
+        .cols16 {
+            width: 66.66667% !important;
+            *width: 64.80496% !important;
+        }
+
+        .cols17 {
+            width: 70.83333% !important;
+            *width: 68.97163% !important;
+        }
+
+        .cols18 {
+            width: 75% !important;
+            *width: 73.1383% !important;
+        }
+
+        .cols19 {
+            width: 79.16667% !important;
+            *width: 77.30496% !important;
+        }
+
+        .cols20 {
+            width: 83.33333% !important;
+            *width: 81.47163% !important;
+        }
+
+        .cols21 {
+            width: 87.5% !important;
+            *width: 85.6383% !important;
+        }
+
+        .cols22 {
+            width: 91.66667% !important;
+            *width: 89.80496% !important;
+        }
+
+        .cols23 {
+            width: 95.83333% !important;
+            *width: 93.97163% !important;
+        }
+
+        .cols24 {
+            width: 100% !important;
+            *width: 98.1383% !important;
+        }
+
+        .line {
+            margin-left: -21px;
+        }
+
+        .line .col {
+            min-height: 1px;
+            float: left;
+            zoom: 1;
+            -webkit-box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            box-sizing: border-box;
+            padding-left: 21px;
+        }
+
+        .line .colExt {
+            float: right;
+            zoom: 1;
+            padding: 0 0 0 21px;
+        }
+
+        .line .lastCol {
+            float: none;
+            *display: block;
+            *width: auto !important;
+            *zoom: 1;
+        }
+
+        .line .col:last-child {
+            display: table-cell;
+            float: none;
+            vertical-align: top;
+            width: 10000px !important;
+        }
+
+        a, a:hover, a:focus, .linkLowlight {
+            text-decoration: none;
+        }
+
+        a {
+            color: #1885f0;
+        }
+
+        a:hover, a:focus {
+            color: #5eab1f;
+        }
+
+        .linkLowlight {
+            color: #999;
+        }
+
+        .linkLowlight:hover, .linkLowlight:focus {
+            color: #5eab1f;
+        }
+
+        .linkForward:after {
+            margin-left: .35714em;
+            content: "\00BB"
+        }
+
+        .linkBack:before {
+            margin-right: .35714em;
+            content: "\00AB"
+        }
+
+        .backgroundBasic {
+            background-color: white;
+        }
+
+        .backgroundLowlight {
+            background-color: #f9f9f9;
+        }
+
+        .backgroundHighlight {
+            background-color: #5eab1f;
+        }
+
+        .backgroundInverse {
+            background-color: #222;
+        }
+
+        .box {
+            position: relative;
+        }
+
+        .box .boxHead, .box .boxFoot {
+            padding: 0;
+            margin: 0 21px;
+        }
+
+        .box .boxBody {
+            padding: 0 21px 1px;
+        }
+
+        .boxHighlight {
+            border: 1px solid #e9e9e9;
+            -webkit-border-radius: 6px;
+            -moz-border-radius: 6px;
+            -ms-border-radius: 6px;
+            -o-border-radius: 6px;
+            border-radius: 6px;
+            -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.17);
+            -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.17);
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.17);
+        }
+
+        .boxBasic {
+            border: 1px solid #e9e9e9;
+            -webkit-border-radius: 6px;
+            -moz-border-radius: 6px;
+            -ms-border-radius: 6px;
+            -o-border-radius: 6px;
+            border-radius: 6px;
+        }
+
+        .boxHeadBasic {
+            border-bottom: solid 1px #e9e9e9;
+        }
+
+        .boxFootBasic {
+            border-top: solid 1px #e9e9e9;
+        }
+
+        .boxClose {
+            border: 0;
+            position: absolute;
+            cursor: pointer;
+            background-color: transparent;
+        }
+
+        .boxClose {
+            top: 3px;
+            right: 6px;
+            width: 20px;
+            height: 20px;
+            text-align: center;
+            color: #999;
+            font-size: 14px;
+            font-size: .875rem;
+        }
+
+        .boxClose:hover, .boxClose:focus {
+            color: #222;
+        }
+
+        ol, ul {
+            list-style-type: none;
+        }
+
+        ol > li, ul > li {
+            margin: .2em 0;
+        }
+
+        .listBordered > li, .listBorderedHover > li {
+            padding: 10px;
+            border-top: 1px solid #e9e9e9;
+        }
+
+        .listBordered > li:first-child, .listBorderedHover > li:first-child {
+            border-top: 1px solid transparent;
+        }
+
+        .listBorderedHover > li {
+            margin: 0;
+        }
+
+        .listBorderedHover > li:hover {
+            background-color: #f9f9f9;
+        }
+
+        .listInline > li {
+            vertical-align: middle;
+            padding-right: 10px;
+        }
+
+        .lvn > li {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+
+        .lvs > li {
+            padding-top: 5px;
+            padding-bottom: 5px;
+        }
+
+        .lvm > li {
+            padding-top: 10px;
+            padding-bottom: 10px;
+        }
+
+        .lvl > li {
+            padding-top: 21px;
+            padding-bottom: 21px;
+        }
+
+        .lhn > li {
+            padding-left: 0;
+            padding-right: 0;
+        }
+
+        .lhs > li {
+            padding-left: 5px;
+            padding-right: 5px;
+        }
+
+        .lhm > li {
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+
+        .lhl > li {
+            padding-left: 21px;
+            padding-right: 21px;
+        }
+
+        .toggle {
+            position: relative;
+            cursor: pointer;
+        }
+
+        .toggleArrow .before, .toggleArrow:before {
+            content: "\25BA";
+            display: inline-block;
+            width: 1.3em;
+            font-size: .9em;
+            text-align: center;
+        }
+
+        .toggleArrowActive:before {
+            content: "\25BC"
+        }
+
+        .toggleArrow:hover .before {
+            text-decoration: none;
+        }
+
+        .toggleArrow .active, .toggleActive .inactive {
+            display: none;
+        }
+
+        .toggleActive .active {
+            display: inline-block;
+        }
+
+        .toggleActive .inactive {
+            display: none;
+        }
+
+        .frameThumb, .frameSmall, .frameStandard, .frameStacked {
+            display: inline-block;
+            *display: inline;
+            *zoom: 1;
+            *border: 1px solid #e9e9e9;
+            -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
+            -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
+        }
+
+        .frameThumb img, .frameSmall img, .frameStandard img, .frameStacked img {
+            display: block;
+        }
+
+        .frameThumb .polaroid, .frameSmall .polaroid, .frameStandard .polaroid, .frameStacked .polaroid {
+            margin-top: 5px;
+        }
+
+        .frameThumb {
+            padding: 2px;
+        }
+
+        .frameSmall {
+            padding: 6px;
+        }
+
+        .frameStandard {
+            padding: 8px;
+        }
+
+        .frameStacked {
+            padding: 8px;
+            position: relative;
+            background-color: #fff;
+        }
+
+        .frameStacked:before, .frameStacked:after {
+            -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
+            -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            z-index: -999;
+            content: "";
+            background-color: #f9f9f9;
+        }
+
+        .frameStacked:before {
+            left: 5px;
+            top: 0;
+            -webkit-transform: rotate(1deg);
+            -moz-transform: rotate(1deg);
+            -ms-transform: rotate(1deg);
+            -o-transform: rotate(1deg);
+            transform: rotate(1deg);
+        }
+
+        .frameStacked:after {
+            right: 5px;
+            top: 0;
+            -webkit-transform: rotate(-1deg);
+            -moz-transform: rotate(-1deg);
+            -ms-transform: rotate(-1deg);
+            -o-transform: rotate(-1deg);
+            transform: rotate(-1deg);
+        }
+
+        .badgeStandard, .badgePrimary, .badgeSecondary, .badgeTertiary {
+            -webkit-border-radius: 3px;
+            -moz-border-radius: 3px;
+            -ms-border-radius: 3px;
+            -o-border-radius: 3px;
+            border-radius: 3px;
+            font-size: 12px;
+            font-size: .75rem;
+            padding: .35714em .42857em .21429em;
+            display: inline-block;
+            color: white;
+            line-height: 1;
+            text-transform: uppercase;
+        }
+
+        .badgeStandard {
+            background-color: #999;
+        }
+
+        .badgePrimary {
+            background-color: #ff5c00;
+        }
+
+        .badgeSecondary {
+            background-color: #5eab1f;
+        }
+
+        .badgeTertiary {
+            background-color: #cc2114;
+        }
+
+        button {
+            background: 0;
+            border: 0;
+        }
+
+        .btn {
+            padding: .5em 1em;
+            margin: 0;
+            display: inline-block;
+            font-weight: normal;
+            line-height: normal;
+            font-size: 14px;
+            font-size: .875rem;
+            text-decoration: none;
+            cursor: pointer;
+            border: 0;
+            background: 0;
+            text-align: center;
+            border: 1px solid #ccc;
+            -webkit-border-radius: 4px;
+            -moz-border-radius: 4px;
+            -ms-border-radius: 4px;
+            -o-border-radius: 4px;
+            border-radius: 4px;
+        }
+
+        .btnSml {
+            font-size: 12px;
+            font-size: .75rem;
+            -webkit-border-radius: 4px;
+            -moz-border-radius: 4px;
+            -ms-border-radius: 4px;
+            -o-border-radius: 4px;
+            border-radius: 4px;
+        }
+
+        .btnLrg {
+            font-size: 16px;
+            font-size: 1rem;
+            line-height: 1.6;
+            -webkit-border-radius: 4px;
+            -moz-border-radius: 4px;
+            -ms-border-radius: 4px;
+            -o-border-radius: 4px;
+            border-radius: 4px;
+        }
+
+        .btnFullWidth {
+            width: 100%
+        }
+
+        .btnDefault, a.btnDefault {
+            border: 1px #d7d7d7 solid;
+            background: #f3f3f3;
+            color: #222;
+            text-shadow: 0 1px 0 white;
+            -webkit-box-shadow: 0 1px 0 #ccc;
+            -moz-box-shadow: 0 1px 0 #ccc;
+            box-shadow: 0 1px 0 #ccc;
+        }
+
+        .btnDefault:hover, .btnDefault:focus {
+            background: #f6f6f6;
+        }
+
+        .btnDefault:active {
+            position: relative;
+            top: 1px;
+            -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
+            -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
+            box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
+        }
+
+        .btnPrimary, a.btnPrimary, .btnDanger, a.btnDanger {
+            color: white;
+            text-shadow: 0;
+        }
+
+        .btnPrimary, a.btnPrimary {
+            border: 1px #d14b00 solid;
+            background: #ff5c00;
+            -webkit-box-shadow: 0 1px 0 #d35500;
+            -moz-box-shadow: 0 1px 0 #d35500;
+            box-shadow: 0 1px 0 #d35500;
+        }
+
+        .btnPrimary:hover, .btnPrimary:focus {
+            background: #ff660f;
+        }
+
+        .btnPrimary:active {
+            position: relative;
+            top: 1px;
+            -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
+            -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
+            box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
+        }
+
+        .btnDanger, a.btnDanger {
+            border: 1px #a21a10 solid;
+            background: #cc2114;
+            -webkit-box-shadow: 0 1px 0 #d35500;
+            -moz-box-shadow: 0 1px 0 #d35500;
+            box-shadow: 0 1px 0 #d35500;
+        }
+
+        .btnDanger:hover, .btnDanger:focus {
+            background: #da2315;
+        }
+
+        .btnDanger:active {
+            position: relative;
+            top: 1px;
+            -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
+            -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
+            box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
+        }
+
+        .btn[disabled], .btn[disabled]:hover, .btn[disabled]:focus .btn[disabled]:active, .btnDisabled, a.btnDisabled, .btnDisabled:hover, .btnDisabled:focus, .btnDisabled:active {
+            border: 0;
+            background: #ccc;
+            color: #999;
+            text-shadow: 0;
+            cursor: default;
+        }
+
+        .btn[disabled]:active, .btnDisabled:active {
+            position: static;
+            color: #999;
+            box-shadow: none;
+        }
+
+        .btnLink {
+            color: #1885f0;
+            border: 1px solid transparent;
+        }
+
+        .btnLink:hover, .btnLink:focus {
+            color: #5eab1f;
+        }
+
+        .table {
+            width: 100%
+        }
+
+        .table thead th {
+            font-weight: bold;
+            color: #222;
+        }
+
+        .table th, .table td {
+            padding: 8px;
+        }
+
+        .tableBasic th, .tableBasic td {
+            border: 1px solid #e9e9e9;
+        }
+
+        .tan td, .tan th {
+            padding: 0;
+        }
+
+        .tas td, .tas th {
+            padding: 5px;
+        }
+
+        .tam td, .tam th {
+            padding: 10px;
+        }
+
+        .tal td, .tal th {
+            padding: 21px;
+        }
+
+        .tvn td, .tvn th {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+
+        .tvs td, .tvs th {
+            padding-top: 5px;
+            padding-bottom: 5px;
+        }
+
+        .tvm td, .tvm th {
+            padding-top: 10px;
+            padding-bottom: 10px;
+        }
+
+        .tvl td, .tvl th {
+            padding-top: 21px;
+            padding-bottom: 21px;
+        }
+
+        .thn td, .thn th {
+            padding-left: 0;
+            padding-right: 0;
+        }
+
+        .ths td, .ths th {
+            padding-left: 5px;
+            padding-right: 5px;
+        }
+
+        .thm td, .thm th {
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+
+        .thl td, .thl th {
+            padding-left: 21px;
+            padding-right: 21px;
+        }
+
+        body {
+            background: white;
+        }
+
+        .content > section, .container {
+            width: 1128px;
+            margin: 0 auto;
+        }
+
+        .main[role="main"] {
+            position: relative;
+            top: -10px;
+        }
+
+        .content > section, .content .container {
+            margin-top: 0;
+        }
+
+        .skipLink:focus {
+            width: 100%;
+            padding: 5px 0;
+            display: block;
+            position: absolute;
+            z-index: 100;
+            text-indent: 5px;
+            color: #fff;
+            background: #5eab1f;
+        }
+
+        .header {
+            padding-bottom: 15px;
+            *position: relative;
+            *z-index: 100;
+            background: white;
+            border-bottom: 1px solid #ccc;
+        }
+
+        .headerSubSection {
+            margin: 1px 0;
+            font-size: 11px;
+            font-size: .6875rem;
+            text-align: right;
+            line-height: 1;
+        }
+
+        .headerSubSection a {
+            color: #222;
+        }
+
+        .headerSubSection .highlight {
+            display: inline-block;
+            padding: 2px 10px;
+            color: #fff;
+            -webkit-border-radius: 5px 5px 0 0;
+            -moz-border-radius: 5px 5px 0 0;
+            -ms-border-radius: 5px 5px 0 0;
+            -o-border-radius: 5px 5px 0 0;
+            border-radius: 5px 5px 0 0;
+            background: #888;
+        }
+
+        .headerSubSection .listInline {
+            margin: 0;
+        }
+
+        .headerMainSection {
+            position: relative;
+        }
+
+        .headerMainSection .logo {
+            position: absolute;
+            left: 0;
+            top: -1px;
+        }
+
+        .menuWrap {
+            margin-left: 97px;
+        }
+
+        .content {
+            padding-top: 5px;
+        }
+
+        .content > section {
+            margin-top: 5px;
+        }
+
+        .sideBar {
+            width: 185px;
+            margin-right: 20px;
+            float: left;
+        }
+
+        .main {
+            float: none;
+            *display: block;
+            *width: auto;
+            *zoom: 1;
+        }
+
+        .aside {
+            width: 300px;
+            margin-left: 20px;
+            float: right;
+        }
+
+        .footer {
+            clear: both;
+            margin-top: 40px;
+            font-size: 12px;
+            font-size: .75rem;
+        }
+
+        .footerBox {
+            border-top: 5px solid #5eab1f;
+        }
+
+        .footerBox .boxBody {
+            margin: 10px 0;
+        }
+
+        .footerGroup a {
+            color: #222;
+        }
+
+        .footerGroup a:hover, .footerGroup a:focus {
+            color: #5eab1f;
+            text-decoration: underline;
+        }
+
+        .footerCol {
+            width: 125px;
+        }
+
+        .footerGroupHeading {
+            float: left;
+        }
+
+        .footerGroupHeading {
+            width: 120px;
+            margin: 0;
+            clear: right;
+            font-weight: bold;
+        }
+
+        .footerGroupList {
+            margin: 0;
+        }
+
+        .footerGroupList > li {
+            margin: 0;
+        }
+
+        .footerDisclaimer {
+            float: left;
+        }
+
+        .footerNoteAside {
+            float: right;
+        }
+
+    </style>
+    <link rel=stylesheet href="/assets/application.css" type="text/css">
+    <script rel=javascript src="/assets/application.js" type="text/javascript"></script>
+</head>
+<header class="header pbn" role="banner">
+    <div class="backgroundHighlight typeReversed1">
+        <div class="container">
+            <h1 class="h2 mvs">My Styleguide</h1>
+        </div>
+    </div>
+    <div class="backgroundLowlight typeReversed1">
+        <div class="container">
+            <span>
+                <ul class="docNav listInline">
+                    <% for c in categories %>
+                        <li><a href="/styleguide/<%= c[0] %>.html"><%= c[0] %></a></li>
+                    <% end %>
+                </ul>
+            </span>
+        </div>
+    </div>
+</header>
+<div class="content">
+    <section>
+        <div class="line">
+            <div class="col cols4">
+                <div class="componentMenu box boxBasic backgroundBasic">
+                    <div class="boxBody pan">
+                        <ul class="componentList listBorderedHover">
+                            <% blocks.each do |block| %>
+                                <li><a href="#<%= block[:name] %>"><%= block[:title] %></a></li>
+                            <% end %>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="main col cols20 lastCol">