picasso 0.0.1 → 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. data/README.md +1 -1
  2. data/docs/all.html +391 -0
  3. data/docs/arrows.html +130 -0
  4. data/docs/bubbles.html +126 -0
  5. data/docs/build/manifest.json +4 -0
  6. data/docs/build/md/arrows.md +43 -0
  7. data/docs/build/md/bubbles.md +43 -0
  8. data/docs/build/md/buttons.md +89 -0
  9. data/docs/build/md/components.md +1 -0
  10. data/docs/build/md/despegar.md +198 -0
  11. data/docs/build/md/intro.md +1 -0
  12. data/docs/build/md/utils.md +17 -0
  13. data/docs/build/templates/index.html +37 -0
  14. data/docs/build/templates/layout.html +39 -0
  15. data/docs/build/templates/page.html +24 -0
  16. data/docs/buttons.html +170 -0
  17. data/docs/components.html +93 -0
  18. data/docs/config.rb +6 -0
  19. data/docs/css/github.css +88 -0
  20. data/docs/css/markdown.css +100 -0
  21. data/docs/css/style.css +838 -0
  22. data/docs/despegar.html +281 -0
  23. data/docs/index.html +93 -0
  24. data/docs/intro.html +93 -0
  25. data/docs/js/docs.js +16 -0
  26. data/docs/js/rainbow-custom.min.js +13 -0
  27. data/docs/sass/style.scss +215 -0
  28. data/docs/utils.html +104 -0
  29. data/lib/picasso/version.rb +1 -1
  30. data/stylesheets/_picasso.scss +3 -0
  31. data/stylesheets/picasso/_components.scss +3 -0
  32. data/stylesheets/picasso/_despegar.scss +1 -0
  33. data/stylesheets/picasso/_utils.scss +1 -0
  34. data/stylesheets/picasso/components/_arrows.scss +54 -0
  35. data/stylesheets/picasso/components/_bubbles.scss +76 -0
  36. data/stylesheets/picasso/components/_buttons.scss +2 -0
  37. data/stylesheets/picasso/components/buttons/_buttons.scss +106 -0
  38. data/stylesheets/picasso/components/buttons/_mini-buttons.scss +66 -0
  39. data/stylesheets/{despegar → picasso/despegar}/_variables.scss +4 -2
  40. data/stylesheets/picasso/utils/_clearfix.scss +33 -0
  41. metadata +41 -4
