hologram_rails 0.0.3

Sign up to get free protection for your applications and to get access to all the features.
data/.gitignore ADDED
@@ -0,0 +1,17 @@
1
+ *.gem
2
+ *.rbc
3
+ .bundle
4
+ .config
5
+ .yardoc
6
+ Gemfile.lock
7
+ InstalledFiles
8
+ _yardoc
9
+ coverage
10
+ doc/
11
+ lib/bundler/man
12
+ pkg
13
+ rdoc
14
+ spec/reports
15
+ test/tmp
16
+ test/version_tmp
17
+ tmp
data/.ruby-version ADDED
@@ -0,0 +1 @@
1
+ 2.0.0-p353
data/.rvmrc ADDED
@@ -0,0 +1,62 @@
1
+ #!/usr/bin/env bash
2
+
3
+ # This is an RVM Project .rvmrc file, used to automatically load the ruby
4
+ # development environment upon cd'ing into the directory
5
+
6
+ # First we specify our desired <ruby>[@<gemset>], the @gemset name is optional,
7
+ # Only full ruby name is supported here, for short names use:
8
+ # echo "rvm use 2.0.0" > .rvmrc
9
+ environment_id="ruby-2.0.0-p353@hologram_rails"
10
+
11
+ # Uncomment the following lines if you want to verify rvm version per project
12
+ # rvmrc_rvm_version="1.25.18 (master)" # 1.10.1 seems like a safe start
13
+ # eval "$(echo ${rvm_version}.${rvmrc_rvm_version} | __rvm_awk -F. '{print "[[ "$1*65536+$2*256+$3" -ge "$4*65536+$5*256+$6" ]]"}' )" || {
14
+ # echo "This .rvmrc file requires at least RVM ${rvmrc_rvm_version}, aborting loading."
15
+ # return 1
16
+ # }
17
+
18
+ # First we attempt to load the desired environment directly from the environment
19
+ # file. This is very fast and efficient compared to running through the entire
20
+ # CLI and selector. If you want feedback on which environment was used then
21
+ # insert the word 'use' after --create as this triggers verbose mode.
22
+ if [[ -d "${rvm_path:-$HOME/.rvm}/environments"
23
+ && -s "${rvm_path:-$HOME/.rvm}/environments/$environment_id" ]]
24
+ then
25
+ \. "${rvm_path:-$HOME/.rvm}/environments/$environment_id"
26
+ for __hook in "${rvm_path:-$HOME/.rvm}/hooks/after_use"*
27
+ do
28
+ if [[ -f "${__hook}" && -x "${__hook}" && -s "${__hook}" ]]
29
+ then \. "${__hook}" || true
30
+ fi
31
+ done
32
+ unset __hook
33
+ if (( ${rvm_use_flag:=1} >= 2 )) # display only when forced
34
+ then
35
+ if [[ $- == *i* ]] # check for interactive shells
36
+ then printf "%b" "Using: $(tput setaf 2 2>/dev/null)$GEM_HOME$(tput sgr0 2>/dev/null)
37
+ " # show the user the ruby and gemset they are using in green
38
+ else printf "%b" "Using: $GEM_HOME
39
+ " # don't use colors in non-interactive shells
40
+ fi
41
+ fi
42
+ else
43
+ # If the environment file has not yet been created, use the RVM CLI to select.
44
+ rvm --create "$environment_id" || {
45
+ echo "Failed to create RVM environment '${environment_id}'."
46
+ return 1
47
+ }
48
+ fi
49
+
50
+ # If you use bundler, this might be useful to you:
51
+ # if [[ -s Gemfile ]] && {
52
+ # ! builtin command -v bundle >/dev/null ||
53
+ # builtin command -v bundle | GREP_OPTIONS="" \grep $rvm_path/bin/bundle >/dev/null
54
+ # }
55
+ # then
56
+ # printf "%b" "The rubygem 'bundler' is not installed. Installing it now.\n"
57
+ # gem install bundler
58
+ # fi
59
+ # if [[ -s Gemfile ]] && builtin command -v bundle >/dev/null
60
+ # then
61
+ # bundle install | GREP_OPTIONS="" \grep -vE '^Using|Your bundle is complete'
62
+ # fi
data/Gemfile ADDED
@@ -0,0 +1,6 @@
1
+ source 'https://rubygems.org'
2
+
3
+ gem "bundler"
4
+ gem "activesupport"
5
+ # Specify your gem's dependencies in hologram_rails.gemspec
6
+ gemspec
data/LICENSE ADDED
@@ -0,0 +1,20 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2014 chou
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy of
6
+ this software and associated documentation files (the "Software"), to deal in
7
+ the Software without restriction, including without limitation the rights to
8
+ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9
+ the Software, and to permit persons to whom the Software is furnished to do so,
10
+ subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17
+ FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18
+ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19
+ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20
+ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/LICENSE.txt ADDED
@@ -0,0 +1,22 @@
1
+ Copyright (c) 2014 Jenny Chou
2
+
3
+ MIT License
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining
6
+ a copy of this software and associated documentation files (the
7
+ "Software"), to deal in the Software without restriction, including
8
+ without limitation the rights to use, copy, modify, merge, publish,
9
+ distribute, sublicense, and/or sell copies of the Software, and to
10
+ permit persons to whom the Software is furnished to do so, subject to
11
+ the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be
14
+ included in all copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,47 @@
1
+ #hologram_rails
2
+ <br>A gem to quickly get off the ground using Trulia's [Hologram](https://github.com/trulia/hologram) with a Rails project.
3
+
4
+ ##Installation
5
+ ```ruby
6
+ ./Gemfile
7
+
8
+ gem 'hologram_rails'
9
+ gem 'hologram', github: 'trulia/hologram'
10
+ ```
11
+ (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)
12
+ <br>
13
+ `bundle && rails g hologram_rails:install && bundle exec guard`
14
+ <br>
15
+ 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.
16
+
17
+ ## What it Does
18
+ ### [Hologram](https://github.com/trulia/hologram) Setup
19
+ + Parses all asset files in ./app/assets.
20
+ + Outputs to ./public/styleguide
21
+ + Hologram compilation assets are in ./doc_assets
22
+ + Indexes to basics category
23
+ + These configuration options can be changed by editing `./hologram_config.yml`
24
+
25
+ ###[guard-hologram](https://github.com/kmayer/guard-hologram) Setup
26
+ + Watches everything in ./doc_assets and all assets in ./app/assets; runs `hologram` upon change.
27
+ + Settings editable in ./Guardfile
28
+
29
+ ###Hologram
30
+ 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.
31
+
32
+ /*doc
33
+ ---
34
+ title: Alert
35
+ name: alert
36
+ category: alerts
37
+ ---
38
+ ```html_example
39
+ <div class='alert'>Hello</div>
40
+ ```
41
+ */
42
+
43
+ .alert{
44
+ color: blue;
45
+ }
46
+
47
+ 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 ADDED
@@ -0,0 +1,8 @@
1
+ require "bundler/gem_tasks"
2
+ require "rspec/core/rake_task"
3
+ require "genspec"
4
+
5
+ RSpec::Core::RakeTask.new
6
+
7
+ task default: :spec
8
+ task test: :spec
@@ -0,0 +1,26 @@
1
+ # coding: utf-8
2
+ lib = File.expand_path('../lib', __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require 'hologram_rails/version'
5
+
6
+ Gem::Specification.new do |spec|
7
+ spec.name = "hologram_rails"
8
+ spec.version = HologramRails::VERSION
9
+ spec.authors = ["Jenny Chou"]
10
+ spec.email = ["pair+jchou@pivotallabs.com"]
11
+ spec.summary = %q{Hologram with Rails.}
12
+ spec.description = %q{Write a longer description. Optional.}
13
+ spec.homepage = ""
14
+ spec.license = "MIT"
15
+
16
+ spec.files = `git ls-files`.split($/)
17
+ spec.executables = `git ls-files -- bin/*`.split("\n").map { |f| File.basename(f) }
18
+ spec.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
19
+ spec.require_paths = ["lib"]
20
+
21
+ spec.add_development_dependency "bundler", "~> 1.5"
22
+ spec.add_development_dependency "rake"
23
+ spec.add_development_dependency "rails", ">= 3.0"
24
+ spec.add_development_dependency "rspec"
25
+ spec.add_dependency "guard-hologram"
26
+ end
@@ -0,0 +1,34 @@
1
+ require 'rails/generators'
2
+
3
+ module HologramRails
4
+ module Generators
5
+ class InstallGenerator < ::Rails::Generators::Base
6
+ desc "init and configure hologram and guard-hologram"
7
+
8
+ source_root File.join(File.dirname(__FILE__), "templates")
9
+
10
+ def init_hologram
11
+ `bundle exec hologram init`
12
+ remove_file('hologram_config.yml')
13
+ copy_file('hologram_config.yml', 'hologram_config.yml')
14
+
15
+ remove_file('doc_assets/_header.html')
16
+ copy_file('_header.html', 'doc_assets/_header.html')
17
+ remove_file('doc_assets/_footer.html')
18
+ copy_file('_footer.html', 'doc_assets/_footer.html')
19
+ end
20
+
21
+ def init_guard
22
+ `bundle exec guard init`
23
+ gsub_file('Guardfile', 'guard "hologram"', <<-RUBY)
24
+ guard 'hologram', config_path: 'hologram_config.yml' do
25
+ watch(%r{app/assets/stylesheets/.*css})
26
+ watch(%r{app/assets/javascripts/.*js})
27
+ watch(%r{doc_assets/*})
28
+ watch('hologram_config.yml')
29
+ end
30
+ RUBY
31
+ end
32
+ end
33
+ end
34
+ end
@@ -0,0 +1,6 @@
1
+ </div>
2
+ </div>
3
+ </section>
4
+ </div>
5
+ </body>
6
+ </html>
@@ -0,0 +1,1755 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <title>HologramExample</title>
5
+ <style type="text/css">
6
+ @charset "UTF-8";
7
+ /* https://raw.github.com/trulia/hologram-example/master/templates/static/css/doc.css */
8
+ .container {
9
+ max-width: 1128px;
10
+ width: auto;
11
+ margin: 0 auto;
12
+ }
13
+
14
+ .content {
15
+ margin-top: 5px;
16
+ }
17
+
18
+
19
+ .main > h1 {
20
+ margin-top: 30px;
21
+ }
22
+
23
+ .main > h1:first-child {
24
+ margin-top: 0;
25
+ }
26
+
27
+ footer {
28
+ margin-top: 20px;
29
+ text-align: center;
30
+ }
31
+
32
+
33
+ .componentMenu {
34
+ max-height: 535px;
35
+ width: 175px;
36
+ overflow-y: auto;
37
+ }
38
+
39
+ blockquote:before {
40
+ content: "Design Note:";
41
+ font-weight: bold;
42
+ }
43
+
44
+ blockquote {
45
+ border: 1px solid #eee;
46
+ border-radius: 4px;
47
+ font-family: "Comic Sans MS";
48
+ font-size:16px;
49
+ margin: 10px 0;
50
+ padding: 5px;
51
+
52
+ }
53
+
54
+
55
+ code {
56
+ padding: 2px 4px;
57
+ color: #d14;
58
+ white-space: nowrap;
59
+ background-color: #f9f9f9;
60
+ border: 1px solid #ccc;
61
+ border-radius: 4px;
62
+ }
63
+
64
+ div.codeExample, div.jsExample {
65
+ border: 1px solid #ccc;
66
+ border-radius: 4px;
67
+ margin: 10px 0;
68
+ }
69
+
70
+ div.jsExample {
71
+ border-top: 0px;
72
+ }
73
+
74
+ div.codeExample:before, div.jsExample:before {
75
+ font-family: "OpenSans", sans-serif;
76
+ color: #222;
77
+ border: 1px solid #ccc;
78
+ border-radius: 4px;
79
+ border-bottom-left-radius: 0;
80
+ border-top-right-radius: 0;
81
+ position: relative;
82
+ padding: 2px;
83
+ display: block;
84
+ }
85
+
86
+ div.codeExample:before {
87
+ content: "Example";
88
+ background-color: #f9f9f9;
89
+ width: 60px;
90
+ top: -1px;
91
+ left: -1px;
92
+ }
93
+
94
+ div.jsExample:before {
95
+ content: "JS Example";
96
+ background-color: #fff;
97
+ width: 80px;
98
+ top: -11px;
99
+ left: -11px;
100
+ }
101
+
102
+ div.codeBlock, div.exampleOutput {
103
+ padding: 10px;
104
+ }
105
+
106
+ div.codeBlock {
107
+ background-color: #f9f9f9;
108
+ border-top: 1px solid #ccc;
109
+ border-bottom-left-radius: 4px;
110
+ border-bottom-right-radius: 4px;
111
+ }
112
+
113
+ .docSwatch {
114
+ min-height: 218.21px;
115
+ border: 1px solid #ccc;
116
+ padding: 10px 0 0 10px;
117
+ font-size: 12px;
118
+ margin-bottom: 5px;
119
+ }
120
+
121
+ .codeExample .line > div:after {
122
+ content: attr(class);
123
+ display: block;
124
+ min-height: 40px;
125
+ line-height: 40px;
126
+ background-color: #EEE;
127
+ text-align: center;
128
+ border-radius: 3px;
129
+ font-size: 12px;
130
+ }
131
+
132
+ table, table tr, table td, table th {
133
+ padding: 7px;
134
+ border: 1px solid #ccc;
135
+ }
136
+
137
+ table th {
138
+ font-weight: bold;
139
+ }
140
+
141
+ /* https://raw.github.com/trulia/hologram-example/master/templates/static/css/github.css */
142
+
143
+ hll { background-color: #ffffcc; }
144
+ .c { color: #999988; font-style: italic; } /* Comment */
145
+ .err { color: #a61717; background-color: #e3d2d2; } /* Error */
146
+ .k { color: #000000; font-weight: bold; } /* Keyword */
147
+ .o { color: #000000; font-weight: bold; } /* Operator */
148
+ .cm { color: #999988; font-style: italic; } /* Comment.Multiline */
149
+ .cp { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Preproc */
150
+ .c1 { color: #999988; font-style: italic; } /* Comment.Single */
151
+ .cs { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Special */
152
+ .gd { color: #000000; background-color: #ffdddd; } /* Generic.Deleted */
153
+ .ge { color: #000000; font-style: italic; } /* Generic.Emph */
154
+ .gr { color: #aa0000; } /* Generic.Error */
155
+ .gh { color: #999999; } /* Generic.Heading */
156
+ .gi { color: #000000; background-color: #ddffdd; } /* Generic.Inserted */
157
+ .go { color: #888888; } /* Generic.Output */
158
+ .gp { color: #555555; } /* Generic.Prompt */
159
+ .gs { font-weight: bold; } /* Generic.Strong */
160
+ .gu { color: #aaaaaa; } /* Generic.Subheading */
161
+ .gt { color: #aa0000; } /* Generic.Traceback */
162
+ .kc { color: #000000; font-weight: bold; } /* Keyword.Constant */
163
+ .kd { color: #000000; font-weight: bold; } /* Keyword.Declaration */
164
+ .kn { color: #000000; font-weight: bold; } /* Keyword.Namespace */
165
+ .kp { color: #000000; font-weight: bold; } /* Keyword.Pseudo */
166
+ .kr { color: #000000; font-weight: bold; } /* Keyword.Reserved */
167
+ .kt { color: #445588; font-weight: bold; } /* Keyword.Type */
168
+ .m { color: #009999; } /* Literal.Number */
169
+ .s { color: #d01040; } /* Literal.String */
170
+ .na { color: #008080; } /* Name.Attribute */
171
+ .nb { color: #0086B3; } /* Name.Builtin */
172
+ .nc { color: #445588; font-weight: bold; } /* Name.Class */
173
+ .no { color: #008080; } /* Name.Constant */
174
+ .nd { color: #3c5d5d; font-weight: bold; } /* Name.Decorator */
175
+ .ni { color: #800080; } /* Name.Entity */
176
+ .ne { color: #990000; font-weight: bold; } /* Name.Exception */
177
+ .nf { color: #990000; font-weight: bold; } /* Name.Function */
178
+ .nl { color: #990000; font-weight: bold; } /* Name.Label */
179
+ .nn { color: #555555; } /* Name.Namespace */
180
+ .nt { color: #000080; } /* Name.Tag */
181
+ .nv { color: #008080; } /* Name.Variable */
182
+ .ow { color: #000000; font-weight: bold; } /* Operator.Word */
183
+ .w { color: #bbbbbb; } /* Text.Whitespace */
184
+ .mf { color: #009999; } /* Literal.Number.Float */
185
+ .mh { color: #009999; } /* Literal.Number.Hex */
186
+ .mi { color: #009999; } /* Literal.Number.Integer */
187
+ .mo { color: #009999; } /* Literal.Number.Oct */
188
+ .sb { color: #d01040; } /* Literal.String.Backtick */
189
+ .sc { color: #d01040; } /* Literal.String.Char */
190
+ .sd { color: #d01040; } /* Literal.String.Doc */
191
+ .s2 { color: #d01040; } /* Literal.String.Double */
192
+ .se { color: #d01040; } /* Literal.String.Escape */
193
+ .sh { color: #d01040; } /* Literal.String.Heredoc */
194
+ .si { color: #d01040; } /* Literal.String.Interpol */
195
+ .sx { color: #d01040; } /* Literal.String.Other */
196
+ .sr { color: #009926; } /* Literal.String.Regex */
197
+ .s1 { color: #d01040; } /* Literal.String.Single */
198
+ .ss { color: #990073; } /* Literal.String.Symbol */
199
+ .bp { color: #999999; } /* Name.Builtin.Pseudo */
200
+ .vc { color: #008080; } /* Name.Variable.Class */
201
+ .vg { color: #008080; } /* Name.Variable.Global */
202
+ .vi { color: #008080; } /* Name.Variable.Instance */
203
+ .il { color: #009999; } /* Literal.Number.Integer.Long */
204
+
205
+ /* https://raw.github.com/trulia/hologram-example/master/build/css/screen.css */
206
+
207
+ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
208
+ display: block;
209
+ }
210
+
211
+ audio, canvas, video {
212
+ display: inline-block;
213
+ *display: inline;
214
+ *zoom: 1;
215
+ }
216
+
217
+ audio:not([controls]) {
218
+ display: none;
219
+ height: 0;
220
+ }
221
+
222
+ [hidden] {
223
+ display: none;
224
+ }
225
+
226
+ html {
227
+ font-size: 100%;
228
+ -webkit-text-size-adjust: 100%;
229
+ -ms-text-size-adjust: 100%
230
+ }
231
+
232
+ body {
233
+ margin: 0;
234
+ }
235
+
236
+ a:focus {
237
+ outline: thin dotted;
238
+ }
239
+
240
+ a:active, a:hover {
241
+ outline: 0;
242
+ }
243
+
244
+ b, strong {
245
+ font-weight: bold;
246
+ }
247
+
248
+ dfn {
249
+ font-style: italic;
250
+ }
251
+
252
+ pre {
253
+ white-space: pre;
254
+ white-space: pre-wrap;
255
+ word-wrap: break-word;
256
+ }
257
+
258
+ q {
259
+ quotes: none;
260
+ }
261
+
262
+ q:before, q:after {
263
+ content: '';
264
+ content: none;
265
+ }
266
+
267
+ small {
268
+ font-size: 80%
269
+ }
270
+
271
+ sub, sup {
272
+ font-size: 75%;
273
+ line-height: 0;
274
+ position: relative;
275
+ vertical-align: baseline;
276
+ }
277
+
278
+ sup {
279
+ top: -0.5em;
280
+ }
281
+
282
+ sub {
283
+ bottom: -0.25em;
284
+ }
285
+
286
+ dl, dt, dd, menu, ol, ul {
287
+ margin: 0;
288
+ padding: 0;
289
+ list-style-type: none;
290
+ }
291
+
292
+ img {
293
+ border: 0;
294
+ -ms-interpolation-mode: bicubic;
295
+ }
296
+
297
+ svg:not(:root) {
298
+ overflow: hidden;
299
+ }
300
+
301
+ figure {
302
+ margin: 0;
303
+ }
304
+
305
+ form {
306
+ margin: 0;
307
+ }
308
+
309
+ fieldset {
310
+ margin: 0;
311
+ padding: 0;
312
+ }
313
+
314
+ legend {
315
+ border: 0;
316
+ padding: 0;
317
+ white-space: normal;
318
+ *margin-left: -7px;
319
+ }
320
+
321
+ button, input, select, textarea {
322
+ font-size: 100%;
323
+ margin: 0;
324
+ vertical-align: baseline;
325
+ *vertical-align: middle;
326
+ }
327
+
328
+ button, input {
329
+ line-height: normal;
330
+ }
331
+
332
+ button, html input[type="button"], input[type="reset"], input[type="submit"] {
333
+ -webkit-appearance: button;
334
+ cursor: pointer;
335
+ *overflow: visible;
336
+ }
337
+
338
+ button[disabled], input[disabled] {
339
+ cursor: default;
340
+ }
341
+
342
+ input[type="checkbox"], input[type="radio"] {
343
+ box-sizing: border-box;
344
+ padding: 0;
345
+ *height: 13px;
346
+ *width: 13px;
347
+ }
348
+
349
+ input[type="search"] {
350
+ -webkit-appearance: textfield;
351
+ -moz-box-sizing: content-box;
352
+ -webkit-box-sizing: content-box;
353
+ box-sizing: content-box;
354
+ }
355
+
356
+ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
357
+ -webkit-appearance: none;
358
+ }
359
+
360
+ button::-moz-focus-inner, input::-moz-focus-inner {
361
+ border: 0;
362
+ padding: 0;
363
+ }
364
+
365
+ textarea {
366
+ overflow: auto;
367
+ vertical-align: top;
368
+ }
369
+
370
+ table {
371
+ border-collapse: collapse;
372
+ border-spacing: 0;
373
+ }
374
+
375
+ th {
376
+ font-weight: normal;
377
+ }
378
+
379
+ .main {
380
+ overflow: hidden;
381
+ *overflow: visible;
382
+ zoom: 1;
383
+ }
384
+
385
+ .line .lastCol {
386
+ display: table-cell;
387
+ vertical-align: top;
388
+ width: 10000px !important;
389
+ *display: block;
390
+ *zoom: 1;
391
+ *width: auto !important;
392
+ }
393
+
394
+ .line, .box, .box .boxHead, .box .boxFoot, .content > section, .container {
395
+ zoom: 1;
396
+ }
397
+
398
+ .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 {
399
+ content: " ";
400
+ display: table;
401
+ }
402
+
403
+ .line:after, .box:after, .box .boxHead:after, .box .boxFoot:after, .content > section:after, .container:after {
404
+ clear: both;
405
+ }
406
+
407
+ .listInline > li {
408
+ display: inline-block;
409
+ *display: inline;
410
+ *zoom: 1;
411
+ }
412
+
413
+ .hideVisually {
414
+ border: 0;
415
+ clip: rect(0 0 0 0);
416
+ height: 1px;
417
+ margin: -1px;
418
+ overflow: hidden;
419
+ padding: 0;
420
+ position: absolute;
421
+ width: 1px;
422
+ }
423
+
424
+ .hideVisually.focusable:active, .hideVisually.focusable:focus {
425
+ clip: auto;
426
+ height: auto;
427
+ margin: 0;
428
+ overflow: visible;
429
+ position: static;
430
+ width: auto;
431
+ }
432
+
433
+ .hideText {
434
+ background-color: transparent;
435
+ border: 0;
436
+ overflow: hidden;
437
+ *text-indent: -9999px;
438
+ }
439
+
440
+ .hideText:before {
441
+ content: "";
442
+ display: block;
443
+ width: 0;
444
+ height: 100%
445
+ }
446
+
447
+ .hideFully {
448
+ display: none !important;
449
+ visibility: hidden;
450
+ }
451
+
452
+ .txtC, table .txtC, table tr .txtC {
453
+ text-align: center;
454
+ }
455
+
456
+ .txtL, table .txtL, table tr .txtL {
457
+ text-align: left;
458
+ }
459
+
460
+ .txtR, table .txtR, table tr .txtR {
461
+ text-align: right;
462
+ }
463
+
464
+ .txtT, table .txtT, table tr .txtT {
465
+ vertical-align: top;
466
+ }
467
+
468
+ .txtB, table .txtB, table tr .txtB {
469
+ vertical-align: bottom;
470
+ }
471
+
472
+ .txtM, table .txtM, table tr .txtM {
473
+ vertical-align: middle;
474
+ }
475
+
476
+ p, .headingDoubleSub, ol, ul, .table {
477
+ margin-top: 5px;
478
+ margin-bottom: 5px;
479
+ }
480
+
481
+ .box {
482
+ margin-top: 21px;
483
+ margin-bottom: 21px;
484
+ }
485
+
486
+ 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 {
487
+ margin-left: 0;
488
+ margin-right: 0;
489
+ }
490
+
491
+ .pan {
492
+ padding: 0 !important;
493
+ }
494
+
495
+ .man {
496
+ margin: 0 !important;
497
+ }
498
+
499
+ .pas {
500
+ padding: 5px !important;
501
+ }
502
+
503
+ .mas {
504
+ margin: 5px !important;
505
+ }
506
+
507
+ .pam {
508
+ padding: 10px !important;
509
+ }
510
+
511
+ .mam {
512
+ margin: 10px !important;
513
+ }
514
+
515
+ .pal {
516
+ padding: 21px !important;
517
+ }
518
+
519
+ .mal {
520
+ margin: 21px !important;
521
+ }
522
+
523
+ .pvn {
524
+ padding-top: 0 !important;
525
+ padding-bottom: 0 !important;
526
+ }
527
+
528
+ .mvn {
529
+ margin-top: 0 !important;
530
+ margin-bottom: 0 !important;
531
+ }
532
+
533
+ .pvs {
534
+ padding-top: 5px !important;
535
+ padding-bottom: 5px !important;
536
+ }
537
+
538
+ .mvs {
539
+ margin-top: 5px !important;
540
+ margin-bottom: 5px !important;
541
+ }
542
+
543
+ .pvm {
544
+ padding-top: 10px !important;
545
+ padding-bottom: 10px !important;
546
+ }
547
+
548
+ .mvm {
549
+ margin-top: 10px !important;
550
+ margin-bottom: 10px !important;
551
+ }
552
+
553
+ .pvl {
554
+ padding-top: 21px !important;
555
+ padding-bottom: 21px !important;
556
+ }
557
+
558
+ .mvl {
559
+ margin-top: 21px !important;
560
+ margin-bottom: 21px !important;
561
+ }
562
+
563
+ .phn {
564
+ padding-left: 0 !important;
565
+ padding-right: 0 !important;
566
+ }
567
+
568
+ .mhn {
569
+ margin-left: 0 !important;
570
+ margin-right: 0 !important;
571
+ }
572
+
573
+ .phs {
574
+ padding-left: 5px !important;
575
+ padding-right: 5px !important;
576
+ }
577
+
578
+ .mhs {
579
+ margin-left: 5px !important;
580
+ margin-right: 5px !important;
581
+ }
582
+
583
+ .phm {
584
+ padding-left: 10px !important;
585
+ padding-right: 10px !important;
586
+ }
587
+
588
+ .mhm {
589
+ margin-left: 10px !important;
590
+ margin-right: 10px !important;
591
+ }
592
+
593
+ .phl {
594
+ padding-left: 21px !important;
595
+ padding-right: 21px !important;
596
+ }
597
+
598
+ .mhl {
599
+ margin-left: 21px !important;
600
+ margin-right: 21px !important;
601
+ }
602
+
603
+ .ptn {
604
+ padding-top: 0 !important;
605
+ }
606
+
607
+ .mtn {
608
+ margin-top: 0 !important;
609
+ }
610
+
611
+ .pts {
612
+ padding-top: 5px !important;
613
+ }
614
+
615
+ .mts {
616
+ margin-top: 5px !important;
617
+ }
618
+
619
+ .ptm {
620
+ padding-top: 10px !important;
621
+ }
622
+
623
+ .mtm {
624
+ margin-top: 10px !important;
625
+ }
626
+
627
+ .ptl {
628
+ padding-top: 21px !important;
629
+ }
630
+
631
+ .mtl {
632
+ margin-top: 21px !important;
633
+ }
634
+
635
+ .prn {
636
+ padding-right: 0 !important;
637
+ }
638
+
639
+ .mrn {
640
+ margin-right: 0 !important;
641
+ }
642
+
643
+ .prs {
644
+ padding-right: 5px !important;
645
+ }
646
+
647
+ .mrs {
648
+ margin-right: 5px !important;
649
+ }
650
+
651
+ .prm {
652
+ padding-right: 10px !important;
653
+ }
654
+
655
+ .mrm {
656
+ margin-right: 10px !important;
657
+ }
658
+
659
+ .prl {
660
+ padding-right: 21px !important;
661
+ }
662
+
663
+ .mrl {
664
+ margin-right: 21px !important;
665
+ }
666
+
667
+ .pbn {
668
+ padding-bottom: 0 !important;
669
+ }
670
+
671
+ .mbn {
672
+ margin-bottom: 0 !important;
673
+ }
674
+
675
+ .pbs {
676
+ padding-bottom: 5px !important;
677
+ }
678
+
679
+ .mbs {
680
+ margin-bottom: 5px !important;
681
+ }
682
+
683
+ .pbm {
684
+ padding-bottom: 10px !important;
685
+ }
686
+
687
+ .mbm {
688
+ margin-bottom: 10px !important;
689
+ }
690
+
691
+ .pbl {
692
+ padding-bottom: 21px !important;
693
+ }
694
+
695
+ .mbl {
696
+ margin-bottom: 21px !important;
697
+ }
698
+
699
+ .pln {
700
+ padding-left: 0 !important;
701
+ }
702
+
703
+ .mln {
704
+ margin-left: 0 !important;
705
+ }
706
+
707
+ .pls {
708
+ padding-left: 5px !important;
709
+ }
710
+
711
+ .mls {
712
+ margin-left: 5px !important;
713
+ }
714
+
715
+ .plm {
716
+ padding-left: 10px !important;
717
+ }
718
+
719
+ .mlm {
720
+ margin-left: 10px !important;
721
+ }
722
+
723
+ .pll {
724
+ padding-left: 21px !important;
725
+ }
726
+
727
+ .mll {
728
+ margin-left: 21px !important;
729
+ }
730
+
731
+ @font-face {
732
+ font-family: "OpenSans";
733
+ src: url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.eot");
734
+ 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");
735
+ font-weight: 300;
736
+ font-style: normal;
737
+ }
738
+
739
+ @font-face {
740
+ font-family: "OpenSans";
741
+ src: url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.eot");
742
+ 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");
743
+ font-weight: 400;
744
+ font-style: normal;
745
+ }
746
+
747
+ @font-face {
748
+ font-family: "OpenSans";
749
+ src: url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.eot");
750
+ 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");
751
+ font-weight: 600;
752
+ font-style: normal;
753
+ }
754
+
755
+ body {
756
+ font-size: 14px;
757
+ font-size: .875rem;
758
+ line-height: 1.5em;
759
+ color: #222;
760
+ }
761
+
762
+ body, input, select, textarea, button {
763
+ font-family: OpenSans, sans-serif;
764
+ }
765
+
766
+ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
767
+ font-weight: 300;
768
+ font-style: normal;
769
+ }
770
+
771
+ h1, .h1 {
772
+ font-size: 36px;
773
+ font-size: 2.25rem;
774
+ line-height: 1.3;
775
+ margin: 5px 0;
776
+ font-weight: bold;
777
+ }
778
+
779
+ h2, .h2 {
780
+ font-size: 28px;
781
+ font-size: 1.75rem;
782
+ line-height: 1.4;
783
+ margin: 5px 0;
784
+ }
785
+
786
+ h3, .h3 {
787
+ font-size: 24px;
788
+ font-size: 1.5rem;
789
+ line-height: 1.4;
790
+ margin: 5px 0;
791
+ }
792
+
793
+ h4, .h4 {
794
+ font-size: 20px;
795
+ font-size: 1.25rem;
796
+ line-height: 1.4;
797
+ margin: 5px 0;
798
+ }
799
+
800
+ h5, .h5 {
801
+ font-size: 16px;
802
+ font-size: 1rem;
803
+ line-height: 1.5;
804
+ margin: 5px 0;
805
+ font-weight: bold;
806
+ }
807
+
808
+ h6, .h6 {
809
+ font-size: 14px;
810
+ font-size: .875rem;
811
+ line-height: 1.5;
812
+ margin: 5px 0;
813
+ font-weight: bold;
814
+ }
815
+
816
+ .h7 {
817
+ font-size: 12px;
818
+ font-size: .75rem;
819
+ line-height: 1.6;
820
+ margin: 5px 0;
821
+ }
822
+
823
+ .headingDoubleSuper {
824
+ display: block;
825
+ clear: both;
826
+ min-width: 10px;
827
+ }
828
+
829
+ .headingDoubleSub {
830
+ font-size: 14px;
831
+ font-size: .875rem;
832
+ display: block;
833
+ float: left;
834
+ font-weight: normal;
835
+ line-height: 1.5;
836
+ }
837
+
838
+ .headingDoubleInline {
839
+ display: inline-block;
840
+ }
841
+
842
+ pre, code {
843
+ font-family: Menlo, Consolas, Monaco, "Lucida Console", monospace;
844
+ }
845
+
846
+ .typeWarning {
847
+ color: #cc2114;
848
+ }
849
+
850
+ .typeHighlight {
851
+ color: #5eab1f;
852
+ }
853
+
854
+ .typeLowlight {
855
+ color: #999;
856
+ }
857
+
858
+ .typeReversed1 {
859
+ color: white;
860
+ }
861
+
862
+ .typeReversed2 {
863
+ color: #eff6e9;
864
+ }
865
+
866
+ .typeDeemphasize {
867
+ font-weight: 300 !important;
868
+ }
869
+
870
+ .typeWeightNormal {
871
+ font-weight: normal !important;
872
+ }
873
+
874
+ .typeEmphasize {
875
+ font-weight: bold !important;
876
+ }
877
+
878
+ .cols1 {
879
+ width: 4.16667% !important;
880
+ *width: 2.30496% !important;
881
+ }
882
+
883
+ .cols2 {
884
+ width: 8.33333% !important;
885
+ *width: 6.47163% !important;
886
+ }
887
+
888
+ .cols3 {
889
+ width: 12.5% !important;
890
+ *width: 10.6383% !important;
891
+ }
892
+
893
+ .cols4 {
894
+ width: 16.66667% !important;
895
+ *width: 14.80496% !important;
896
+ }
897
+
898
+ .cols5 {
899
+ width: 20.83333% !important;
900
+ *width: 18.97163% !important;
901
+ }
902
+
903
+ .cols6 {
904
+ width: 25% !important;
905
+ *width: 23.1383% !important;
906
+ }
907
+
908
+ .cols7 {
909
+ width: 29.16667% !important;
910
+ *width: 27.30496% !important;
911
+ }
912
+
913
+ .cols8 {
914
+ width: 33.33333% !important;
915
+ *width: 31.47163% !important;
916
+ }
917
+
918
+ .cols9 {
919
+ width: 37.5% !important;
920
+ *width: 35.6383% !important;
921
+ }
922
+
923
+ .cols10 {
924
+ width: 41.66667% !important;
925
+ *width: 39.80496% !important;
926
+ }
927
+
928
+ .cols11 {
929
+ width: 45.83333% !important;
930
+ *width: 43.97163% !important;
931
+ }
932
+
933
+ .cols12 {
934
+ width: 50% !important;
935
+ *width: 48.1383% !important;
936
+ }
937
+
938
+ .cols13 {
939
+ width: 54.16667% !important;
940
+ *width: 52.30496% !important;
941
+ }
942
+
943
+ .cols14 {
944
+ width: 58.33333% !important;
945
+ *width: 56.47163% !important;
946
+ }
947
+
948
+ .cols15 {
949
+ width: 62.5% !important;
950
+ *width: 60.6383% !important;
951
+ }
952
+
953
+ .cols16 {
954
+ width: 66.66667% !important;
955
+ *width: 64.80496% !important;
956
+ }
957
+
958
+ .cols17 {
959
+ width: 70.83333% !important;
960
+ *width: 68.97163% !important;
961
+ }
962
+
963
+ .cols18 {
964
+ width: 75% !important;
965
+ *width: 73.1383% !important;
966
+ }
967
+
968
+ .cols19 {
969
+ width: 79.16667% !important;
970
+ *width: 77.30496% !important;
971
+ }
972
+
973
+ .cols20 {
974
+ width: 83.33333% !important;
975
+ *width: 81.47163% !important;
976
+ }
977
+
978
+ .cols21 {
979
+ width: 87.5% !important;
980
+ *width: 85.6383% !important;
981
+ }
982
+
983
+ .cols22 {
984
+ width: 91.66667% !important;
985
+ *width: 89.80496% !important;
986
+ }
987
+
988
+ .cols23 {
989
+ width: 95.83333% !important;
990
+ *width: 93.97163% !important;
991
+ }
992
+
993
+ .cols24 {
994
+ width: 100% !important;
995
+ *width: 98.1383% !important;
996
+ }
997
+
998
+ .line {
999
+ margin-left: -21px;
1000
+ }
1001
+
1002
+ .line .col {
1003
+ min-height: 1px;
1004
+ float: left;
1005
+ zoom: 1;
1006
+ -webkit-box-sizing: border-box;
1007
+ -moz-box-sizing: border-box;
1008
+ box-sizing: border-box;
1009
+ padding-left: 21px;
1010
+ }
1011
+
1012
+ .line .colExt {
1013
+ float: right;
1014
+ zoom: 1;
1015
+ padding: 0 0 0 21px;
1016
+ }
1017
+
1018
+ .line .lastCol {
1019
+ float: none;
1020
+ *display: block;
1021
+ *width: auto !important;
1022
+ *zoom: 1;
1023
+ }
1024
+
1025
+ .line .col:last-child {
1026
+ display: table-cell;
1027
+ float: none;
1028
+ vertical-align: top;
1029
+ width: 10000px !important;
1030
+ }
1031
+
1032
+ a, a:hover, a:focus, .linkLowlight {
1033
+ text-decoration: none;
1034
+ }
1035
+
1036
+ a {
1037
+ color: #1885f0;
1038
+ }
1039
+
1040
+ a:hover, a:focus {
1041
+ color: #5eab1f;
1042
+ }
1043
+
1044
+ .linkLowlight {
1045
+ color: #999;
1046
+ }
1047
+
1048
+ .linkLowlight:hover, .linkLowlight:focus {
1049
+ color: #5eab1f;
1050
+ }
1051
+
1052
+ .linkForward:after {
1053
+ margin-left: .35714em;
1054
+ content: "\00BB"
1055
+ }
1056
+
1057
+ .linkBack:before {
1058
+ margin-right: .35714em;
1059
+ content: "\00AB"
1060
+ }
1061
+
1062
+ .backgroundBasic {
1063
+ background-color: white;
1064
+ }
1065
+
1066
+ .backgroundLowlight {
1067
+ background-color: #f9f9f9;
1068
+ }
1069
+
1070
+ .backgroundHighlight {
1071
+ background-color: #5eab1f;
1072
+ }
1073
+
1074
+ .backgroundInverse {
1075
+ background-color: #222;
1076
+ }
1077
+
1078
+ .box {
1079
+ position: relative;
1080
+ }
1081
+
1082
+ .box .boxHead, .box .boxFoot {
1083
+ padding: 0;
1084
+ margin: 0 21px;
1085
+ }
1086
+
1087
+ .box .boxBody {
1088
+ padding: 0 21px 1px;
1089
+ }
1090
+
1091
+ .boxHighlight {
1092
+ border: 1px solid #e9e9e9;
1093
+ -webkit-border-radius: 6px;
1094
+ -moz-border-radius: 6px;
1095
+ -ms-border-radius: 6px;
1096
+ -o-border-radius: 6px;
1097
+ border-radius: 6px;
1098
+ -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.17);
1099
+ -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.17);
1100
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.17);
1101
+ }
1102
+
1103
+ .boxBasic {
1104
+ border: 1px solid #e9e9e9;
1105
+ -webkit-border-radius: 6px;
1106
+ -moz-border-radius: 6px;
1107
+ -ms-border-radius: 6px;
1108
+ -o-border-radius: 6px;
1109
+ border-radius: 6px;
1110
+ }
1111
+
1112
+ .boxHeadBasic {
1113
+ border-bottom: solid 1px #e9e9e9;
1114
+ }
1115
+
1116
+ .boxFootBasic {
1117
+ border-top: solid 1px #e9e9e9;
1118
+ }
1119
+
1120
+ .boxClose {
1121
+ border: 0;
1122
+ position: absolute;
1123
+ cursor: pointer;
1124
+ background-color: transparent;
1125
+ }
1126
+
1127
+ .boxClose {
1128
+ top: 3px;
1129
+ right: 6px;
1130
+ width: 20px;
1131
+ height: 20px;
1132
+ text-align: center;
1133
+ color: #999;
1134
+ font-size: 14px;
1135
+ font-size: .875rem;
1136
+ }
1137
+
1138
+ .boxClose:hover, .boxClose:focus {
1139
+ color: #222;
1140
+ }
1141
+
1142
+ ol, ul {
1143
+ list-style-type: none;
1144
+ }
1145
+
1146
+ ol > li, ul > li {
1147
+ margin: .2em 0;
1148
+ }
1149
+
1150
+ .listBordered > li, .listBorderedHover > li {
1151
+ padding: 10px;
1152
+ border-top: 1px solid #e9e9e9;
1153
+ }
1154
+
1155
+ .listBordered > li:first-child, .listBorderedHover > li:first-child {
1156
+ border-top: 1px solid transparent;
1157
+ }
1158
+
1159
+ .listBorderedHover > li {
1160
+ margin: 0;
1161
+ }
1162
+
1163
+ .listBorderedHover > li:hover {
1164
+ background-color: #f9f9f9;
1165
+ }
1166
+
1167
+ .listInline > li {
1168
+ vertical-align: middle;
1169
+ padding-right: 10px;
1170
+ }
1171
+
1172
+ .lvn > li {
1173
+ padding-top: 0;
1174
+ padding-bottom: 0;
1175
+ }
1176
+
1177
+ .lvs > li {
1178
+ padding-top: 5px;
1179
+ padding-bottom: 5px;
1180
+ }
1181
+
1182
+ .lvm > li {
1183
+ padding-top: 10px;
1184
+ padding-bottom: 10px;
1185
+ }
1186
+
1187
+ .lvl > li {
1188
+ padding-top: 21px;
1189
+ padding-bottom: 21px;
1190
+ }
1191
+
1192
+ .lhn > li {
1193
+ padding-left: 0;
1194
+ padding-right: 0;
1195
+ }
1196
+
1197
+ .lhs > li {
1198
+ padding-left: 5px;
1199
+ padding-right: 5px;
1200
+ }
1201
+
1202
+ .lhm > li {
1203
+ padding-left: 10px;
1204
+ padding-right: 10px;
1205
+ }
1206
+
1207
+ .lhl > li {
1208
+ padding-left: 21px;
1209
+ padding-right: 21px;
1210
+ }
1211
+
1212
+ .toggle {
1213
+ position: relative;
1214
+ cursor: pointer;
1215
+ }
1216
+
1217
+ .toggleArrow .before, .toggleArrow:before {
1218
+ content: "\25BA";
1219
+ display: inline-block;
1220
+ width: 1.3em;
1221
+ font-size: .9em;
1222
+ text-align: center;
1223
+ }
1224
+
1225
+ .toggleArrowActive:before {
1226
+ content: "\25BC"
1227
+ }
1228
+
1229
+ .toggleArrow:hover .before {
1230
+ text-decoration: none;
1231
+ }
1232
+
1233
+ .toggleArrow .active, .toggleActive .inactive {
1234
+ display: none;
1235
+ }
1236
+
1237
+ .toggleActive .active {
1238
+ display: inline-block;
1239
+ }
1240
+
1241
+ .toggleActive .inactive {
1242
+ display: none;
1243
+ }
1244
+
1245
+ .frameThumb, .frameSmall, .frameStandard, .frameStacked {
1246
+ display: inline-block;
1247
+ *display: inline;
1248
+ *zoom: 1;
1249
+ *border: 1px solid #e9e9e9;
1250
+ -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
1251
+ -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
1252
+ box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
1253
+ }
1254
+
1255
+ .frameThumb img, .frameSmall img, .frameStandard img, .frameStacked img {
1256
+ display: block;
1257
+ }
1258
+
1259
+ .frameThumb .polaroid, .frameSmall .polaroid, .frameStandard .polaroid, .frameStacked .polaroid {
1260
+ margin-top: 5px;
1261
+ }
1262
+
1263
+ .frameThumb {
1264
+ padding: 2px;
1265
+ }
1266
+
1267
+ .frameSmall {
1268
+ padding: 6px;
1269
+ }
1270
+
1271
+ .frameStandard {
1272
+ padding: 8px;
1273
+ }
1274
+
1275
+ .frameStacked {
1276
+ padding: 8px;
1277
+ position: relative;
1278
+ background-color: #fff;
1279
+ }
1280
+
1281
+ .frameStacked:before, .frameStacked:after {
1282
+ -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
1283
+ -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
1284
+ box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
1285
+ width: 100%;
1286
+ height: 100%;
1287
+ position: absolute;
1288
+ z-index: -999;
1289
+ content: "";
1290
+ background-color: #f9f9f9;
1291
+ }
1292
+
1293
+ .frameStacked:before {
1294
+ left: 5px;
1295
+ top: 0;
1296
+ -webkit-transform: rotate(1deg);
1297
+ -moz-transform: rotate(1deg);
1298
+ -ms-transform: rotate(1deg);
1299
+ -o-transform: rotate(1deg);
1300
+ transform: rotate(1deg);
1301
+ }
1302
+
1303
+ .frameStacked:after {
1304
+ right: 5px;
1305
+ top: 0;
1306
+ -webkit-transform: rotate(-1deg);
1307
+ -moz-transform: rotate(-1deg);
1308
+ -ms-transform: rotate(-1deg);
1309
+ -o-transform: rotate(-1deg);
1310
+ transform: rotate(-1deg);
1311
+ }
1312
+
1313
+ .badgeStandard, .badgePrimary, .badgeSecondary, .badgeTertiary {
1314
+ -webkit-border-radius: 3px;
1315
+ -moz-border-radius: 3px;
1316
+ -ms-border-radius: 3px;
1317
+ -o-border-radius: 3px;
1318
+ border-radius: 3px;
1319
+ font-size: 12px;
1320
+ font-size: .75rem;
1321
+ padding: .35714em .42857em .21429em;
1322
+ display: inline-block;
1323
+ color: white;
1324
+ line-height: 1;
1325
+ text-transform: uppercase;
1326
+ }
1327
+
1328
+ .badgeStandard {
1329
+ background-color: #999;
1330
+ }
1331
+
1332
+ .badgePrimary {
1333
+ background-color: #ff5c00;
1334
+ }
1335
+
1336
+ .badgeSecondary {
1337
+ background-color: #5eab1f;
1338
+ }
1339
+
1340
+ .badgeTertiary {
1341
+ background-color: #cc2114;
1342
+ }
1343
+
1344
+ button {
1345
+ background: 0;
1346
+ border: 0;
1347
+ }
1348
+
1349
+ .btn {
1350
+ padding: .5em 1em;
1351
+ margin: 0;
1352
+ display: inline-block;
1353
+ font-weight: normal;
1354
+ line-height: normal;
1355
+ font-size: 14px;
1356
+ font-size: .875rem;
1357
+ text-decoration: none;
1358
+ cursor: pointer;
1359
+ border: 0;
1360
+ background: 0;
1361
+ text-align: center;
1362
+ border: 1px solid #ccc;
1363
+ -webkit-border-radius: 4px;
1364
+ -moz-border-radius: 4px;
1365
+ -ms-border-radius: 4px;
1366
+ -o-border-radius: 4px;
1367
+ border-radius: 4px;
1368
+ }
1369
+
1370
+ .btnSml {
1371
+ font-size: 12px;
1372
+ font-size: .75rem;
1373
+ -webkit-border-radius: 4px;
1374
+ -moz-border-radius: 4px;
1375
+ -ms-border-radius: 4px;
1376
+ -o-border-radius: 4px;
1377
+ border-radius: 4px;
1378
+ }
1379
+
1380
+ .btnLrg {
1381
+ font-size: 16px;
1382
+ font-size: 1rem;
1383
+ line-height: 1.6;
1384
+ -webkit-border-radius: 4px;
1385
+ -moz-border-radius: 4px;
1386
+ -ms-border-radius: 4px;
1387
+ -o-border-radius: 4px;
1388
+ border-radius: 4px;
1389
+ }
1390
+
1391
+ .btnFullWidth {
1392
+ width: 100%
1393
+ }
1394
+
1395
+ .btnDefault, a.btnDefault {
1396
+ border: 1px #d7d7d7 solid;
1397
+ background: #f3f3f3;
1398
+ color: #222;
1399
+ text-shadow: 0 1px 0 white;
1400
+ -webkit-box-shadow: 0 1px 0 #ccc;
1401
+ -moz-box-shadow: 0 1px 0 #ccc;
1402
+ box-shadow: 0 1px 0 #ccc;
1403
+ }
1404
+
1405
+ .btnDefault:hover, .btnDefault:focus {
1406
+ background: #f6f6f6;
1407
+ }
1408
+
1409
+ .btnDefault:active {
1410
+ position: relative;
1411
+ top: 1px;
1412
+ -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
1413
+ -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
1414
+ box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
1415
+ }
1416
+
1417
+ .btnPrimary, a.btnPrimary, .btnDanger, a.btnDanger {
1418
+ color: white;
1419
+ text-shadow: 0;
1420
+ }
1421
+
1422
+ .btnPrimary, a.btnPrimary {
1423
+ border: 1px #d14b00 solid;
1424
+ background: #ff5c00;
1425
+ -webkit-box-shadow: 0 1px 0 #d35500;
1426
+ -moz-box-shadow: 0 1px 0 #d35500;
1427
+ box-shadow: 0 1px 0 #d35500;
1428
+ }
1429
+
1430
+ .btnPrimary:hover, .btnPrimary:focus {
1431
+ background: #ff660f;
1432
+ }
1433
+
1434
+ .btnPrimary:active {
1435
+ position: relative;
1436
+ top: 1px;
1437
+ -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
1438
+ -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
1439
+ box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
1440
+ }
1441
+
1442
+ .btnDanger, a.btnDanger {
1443
+ border: 1px #a21a10 solid;
1444
+ background: #cc2114;
1445
+ -webkit-box-shadow: 0 1px 0 #d35500;
1446
+ -moz-box-shadow: 0 1px 0 #d35500;
1447
+ box-shadow: 0 1px 0 #d35500;
1448
+ }
1449
+
1450
+ .btnDanger:hover, .btnDanger:focus {
1451
+ background: #da2315;
1452
+ }
1453
+
1454
+ .btnDanger:active {
1455
+ position: relative;
1456
+ top: 1px;
1457
+ -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
1458
+ -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
1459
+ box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
1460
+ }
1461
+
1462
+ .btn[disabled], .btn[disabled]:hover, .btn[disabled]:focus .btn[disabled]:active, .btnDisabled, a.btnDisabled, .btnDisabled:hover, .btnDisabled:focus, .btnDisabled:active {
1463
+ border: 0;
1464
+ background: #ccc;
1465
+ color: #999;
1466
+ text-shadow: 0;
1467
+ cursor: default;
1468
+ }
1469
+
1470
+ .btn[disabled]:active, .btnDisabled:active {
1471
+ position: static;
1472
+ color: #999;
1473
+ box-shadow: none;
1474
+ }
1475
+
1476
+ .btnLink {
1477
+ color: #1885f0;
1478
+ border: 1px solid transparent;
1479
+ }
1480
+
1481
+ .btnLink:hover, .btnLink:focus {
1482
+ color: #5eab1f;
1483
+ }
1484
+
1485
+ .table {
1486
+ width: 100%
1487
+ }
1488
+
1489
+ .table thead th {
1490
+ font-weight: bold;
1491
+ color: #222;
1492
+ }
1493
+
1494
+ .table th, .table td {
1495
+ padding: 8px;
1496
+ }
1497
+
1498
+ .tableBasic th, .tableBasic td {
1499
+ border: 1px solid #e9e9e9;
1500
+ }
1501
+
1502
+ .tan td, .tan th {
1503
+ padding: 0;
1504
+ }
1505
+
1506
+ .tas td, .tas th {
1507
+ padding: 5px;
1508
+ }
1509
+
1510
+ .tam td, .tam th {
1511
+ padding: 10px;
1512
+ }
1513
+
1514
+ .tal td, .tal th {
1515
+ padding: 21px;
1516
+ }
1517
+
1518
+ .tvn td, .tvn th {
1519
+ padding-top: 0;
1520
+ padding-bottom: 0;
1521
+ }
1522
+
1523
+ .tvs td, .tvs th {
1524
+ padding-top: 5px;
1525
+ padding-bottom: 5px;
1526
+ }
1527
+
1528
+ .tvm td, .tvm th {
1529
+ padding-top: 10px;
1530
+ padding-bottom: 10px;
1531
+ }
1532
+
1533
+ .tvl td, .tvl th {
1534
+ padding-top: 21px;
1535
+ padding-bottom: 21px;
1536
+ }
1537
+
1538
+ .thn td, .thn th {
1539
+ padding-left: 0;
1540
+ padding-right: 0;
1541
+ }
1542
+
1543
+ .ths td, .ths th {
1544
+ padding-left: 5px;
1545
+ padding-right: 5px;
1546
+ }
1547
+
1548
+ .thm td, .thm th {
1549
+ padding-left: 10px;
1550
+ padding-right: 10px;
1551
+ }
1552
+
1553
+ .thl td, .thl th {
1554
+ padding-left: 21px;
1555
+ padding-right: 21px;
1556
+ }
1557
+
1558
+ body {
1559
+ background: white;
1560
+ }
1561
+
1562
+ .content > section, .container {
1563
+ width: 1128px;
1564
+ margin: 0 auto;
1565
+ }
1566
+
1567
+ .main[role="main"] {
1568
+ position: relative;
1569
+ top: -10px;
1570
+ }
1571
+
1572
+ .content > section, .content .container {
1573
+ margin-top: 0;
1574
+ }
1575
+
1576
+ .skipLink:focus {
1577
+ width: 100%;
1578
+ padding: 5px 0;
1579
+ display: block;
1580
+ position: absolute;
1581
+ z-index: 100;
1582
+ text-indent: 5px;
1583
+ color: #fff;
1584
+ background: #5eab1f;
1585
+ }
1586
+
1587
+ .header {
1588
+ padding-bottom: 15px;
1589
+ *position: relative;
1590
+ *z-index: 100;
1591
+ background: white;
1592
+ border-bottom: 1px solid #ccc;
1593
+ }
1594
+
1595
+ .headerSubSection {
1596
+ margin: 1px 0;
1597
+ font-size: 11px;
1598
+ font-size: .6875rem;
1599
+ text-align: right;
1600
+ line-height: 1;
1601
+ }
1602
+
1603
+ .headerSubSection a {
1604
+ color: #222;
1605
+ }
1606
+
1607
+ .headerSubSection .highlight {
1608
+ display: inline-block;
1609
+ padding: 2px 10px;
1610
+ color: #fff;
1611
+ -webkit-border-radius: 5px 5px 0 0;
1612
+ -moz-border-radius: 5px 5px 0 0;
1613
+ -ms-border-radius: 5px 5px 0 0;
1614
+ -o-border-radius: 5px 5px 0 0;
1615
+ border-radius: 5px 5px 0 0;
1616
+ background: #888;
1617
+ }
1618
+
1619
+ .headerSubSection .listInline {
1620
+ margin: 0;
1621
+ }
1622
+
1623
+ .headerMainSection {
1624
+ position: relative;
1625
+ }
1626
+
1627
+ .headerMainSection .logo {
1628
+ position: absolute;
1629
+ left: 0;
1630
+ top: -1px;
1631
+ }
1632
+
1633
+ .menuWrap {
1634
+ margin-left: 97px;
1635
+ }
1636
+
1637
+ .content {
1638
+ padding-top: 5px;
1639
+ }
1640
+
1641
+ .content > section {
1642
+ margin-top: 5px;
1643
+ }
1644
+
1645
+ .sideBar {
1646
+ width: 185px;
1647
+ margin-right: 20px;
1648
+ float: left;
1649
+ }
1650
+
1651
+ .main {
1652
+ float: none;
1653
+ *display: block;
1654
+ *width: auto;
1655
+ *zoom: 1;
1656
+ }
1657
+
1658
+ .aside {
1659
+ width: 300px;
1660
+ margin-left: 20px;
1661
+ float: right;
1662
+ }
1663
+
1664
+ .footer {
1665
+ clear: both;
1666
+ margin-top: 40px;
1667
+ font-size: 12px;
1668
+ font-size: .75rem;
1669
+ }
1670
+
1671
+ .footerBox {
1672
+ border-top: 5px solid #5eab1f;
1673
+ }
1674
+
1675
+ .footerBox .boxBody {
1676
+ margin: 10px 0;
1677
+ }
1678
+
1679
+ .footerGroup a {
1680
+ color: #222;
1681
+ }
1682
+
1683
+ .footerGroup a:hover, .footerGroup a:focus {
1684
+ color: #5eab1f;
1685
+ text-decoration: underline;
1686
+ }
1687
+
1688
+ .footerCol {
1689
+ width: 125px;
1690
+ }
1691
+
1692
+ .footerGroupHeading {
1693
+ float: left;
1694
+ }
1695
+
1696
+ .footerGroupHeading {
1697
+ width: 120px;
1698
+ margin: 0;
1699
+ clear: right;
1700
+ font-weight: bold;
1701
+ }
1702
+
1703
+ .footerGroupList {
1704
+ margin: 0;
1705
+ }
1706
+
1707
+ .footerGroupList > li {
1708
+ margin: 0;
1709
+ }
1710
+
1711
+ .footerDisclaimer {
1712
+ float: left;
1713
+ }
1714
+
1715
+ .footerNoteAside {
1716
+ float: right;
1717
+ }
1718
+
1719
+ </style>
1720
+ <link rel=stylesheet href="/assets/application.css" type="text/css">
1721
+ <script rel=javascript src="/assets/application.js" type="text/javascript"></script>
1722
+ </head>
1723
+ <header class="header pbn" role="banner">
1724
+ <div class="backgroundHighlight typeReversed1">
1725
+ <div class="container">
1726
+ <h1 class="h2 mvs">My Styleguide</h1>
1727
+ </div>
1728
+ </div>
1729
+ <div class="backgroundLowlight typeReversed1">
1730
+ <div class="container">
1731
+ <span>
1732
+ <ul class="docNav listInline">
1733
+ <% for c in categories %>
1734
+ <li><a href="/styleguide/<%= c[0] %>.html"><%= c[0] %></a></li>
1735
+ <% end %>
1736
+ </ul>
1737
+ </span>
1738
+ </div>
1739
+ </div>
1740
+ </header>
1741
+ <div class="content">
1742
+ <section>
1743
+ <div class="line">
1744
+ <div class="col cols4">
1745
+ <div class="componentMenu box boxBasic backgroundBasic">
1746
+ <div class="boxBody pan">
1747
+ <ul class="componentList listBorderedHover">
1748
+ <% blocks.each do |block| %>
1749
+ <li><a href="#<%= block[:name] %>"><%= block[:title] %></a></li>
1750
+ <% end %>
1751
+ </ul>
1752
+ </div>
1753
+ </div>
1754
+ </div>
1755
+ <div class="main col cols20 lastCol">