@@ -0,0 +1,100 @@
1
+ html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
2
+
3
+ body{
4
+ color:#444;
5
+ font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
6
+ font-size:12px;
7
+ line-height:1.5em;
8
+ padding:1em;
9
+ margin:auto;
10
+ max-width:42em;
11
+ background:#fefefe;
12
+ }
13
+
14
+ a{ color: #0645ad; text-decoration:none;}
15
+ a:visited{ color: #0b0080; }
16
+ a:hover{ color: #06e; }
17
+ a:active{ color:#faa700; }
18
+ a:focus{ outline: thin dotted; }
19
+ a:hover, a:active{ outline: 0; }
20
+
21
+ ::-moz-selection{background:rgba(255,255,0,0.3);color:#000}
22
+ ::selection{background:rgba(255,255,0,0.3);color:#000}
23
+
24
+ a::-moz-selection{background:rgba(255,255,0,0.3);color:#0645ad}
25
+ a::selection{background:rgba(255,255,0,0.3);color:#0645ad}
26
+
27
+ p{
28
+ margin:1em 0;
29
+ }
30
+
31
+ img{
32
+ max-width:100%;
33
+ }
34
+
35
+ h1,h2,h3,h4,h5,h6{
36
+ font-weight:normal;
37
+ color:#111;
38
+ line-height:1em;
39
+ }
40
+ h4,h5,h6{ font-weight: bold; }
41
+ h1{ font-size:2.5em; }
42
+ h2{ font-size:2em; }
43
+ h3{ font-size:1.5em; }
44
+ h4{ font-size:1.2em; }
45
+ h5{ font-size:1em; }
46
+ h6{ font-size:0.9em; }
47
+
48
+ blockquote{
49
+ color:#666666;
50
+ margin:0;
51
+ }
52
+ hr { display: block; height: 2px; border: 0; border-top: 1px solid #aaa;border-bottom: 1px solid #eee; margin: 1em 0; padding: 0; }
53
+ pre, code, kbd, samp { color: #000; font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 0.98em; }
54
+ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
55
+
56
+ b, strong { font-weight: bold; }
57
+
58
+ dfn { font-style: italic; }
59
+
60
+ ins { background: #ff9; color: #000; text-decoration: none; }
61
+
62
+ mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
63
+
64
+ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
65
+ sup { top: -0.5em; }
66
+ sub { bottom: -0.25em; }
67
+
68
+ ul, ol { margin: 1em 0; padding: 0 0 0 2em; }
69
+ li p:last-child { margin:0 }
70
+ dd { margin: 0 0 0 2em; }
71
+
72
+ img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
73
+
74
+ table { border-collapse: collapse; border-spacing: 0; }
75
+ td { vertical-align: top; }
76
+
77
+ @media only screen and (min-width: 480px) {
78
+ body{font-size:14px;}
79
+ }
80
+
81
+ @media only screen and (min-width: 768px) {
82
+ body{font-size:16px;}
83
+ }
84
+
85
+ @media print {
86
+ * { background: transparent !important; color: black !important; filter:none !important; -ms-filter: none !important; }
87
+ body{font-size:12pt; max-width:100%;}
88
+ a, a:visited { text-decoration: underline; }
89
+ hr { height: 1px; border:0; border-bottom:1px solid black; }
90
+ a[href]:after { content: " (" attr(href) ")"; }
91
+ abbr[title]:after { content: " (" attr(title) ")"; }
92
+ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
93
+ pre, blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; }
94
+ tr, img { page-break-inside: avoid; }
95
+ img { max-width: 100% !important; }
96
+ @page :left { margin: 15mm 20mm 15mm 10mm; }
97
+ @page :right { margin: 15mm 10mm 15mm 20mm; }
98
+ p, h2, h3 { orphans: 3; widows: 3; }
99
+ h2, h3 { page-break-after: avoid; }
100
+ }
@@ -0,0 +1,838 @@
1
+ .button-demo-1 {
2
+ width: 90px;
3
+ height: 30px;
4
+ display: inline-block;
5
+ text-align: center;
6
+ position: relative;
7
+ z-index: 1;
8
+ font-family: sans-serif;
9
+ font-size: 12px;
10
+ text-decoration: none;
11
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #ff0000), color-stop(100%, #660000));
12
+ background: -webkit-linear-gradient(#ff0000 30%, #660000);
13
+ background: -moz-linear-gradient(#ff0000 30%, #660000);
14
+ background: -o-linear-gradient(#ff0000 30%, #660000);
15
+ background: -ms-linear-gradient(#ff0000 30%, #660000);
16
+ background: linear-gradient(#ff0000 30%, #660000);
17
+ -webkit-border-radius: 5px;
18
+ -moz-border-radius: 5px;
19
+ -ms-border-radius: 5px;
20
+ -o-border-radius: 5px;
21
+ border-radius: 5px;
22
+ }
23
+ .button-demo-1:after, .button-demo-1:before {
24
+ content: "";
25
+ position: absolute;
26
+ display: inline-block;
27
+ }
28
+ .button-demo-1:after {
29
+ width: 88px;
30
+ height: 28px;
31
+ left: 1px;
32
+ top: 1px;
33
+ z-index: 2;
34
+ }
35
+ .button-demo-1:before {
36
+ width: 86px;
37
+ height: 26px;
38
+ left: 2px;
39
+ top: 2px;
40
+ z-index: 3;
41
+ }
42
+ .button-demo-1 span {
43
+ position: relative;
44
+ z-index: 4;
45
+ line-height: 30px;
46
+ }
47
+ .button-demo-1 span {
48
+ color: white;
49
+ }
50
+ .button-demo-1:after, .button-demo-1:before {
51
+ -webkit-border-radius: 4px;
52
+ -moz-border-radius: 4px;
53
+ -ms-border-radius: 4px;
54
+ -o-border-radius: 4px;
55
+ border-radius: 4px;
56
+ }
57
+ .button-demo-1:after {
58
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffcccc), color-stop(100%, #4d0000));
59
+ background: -webkit-linear-gradient(#ffcccc 20%, #4d0000);
60
+ background: -moz-linear-gradient(#ffcccc 20%, #4d0000);
61
+ background: -o-linear-gradient(#ffcccc 20%, #4d0000);
62
+ background: -ms-linear-gradient(#ffcccc 20%, #4d0000);
63
+ background: linear-gradient(#ffcccc 20%, #4d0000);
64
+ }
65
+ .button-demo-1:before {
66
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #ff0000), color-stop(100%, #660000));
67
+ background: -webkit-linear-gradient(#ff0000 30%, #660000);
68
+ background: -moz-linear-gradient(#ff0000 30%, #660000);
69
+ background: -o-linear-gradient(#ff0000 30%, #660000);
70
+ background: -ms-linear-gradient(#ff0000 30%, #660000);
71
+ background: linear-gradient(#ff0000 30%, #660000);
72
+ }
73
+ .button-demo-1:hover {
74
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #ff0000), color-stop(100%, #ff0505));
75
+ background: -webkit-linear-gradient(#ff0000 30%, #ff0505);
76
+ background: -moz-linear-gradient(#ff0000 30%, #ff0505);
77
+ background: -o-linear-gradient(#ff0000 30%, #ff0505);
78
+ background: -ms-linear-gradient(#ff0000 30%, #ff0505);
79
+ background: linear-gradient(#ff0000 30%, #ff0505);
80
+ }
81
+ .button-demo-1:hover:before {
82
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #ff0000), color-stop(100%, #ff0505));
83
+ background: -webkit-linear-gradient(#ff0000 30%, #ff0505);
84
+ background: -moz-linear-gradient(#ff0000 30%, #ff0505);
85
+ background: -o-linear-gradient(#ff0000 30%, #ff0505);
86
+ background: -ms-linear-gradient(#ff0000 30%, #ff0505);
87
+ background: linear-gradient(#ff0000 30%, #ff0505);
88
+ }
89
+
90
+ .button-demo-2 {
91
+ width: 70px;
92
+ height: 30px;
93
+ display: inline-block;
94
+ text-align: center;
95
+ position: relative;
96
+ z-index: 1;
97
+ font-family: sans-serif;
98
+ font-size: 12px;
99
+ text-decoration: none;
100
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #0088cc), color-stop(100%, #002233));
101
+ background: -webkit-linear-gradient(#0088cc 30%, #002233);
102
+ background: -moz-linear-gradient(#0088cc 30%, #002233);
103
+ background: -o-linear-gradient(#0088cc 30%, #002233);
104
+ background: -ms-linear-gradient(#0088cc 30%, #002233);
105
+ background: linear-gradient(#0088cc 30%, #002233);
106
+ -webkit-border-radius: 5px;
107
+ -moz-border-radius: 5px;
108
+ -ms-border-radius: 5px;
109
+ -o-border-radius: 5px;
110
+ border-radius: 5px;
111
+ }
112
+ .button-demo-2:after, .button-demo-2:before {
113
+ content: "";
114
+ position: absolute;
115
+ display: inline-block;
116
+ }
117
+ .button-demo-2:after {
118
+ width: 68px;
119
+ height: 28px;
120
+ left: 1px;
121
+ top: 1px;
122
+ z-index: 2;
123
+ }
124
+ .button-demo-2:before {
125
+ width: 66px;
126
+ height: 26px;
127
+ left: 2px;
128
+ top: 2px;
129
+ z-index: 3;
130
+ }
131
+ .button-demo-2 span {
132
+ position: relative;
133
+ z-index: 4;
134
+ line-height: 30px;
135
+ }
136
+ .button-demo-2 span {
137
+ color: white;
138
+ }
139
+ .button-demo-2:after, .button-demo-2:before {
140
+ -webkit-border-radius: 4px;
141
+ -moz-border-radius: 4px;
142
+ -ms-border-radius: 4px;
143
+ -o-border-radius: 4px;
144
+ border-radius: 4px;
145
+ }
146
+ .button-demo-2:after {
147
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #99ddff), color-stop(100%, #00111a));
148
+ background: -webkit-linear-gradient(#99ddff 20%, #00111a);
149
+ background: -moz-linear-gradient(#99ddff 20%, #00111a);
150
+ background: -o-linear-gradient(#99ddff 20%, #00111a);
151
+ background: -ms-linear-gradient(#99ddff 20%, #00111a);
152
+ background: linear-gradient(#99ddff 20%, #00111a);
153
+ }
154
+ .button-demo-2:before {
155
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #0088cc), color-stop(100%, #002233));
156
+ background: -webkit-linear-gradient(#0088cc 30%, #002233);
157
+ background: -moz-linear-gradient(#0088cc 30%, #002233);
158
+ background: -o-linear-gradient(#0088cc 30%, #002233);
159
+ background: -ms-linear-gradient(#0088cc 30%, #002233);
160
+ background: linear-gradient(#0088cc 30%, #002233);
161
+ }
162
+ .button-demo-2:hover {
163
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #0088cc), color-stop(100%, #008bd1));
164
+ background: -webkit-linear-gradient(#0088cc 30%, #008bd1);
165
+ background: -moz-linear-gradient(#0088cc 30%, #008bd1);
166
+ background: -o-linear-gradient(#0088cc 30%, #008bd1);
167
+ background: -ms-linear-gradient(#0088cc 30%, #008bd1);
168
+ background: linear-gradient(#0088cc 30%, #008bd1);
169
+ }
170
+ .button-demo-2:hover:before {
171
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #0088cc), color-stop(100%, #008bd1));
172
+ background: -webkit-linear-gradient(#0088cc 30%, #008bd1);
173
+ background: -moz-linear-gradient(#0088cc 30%, #008bd1);
174
+ background: -o-linear-gradient(#0088cc 30%, #008bd1);
175
+ background: -ms-linear-gradient(#0088cc 30%, #008bd1);
176
+ background: linear-gradient(#0088cc 30%, #008bd1);
177
+ }
178
+
179
+ .button-demo-3 {
180
+ width: 80px;
181
+ height: 30px;
182
+ display: inline-block;
183
+ text-align: center;
184
+ position: relative;
185
+ z-index: 1;
186
+ font-family: sans-serif;
187
+ font-size: 12px;
188
+ text-decoration: none;
189
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #fbb450), color-stop(100%, #ae6704));
190
+ background: -webkit-linear-gradient(#fbb450 30%, #ae6704);
191
+ background: -moz-linear-gradient(#fbb450 30%, #ae6704);
192
+ background: -o-linear-gradient(#fbb450 30%, #ae6704);
193
+ background: -ms-linear-gradient(#fbb450 30%, #ae6704);
194
+ background: linear-gradient(#fbb450 30%, #ae6704);
195
+ -webkit-border-radius: 5px;
196
+ -moz-border-radius: 5px;
197
+ -ms-border-radius: 5px;
198
+ -o-border-radius: 5px;
199
+ border-radius: 5px;
200
+ }
201
+ .button-demo-3:after, .button-demo-3:before {
202
+ content: "";
203
+ position: absolute;
204
+ display: inline-block;
205
+ }
206
+ .button-demo-3:after {
207
+ width: 78px;
208
+ height: 28px;
209
+ left: 1px;
210
+ top: 1px;
211
+ z-index: 2;
212
+ }
213
+ .button-demo-3:before {
214
+ width: 76px;
215
+ height: 26px;
216
+ left: 2px;
217
+ top: 2px;
218
+ z-index: 3;
219
+ }
220
+ .button-demo-3 span {
221
+ position: relative;
222
+ z-index: 4;
223
+ line-height: 30px;
224
+ }
225
+ .button-demo-3 span {
226
+ color: white;
227
+ }
228
+ .button-demo-3:after, .button-demo-3:before {
229
+ -webkit-border-radius: 4px;
230
+ -moz-border-radius: 4px;
231
+ -ms-border-radius: 4px;
232
+ -o-border-radius: 4px;
233
+ border-radius: 4px;
234
+ }
235
+ .button-demo-3:after {
236
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(100%, #955903));
237
+ background: -webkit-linear-gradient(#ffffff 20%, #955903);
238
+ background: -moz-linear-gradient(#ffffff 20%, #955903);
239
+ background: -o-linear-gradient(#ffffff 20%, #955903);
240
+ background: -ms-linear-gradient(#ffffff 20%, #955903);
241
+ background: linear-gradient(#ffffff 20%, #955903);
242
+ }
243
+ .button-demo-3:before {
244
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #fbb450), color-stop(100%, #ae6704));
245
+ background: -webkit-linear-gradient(#fbb450 30%, #ae6704);
246
+ background: -moz-linear-gradient(#fbb450 30%, #ae6704);
247
+ background: -o-linear-gradient(#fbb450 30%, #ae6704);
248
+ background: -ms-linear-gradient(#fbb450 30%, #ae6704);
249
+ background: linear-gradient(#fbb450 30%, #ae6704);
250
+ }
251
+ .button-demo-3:hover {
252
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #fbb450), color-stop(100%, #fbb655));
253
+ background: -webkit-linear-gradient(#fbb450 30%, #fbb655);
254
+ background: -moz-linear-gradient(#fbb450 30%, #fbb655);
255
+ background: -o-linear-gradient(#fbb450 30%, #fbb655);
256
+ background: -ms-linear-gradient(#fbb450 30%, #fbb655);
257
+ background: linear-gradient(#fbb450 30%, #fbb655);
258
+ }
259
+ .button-demo-3:hover:before {
260
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #fbb450), color-stop(100%, #fbb655));
261
+ background: -webkit-linear-gradient(#fbb450 30%, #fbb655);
262
+ background: -moz-linear-gradient(#fbb450 30%, #fbb655);
263
+ background: -o-linear-gradient(#fbb450 30%, #fbb655);
264
+ background: -ms-linear-gradient(#fbb450 30%, #fbb655);
265
+ background: linear-gradient(#fbb450 30%, #fbb655);
266
+ }
267
+
268
+ .button-demo-4 {
269
+ width: 250px;
270
+ height: 30px;
271
+ display: inline-block;
272
+ text-align: center;
273
+ position: relative;
274
+ z-index: 1;
275
+ font-family: sans-serif;
276
+ font-size: 12px;
277
+ text-decoration: none;
278
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #62c462), color-stop(100%, #276627));
279
+ background: -webkit-linear-gradient(#62c462 30%, #276627);
280
+ background: -moz-linear-gradient(#62c462 30%, #276627);
281
+ background: -o-linear-gradient(#62c462 30%, #276627);
282
+ background: -ms-linear-gradient(#62c462 30%, #276627);
283
+ background: linear-gradient(#62c462 30%, #276627);
284
+ -webkit-border-radius: 5px;
285
+ -moz-border-radius: 5px;
286
+ -ms-border-radius: 5px;
287
+ -o-border-radius: 5px;
288
+ border-radius: 5px;
289
+ }
290
+ .button-demo-4:after, .button-demo-4:before {
291
+ content: "";
292
+ position: absolute;
293
+ display: inline-block;
294
+ }
295
+ .button-demo-4:after {
296
+ width: 248px;
297
+ height: 28px;
298
+ left: 1px;
299
+ top: 1px;
300
+ z-index: 2;
301
+ }
302
+ .button-demo-4:before {
303
+ width: 246px;
304
+ height: 26px;
305
+ left: 2px;
306
+ top: 2px;
307
+ z-index: 3;
308
+ }
309
+ .button-demo-4 span {
310
+ position: relative;
311
+ z-index: 4;
312
+ line-height: 30px;
313
+ }
314
+ .button-demo-4 span {
315
+ color: white;
316
+ }
317
+ .button-demo-4:after, .button-demo-4:before {
318
+ -webkit-border-radius: 4px;
319
+ -moz-border-radius: 4px;
320
+ -ms-border-radius: 4px;
321
+ -o-border-radius: 4px;
322
+ border-radius: 4px;
323
+ }
324
+ .button-demo-4:after {
325
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f6fcf6), color-stop(100%, #205420));
326
+ background: -webkit-linear-gradient(#f6fcf6 20%, #205420);
327
+ background: -moz-linear-gradient(#f6fcf6 20%, #205420);
328
+ background: -o-linear-gradient(#f6fcf6 20%, #205420);
329
+ background: -ms-linear-gradient(#f6fcf6 20%, #205420);
330
+ background: linear-gradient(#f6fcf6 20%, #205420);
331
+ }
332
+ .button-demo-4:before {
333
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #62c462), color-stop(100%, #276627));
334
+ background: -webkit-linear-gradient(#62c462 30%, #276627);
335
+ background: -moz-linear-gradient(#62c462 30%, #276627);
336
+ background: -o-linear-gradient(#62c462 30%, #276627);
337
+ background: -ms-linear-gradient(#62c462 30%, #276627);
338
+ background: linear-gradient(#62c462 30%, #276627);
339
+ }
340
+ .button-demo-4:hover {
341
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #62c462), color-stop(100%, #66c566));
342
+ background: -webkit-linear-gradient(#62c462 30%, #66c566);
343
+ background: -moz-linear-gradient(#62c462 30%, #66c566);
344
+ background: -o-linear-gradient(#62c462 30%, #66c566);
345
+ background: -ms-linear-gradient(#62c462 30%, #66c566);
346
+ background: linear-gradient(#62c462 30%, #66c566);
347
+ }
348
+ .button-demo-4:hover:before {
349
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #62c462), color-stop(100%, #66c566));
350
+ background: -webkit-linear-gradient(#62c462 30%, #66c566);
351
+ background: -moz-linear-gradient(#62c462 30%, #66c566);
352
+ background: -o-linear-gradient(#62c462 30%, #66c566);
353
+ background: -ms-linear-gradient(#62c462 30%, #66c566);
354
+ background: linear-gradient(#62c462 30%, #66c566);
355
+ }
356
+
357
+ .mini-button-demo-1 {
358
+ display: inline-block;
359
+ height: 20px;
360
+ padding-right: 20px;
361
+ font-family: sans-serif;
362
+ text-decoration: none;
363
+ text-align: center;
364
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f0f0f0), color-stop(50%, #e3e3e3), color-stop(51%, #d6d6d6), color-stop(100%, #cacaca));
365
+ background: -webkit-linear-gradient(top, #f0f0f0 0%, #e3e3e3 50%, #d6d6d6 51%, #cacaca 100%);
366
+ background: -moz-linear-gradient(top, #f0f0f0 0%, #e3e3e3 50%, #d6d6d6 51%, #cacaca 100%);
367
+ background: -o-linear-gradient(top, #f0f0f0 0%, #e3e3e3 50%, #d6d6d6 51%, #cacaca 100%);
368
+ background: -ms-linear-gradient(top, #f0f0f0 0%, #e3e3e3 50%, #d6d6d6 51%, #cacaca 100%);
369
+ background: linear-gradient(top, #f0f0f0 0%, #e3e3e3 50%, #d6d6d6 51%, #cacaca 100%);
370
+ -webkit-border-radius: 20px;
371
+ -moz-border-radius: 20px;
372
+ -ms-border-radius: 20px;
373
+ -o-border-radius: 20px;
374
+ border-radius: 20px;
375
+ -webkit-box-shadow: #333333 0px 1px 2px 0px;
376
+ -moz-box-shadow: #333333 0px 1px 2px 0px;
377
+ box-shadow: #333333 0px 1px 2px 0px;
378
+ }
379
+ .mini-button-demo-1 span {
380
+ height: 20px;
381
+ padding: 0 0 0 20px;
382
+ line-height: 20px;
383
+ }
384
+ .mini-button-demo-1:hover {
385
+ background: #e3e3e3;
386
+ }
387
+ .mini-button-demo-1:active {
388
+ background: #cacaca;
389
+ -webkit-box-shadow: #999999 0px 0px 3px 3px inset;
390
+ -moz-box-shadow: #999999 0px 0px 3px 3px inset;
391
+ box-shadow: #999999 0px 0px 3px 3px inset;
392
+ }
393
+ .mini-button-demo-1 span {
394
+ color: #0e6695;
395
+ display: block;
396
+ font-size: 11px;
397
+ }
398
+
399
+ .mini-button-demo-2 {
400
+ display: inline-block;
401
+ height: 20px;
402
+ padding-right: 20px;
403
+ font-family: sans-serif;
404
+ text-decoration: none;
405
+ text-align: center;
406
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(50%, #0077b3), color-stop(51%, #006699), color-stop(100%, #005580));
407
+ background: -webkit-linear-gradient(top, #0088cc 0%, #0077b3 50%, #006699 51%, #005580 100%);
408
+ background: -moz-linear-gradient(top, #0088cc 0%, #0077b3 50%, #006699 51%, #005580 100%);
409
+ background: -o-linear-gradient(top, #0088cc 0%, #0077b3 50%, #006699 51%, #005580 100%);
410
+ background: -ms-linear-gradient(top, #0088cc 0%, #0077b3 50%, #006699 51%, #005580 100%);
411
+ background: linear-gradient(top, #0088cc 0%, #0077b3 50%, #006699 51%, #005580 100%);
412
+ -webkit-border-radius: 20px;
413
+ -moz-border-radius: 20px;
414
+ -ms-border-radius: 20px;
415
+ -o-border-radius: 20px;
416
+ border-radius: 20px;
417
+ -webkit-box-shadow: #333333 0px 1px 2px 0px;
418
+ -moz-box-shadow: #333333 0px 1px 2px 0px;
419
+ box-shadow: #333333 0px 1px 2px 0px;
420
+ }
421
+ .mini-button-demo-2 span {
422
+ height: 20px;
423
+ padding: 0 0 0 20px;
424
+ line-height: 20px;
425
+ }
426
+ .mini-button-demo-2:hover {
427
+ background: #0077b3;
428
+ }
429
+ .mini-button-demo-2:active {
430
+ background: #005580;
431
+ -webkit-box-shadow: #999999 0px 0px 3px 3px inset;
432
+ -moz-box-shadow: #999999 0px 0px 3px 3px inset;
433
+ box-shadow: #999999 0px 0px 3px 3px inset;
434
+ }
435
+ .mini-button-demo-2 span {
436
+ color: white;
437
+ display: block;
438
+ font-size: 11px;
439
+ }
440
+
441
+ .mini-button-demo-3 {
442
+ display: inline-block;
443
+ height: 20px;
444
+ padding-right: 20px;
445
+ font-family: sans-serif;
446
+ text-decoration: none;
447
+ text-align: center;
448
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #da4f49), color-stop(50%, #d63b34), color-stop(51%, #c72f29), color-stop(100%, #b22a24));
449
+ background: -webkit-linear-gradient(top, #da4f49 0%, #d63b34 50%, #c72f29 51%, #b22a24 100%);
450
+ background: -moz-linear-gradient(top, #da4f49 0%, #d63b34 50%, #c72f29 51%, #b22a24 100%);
451
+ background: -o-linear-gradient(top, #da4f49 0%, #d63b34 50%, #c72f29 51%, #b22a24 100%);
452
+ background: -ms-linear-gradient(top, #da4f49 0%, #d63b34 50%, #c72f29 51%, #b22a24 100%);
453
+ background: linear-gradient(top, #da4f49 0%, #d63b34 50%, #c72f29 51%, #b22a24 100%);
454
+ -webkit-border-radius: 20px;
455
+ -moz-border-radius: 20px;
456
+ -ms-border-radius: 20px;
457
+ -o-border-radius: 20px;
458
+ border-radius: 20px;
459
+ -webkit-box-shadow: #333333 0px 1px 2px 0px;
460
+ -moz-box-shadow: #333333 0px 1px 2px 0px;
461
+ box-shadow: #333333 0px 1px 2px 0px;
462
+ }
463
+ .mini-button-demo-3 span {
464
+ height: 20px;
465
+ padding: 0 0 0 20px;
466
+ line-height: 20px;
467
+ }
468
+ .mini-button-demo-3:hover {
469
+ background: #d63b34;
470
+ }
471
+ .mini-button-demo-3:active {
472
+ background: #b22a24;
473
+ -webkit-box-shadow: #999999 0px 0px 3px 3px inset;
474
+ -moz-box-shadow: #999999 0px 0px 3px 3px inset;
475
+ box-shadow: #999999 0px 0px 3px 3px inset;
476
+ }
477
+ .mini-button-demo-3 span {
478
+ color: white;
479
+ display: block;
480
+ font-size: 11px;
481
+ }
482
+
483
+ .mini-button-demo-4 {
484
+ display: inline-block;
485
+ height: 20px;
486
+ padding-right: 20px;
487
+ font-family: sans-serif;
488
+ text-decoration: none;
489
+ text-align: center;
490
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #414141), color-stop(50%, #343434), color-stop(51%, #272727), color-stop(100%, #1b1b1b));
491
+ background: -webkit-linear-gradient(top, #414141 0%, #343434 50%, #272727 51%, #1b1b1b 100%);
492
+ background: -moz-linear-gradient(top, #414141 0%, #343434 50%, #272727 51%, #1b1b1b 100%);
493
+ background: -o-linear-gradient(top, #414141 0%, #343434 50%, #272727 51%, #1b1b1b 100%);
494
+ background: -ms-linear-gradient(top, #414141 0%, #343434 50%, #272727 51%, #1b1b1b 100%);
495
+ background: linear-gradient(top, #414141 0%, #343434 50%, #272727 51%, #1b1b1b 100%);
496
+ -webkit-border-radius: 20px;
497
+ -moz-border-radius: 20px;
498
+ -ms-border-radius: 20px;
499
+ -o-border-radius: 20px;
500
+ border-radius: 20px;
501
+ -webkit-box-shadow: #333333 0px 1px 2px 0px;
502
+ -moz-box-shadow: #333333 0px 1px 2px 0px;
503
+ box-shadow: #333333 0px 1px 2px 0px;
504
+ }
505
+ .mini-button-demo-4 span {
506
+ height: 20px;
507
+ padding: 0 0 0 20px;
508
+ line-height: 20px;
509
+ }
510
+ .mini-button-demo-4:hover {
511
+ background: #343434;
512
+ }
513
+ .mini-button-demo-4:active {
514
+ background: #1b1b1b;
515
+ -webkit-box-shadow: #999999 0px 0px 3px 3px inset;
516
+ -moz-box-shadow: #999999 0px 0px 3px 3px inset;
517
+ box-shadow: #999999 0px 0px 3px 3px inset;
518
+ }
519
+ .mini-button-demo-4 span {
520
+ color: white;
521
+ display: block;
522
+ font-size: 11px;
523
+ }
524
+
525
+ .arrow-demo-1 {
526
+ padding: 0px 5px;
527
+ display: inline-block;
528
+ height: 14px;
529
+ line-height: 16px;
530
+ position: relative;
531
+ background: #888888;
532
+ color: white;
533
+ font-family: sans-serif;
534
+ font-style: normal;
535
+ font-size: 9px;
536
+ }
537
+ .arrow-demo-1:after {
538
+ content: "";
539
+ position: absolute;
540
+ top: 0;
541
+ right: -7px;
542
+ width: 0;
543
+ height: 0;
544
+ }
545
+ .arrow-demo-1:after {
546
+ border-top: 7px solid transparent;
547
+ border-bottom: 7px solid transparent;
548
+ border-left: 7px solid #888888;
549
+ }
550
+
551
+ .arrow-demo-2 {
552
+ padding: 0px 5px;
553
+ display: inline-block;
554
+ height: 14px;
555
+ line-height: 16px;
556
+ position: relative;
557
+ background: #b94a48;
558
+ color: white;
559
+ font-family: sans-serif;
560
+ font-style: normal;
561
+ font-size: 9px;
562
+ }
563
+ .arrow-demo-2:after {
564
+ content: "";
565
+ position: absolute;
566
+ top: 0;
567
+ right: -7px;
568
+ width: 0;
569
+ height: 0;
570
+ }
571
+ .arrow-demo-2:after {
572
+ border-top: 7px solid transparent;
573
+ border-bottom: 7px solid transparent;
574
+ border-left: 7px solid #b94a48;
575
+ }
576
+
577
+ .arrow-demo-3 {
578
+ padding: 0px 5px;
579
+ display: inline-block;
580
+ height: 14px;
581
+ line-height: 16px;
582
+ position: relative;
583
+ background: #f89406;
584
+ color: white;
585
+ font-family: sans-serif;
586
+ font-style: normal;
587
+ font-size: 9px;
588
+ }
589
+ .arrow-demo-3:after {
590
+ content: "";
591
+ position: absolute;
592
+ top: 0;
593
+ right: -7px;
594
+ width: 0;
595
+ height: 0;
596
+ }
597
+ .arrow-demo-3:after {
598
+ border-top: 7px solid transparent;
599
+ border-bottom: 7px solid transparent;
600
+ border-left: 7px solid #f89406;
601
+ }
602
+
603
+ .arrow-demo-4 {
604
+ padding: 0px 5px;
605
+ display: inline-block;
606
+ height: 14px;
607
+ line-height: 16px;
608
+ position: relative;
609
+ background: #468847;
610
+ color: white;
611
+ font-family: sans-serif;
612
+ font-style: normal;
613
+ font-size: 9px;
614
+ }
615
+ .arrow-demo-4:after {
616
+ content: "";
617
+ position: absolute;
618
+ top: 0;
619
+ right: -7px;
620
+ width: 0;
621
+ height: 0;
622
+ }
623
+ .arrow-demo-4:after {
624
+ border-top: 7px solid transparent;
625
+ border-bottom: 7px solid transparent;
626
+ border-left: 7px solid #468847;
627
+ }
628
+
629
+ .bubble-demo-1 {
630
+ padding: 10px;
631
+ display: block;
632
+ width: auto;
633
+ position: relative;
634
+ background: #eeeeee;
635
+ -webkit-border-radius: 5px;
636
+ -moz-border-radius: 5px;
637
+ -ms-border-radius: 5px;
638
+ -o-border-radius: 5px;
639
+ border-radius: 5px;
640
+ }
641
+ .bubble-demo-1:after {
642
+ content: "";
643
+ position: absolute;
644
+ bottom: -15px;
645
+ right: 20px;
646
+ width: 0;
647
+ height: 0;
648
+ }
649
+ .bubble-demo-1 blockquote {
650
+ color: #999999;
651
+ }
652
+ .bubble-demo-1:after {
653
+ border-left: 10px solid transparent;
654
+ border-right: 10px solid transparent;
655
+ border-top: 15px solid #eeeeee;
656
+ }
657
+
658
+ .bubble-demo-2 {
659
+ padding: 10px;
660
+ display: block;
661
+ width: 400px;
662
+ position: relative;
663
+ background: #e6e6e6;
664
+ -webkit-border-radius: 5px;
665
+ -moz-border-radius: 5px;
666
+ -ms-border-radius: 5px;
667
+ -o-border-radius: 5px;
668
+ border-radius: 5px;
669
+ }
670
+ .bubble-demo-2:after {
671
+ content: "";
672
+ position: absolute;
673
+ bottom: -15px;
674
+ right: 20px;
675
+ width: 0;
676
+ height: 0;
677
+ }
678
+ .bubble-demo-2 blockquote {
679
+ color: #333333;
680
+ white-space: nowrap;
681
+ overflow: hidden;
682
+ -ms-text-overflow: ellipsis;
683
+ -o-text-overflow: ellipsis;
684
+ text-overflow: ellipsis;
685
+ }
686
+ .bubble-demo-2 h4 {
687
+ white-space: nowrap;
688
+ overflow: hidden;
689
+ -ms-text-overflow: ellipsis;
690
+ -o-text-overflow: ellipsis;
691
+ text-overflow: ellipsis;
692
+ }
693
+ .bubble-demo-2:after {
694
+ border-left: 10px solid transparent;
695
+ border-right: 10px solid transparent;
696
+ border-top: 15px solid #e6e6e6;
697
+ }
698
+
699
+ .bubble-demo-1, .bubble-demo-2 {
700
+ margin: 20px 0;
701
+ }
702
+
703
+ .despegar-size-1-demo {
704
+ font-size: 11px;
705
+ }
706
+
707
+ .despegar-size-2-demo {
708
+ font-size: 13px;
709
+ }
710
+
711
+ .despegar-size-3-demo {
712
+ font-size: 16px;
713
+ }
714
+
715
+ .despegar-size-4-demo {
716
+ font-size: 20px;
717
+ }
718
+
719
+ .despegar-size-5-demo {
720
+ font-size: 24px;
721
+ }
722
+
723
+ .despegar-size-6-demo {
724
+ font-size: 28px;
725
+ }
726
+
727
+ .despegar-black-demo {
728
+ padding: 10px;
729
+ background: black;
730
+ color: white;
731
+ }
732
+
733
+ .despegar-white-demo {
734
+ padding: 10px;
735
+ background: white;
736
+ }
737
+
738
+ .despegar-yellow-demo {
739
+ padding: 10px;
740
+ background: #ffff33;
741
+ }
742
+
743
+ .despegar-red-demo {
744
+ padding: 10px;
745
+ background: red;
746
+ }
747
+
748
+ .despegar-blue-demo {
749
+ padding: 10px;
750
+ background: #013d93;
751
+ color: white;
752
+ }
753
+
754
+ .despegar-gray-1-demo {
755
+ padding: 10px;
756
+ background: #222222;
757
+ color: white;
758
+ }
759
+
760
+ .despegar-gray-2-demo {
761
+ padding: 10px;
762
+ background: #444444;
763
+ color: white;
764
+ }
765
+
766
+ .despegar-gray-3-demo {
767
+ padding: 10px;
768
+ background: #666666;
769
+ color: white;
770
+ }
771
+
772
+ .despegar-gray-4-demo {
773
+ padding: 10px;
774
+ background: #888888;
775
+ color: white;
776
+ }
777
+
778
+ .despegar-gray-5-demo {
779
+ padding: 10px;
780
+ background: #aaaaaa;
781
+ color: white;
782
+ }
783
+
784
+ .despegar-gray-6-demo {
785
+ padding: 10px;
786
+ background: #cccccc;
787
+ }
788
+
789
+ .despegar-gray-7-demo {
790
+ padding: 10px;
791
+ background: #eeeeee;
792
+ }
793
+
794
+ .despegar-searchbox-bg-demo {
795
+ padding: 10px;
796
+ background: #ffff33;
797
+ }
798
+
799
+ .despegar-title-color-demo {
800
+ padding: 10px;
801
+ background: #013d93;
802
+ color: white;
803
+ }
804
+
805
+ .despegar-titlealt-color-demo {
806
+ padding: 10px;
807
+ background: #ff9900;
808
+ }
809
+
810
+ .despegar-link-color-demo {
811
+ padding: 10px;
812
+ background: #319fda;
813
+ }
814
+
815
+ .despegar-link-color-hover-demo {
816
+ padding: 10px;
817
+ background: #66ccff;
818
+ }
819
+
820
+ .despegar-error-bg-demo {
821
+ padding: 10px;
822
+ background: #ffe6e6;
823
+ }
824
+
825
+ .despegar-error-border-demo {
826
+ padding: 10px;
827
+ background: red;
828
+ }
829
+
830
+ .despegar-warning-bg-demo {
831
+ padding: 10px;
832
+ background: #ffffe1;
833
+ }
834
+
835
+ .despegar-warning-border-demo {
836
+ padding: 10px;
837
+ background: #ffcc33;
838
+ }