picasso 0.4.2 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. data/README.md +13 -2
  2. data/docs/_picasso.html +45 -723
  3. data/docs/config.rb +0 -3
  4. data/docs/css/picasso-demos.css +45 -721
  5. data/docs/index.html +59 -727
  6. data/docs/picasso-_components.html +45 -723
  7. data/docs/picasso-_despegar.html +45 -723
  8. data/docs/picasso-_utils.html +45 -723
  9. data/docs/picasso-components-_accordions.html +45 -723
  10. data/docs/picasso-components-_arrows.html +45 -723
  11. data/docs/picasso-components-_bubbles.html +45 -723
  12. data/docs/picasso-components-_buttons.html +46 -728
  13. data/docs/picasso-components-_clusters.html +45 -723
  14. data/docs/picasso-components-_inputs.html +45 -723
  15. data/docs/picasso-components-_list-grids.html +45 -723
  16. data/docs/picasso-components-_navs.html +61 -858
  17. data/docs/picasso-components-_pagination.html +45 -723
  18. data/docs/picasso-components-_popups.html +49 -769
  19. data/docs/picasso-components-_tooltips.html +49 -723
  20. data/docs/picasso-components-buttons-_3d.html +45 -724
  21. data/docs/picasso-components-buttons-_glossy.html +25 -25
  22. data/docs/picasso-components-buttons-_mini.html +25 -25
  23. data/docs/picasso-despegar-_mixins.html +45 -723
  24. data/docs/picasso-despegar-_variables.html +66 -740
  25. data/docs/picasso-utils-_clearfix.html +45 -723
  26. data/docs/picasso-utils-_grid.html +45 -723
  27. data/docs/picasso-utils-_ie.html +45 -723
  28. data/docs/picasso-utils-_rem.html +45 -723
  29. data/docs/picasso-utils-_sprite.html +45 -723
  30. data/docs/sass/picasso-demos.scss +13 -33
  31. data/lib/picasso/version.rb +1 -1
  32. data/picasso.gemspec +0 -1
  33. data/stylesheets/picasso/components/_buttons.scss +1 -5
  34. data/stylesheets/picasso/components/_navs.scss +16 -135
  35. data/stylesheets/picasso/components/_popups.scss +5 -46
  36. data/stylesheets/picasso/components/_tooltips.scss +5 -0
  37. data/stylesheets/picasso/components/buttons/_3d.scss +0 -1
  38. data/stylesheets/picasso/despegar/_variables.scss +17 -14
  39. metadata +5 -25
  40. data/docs/img/picasso-buttons-glossy.png +0 -0
  41. data/docs/img/picasso-buttons-mini.png +0 -0
  42. data/docs/img/picasso-nav.png +0 -0
  43. data/docs/img/picasso-popup.png +0 -0
  44. data/stylesheets/picasso/components/buttons/_glossy.scss +0 -266
  45. data/stylesheets/picasso/components/buttons/_mini.scss +0 -197
data/README.md CHANGED
@@ -21,8 +21,13 @@ En el `config.rb` agregar:
21
21
 
22
22
  ```ruby
23
23
  require 'picasso'
24
+ gem 'picasso', '~> 0.5.0'
25
+ ```
26
+
27
+ Para versiones anteriores a 0.5.0, también se debe agregar como dependencia en el `config.rb`:
28
+
29
+ ```ruby
24
30
  require 'magick'
25
- gem 'picasso', '~> 0.4.2'
26
31
  ```
27
32
 
28
33
  Modificar el número de versión a medida que se quiere usar nuevas versiones del framework.
@@ -48,7 +53,7 @@ $ (sudo) gem update picasso
48
53
  ```
49
54
 
50
55
 
51
- ## <a id="oily-png"></a>Opcional: Instalaci&oacute;n de oily_png
56
+ ## <a id="oily-png"></a>Opcional: Instalaci&oacute;n de oily_png (versiones menores a 0.5.0)
52
57
 
53
58
  [oily_png](https://github.com/wvanbergen/oily_png/) es una gema que permite acelerar la creaci&oacute;n de im&aacute;genes din&aacute;micas. Se recomienda su instalaci&oacute;n en caso de utilizar Picasso para la creaci&oacute;n de sprites.
54
59
 
@@ -67,6 +72,12 @@ $ (sudo) apt-get install ruby-oily-png
67
72
 
68
73
  # Changelog
69
74
 
75
+ ## 0.5.0 (!backward compatibility)
76
+ * Se normalizan las variables de colores de Despegar;
77
+ * Se eliminan los botones del tipo mini y glosy (se recomienda el uso de los del tipo 3d);
78
+ * Se deprecan los componentes tooltips y popups. Se recomienda el uso de http://ux.despegar.it/docs/common/modules/overlay.html;
79
+ * Se quita la dependencia de `magick` para la generación de sprites dinámicos.
80
+
70
81
  ## 0.4.2
71
82
  * Se agregan nuevas opciones de customización de las grillas;
72
83
  * Se quita soporte de IE6 en `clearfix()`;
@@ -156,375 +156,6 @@ body {
156
156
  font-size: 1.2em;
157
157
  }
158
158
 
159
- .button-glossy-demo-1 {
160
- width: 90px;
161
- height: 30px;
162
- display: inline-block;
163
- text-align: center;
164
- position: relative;
165
- z-index: 1;
166
- font-family: sans-serif;
167
- font-size: 12px;
168
- text-decoration: none;
169
- cursor: pointer;
170
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #de1f2a), color-stop(100%, #c81c26)), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b11922), color-stop(100%, #6e0f15));
171
- background: -webkit-linear-gradient(#de1f2a, #c81c26), -webkit-linear-gradient(#b11922, #6e0f15);
172
- background: -moz-linear-gradient(#de1f2a, #c81c26), -moz-linear-gradient(#b11922, #6e0f15);
173
- background: -o-linear-gradient(#de1f2a, #c81c26), -o-linear-gradient(#b11922, #6e0f15);
174
- background: linear-gradient(#de1f2a, #c81c26), linear-gradient(#b11922, #6e0f15);
175
- -webkit-border-radius: 5px;
176
- -moz-border-radius: 5px;
177
- -ms-border-radius: 5px;
178
- -o-border-radius: 5px;
179
- border-radius: 5px;
180
- background-position: left top, left 15px;
181
- }
182
- .button-glossy-demo-1:after, .button-glossy-demo-1:before {
183
- content: "";
184
- position: absolute;
185
- display: inline-block;
186
- }
187
- .button-glossy-demo-1:after {
188
- width: 88px;
189
- height: 28px;
190
- left: 1px;
191
- top: 1px;
192
- z-index: 2;
193
- }
194
- .button-glossy-demo-1:before {
195
- width: 86px;
196
- height: 26px;
197
- left: 2px;
198
- top: 2px;
199
- z-index: 3;
200
- }
201
- .button-glossy-demo-1 span {
202
- position: relative;
203
- z-index: 4;
204
- line-height: 30px;
205
- }
206
- .button-glossy-demo-1 span {
207
- color: white;
208
- }
209
- .button-glossy-demo-1:after, .button-glossy-demo-1:before {
210
- -webkit-border-radius: 4px;
211
- -moz-border-radius: 4px;
212
- -ms-border-radius: 4px;
213
- -o-border-radius: 4px;
214
- border-radius: 4px;
215
- }
216
- .button-glossy-demo-1:after {
217
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(15%, #f2a4a8), color-stop(100%, #150304)) 50%;
218
- background: -webkit-linear-gradient(#f2a4a8 15%, #150304) 50%;
219
- background: -moz-linear-gradient(#f2a4a8 15%, #150304) 50%;
220
- background: -o-linear-gradient(#f2a4a8 15%, #150304) 50%;
221
- background: linear-gradient(#f2a4a8 15%, #150304) 50%;
222
- }
223
- .button-glossy-demo-1:before {
224
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #de1f2a), color-stop(100%, #c81c26)), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b11922), color-stop(100%, #6e0f15));
225
- background: -webkit-linear-gradient(#de1f2a, #c81c26), -webkit-linear-gradient(#b11922, #6e0f15);
226
- background: -moz-linear-gradient(#de1f2a, #c81c26), -moz-linear-gradient(#b11922, #6e0f15);
227
- background: -o-linear-gradient(#de1f2a, #c81c26), -o-linear-gradient(#b11922, #6e0f15);
228
- background: linear-gradient(#de1f2a, #c81c26), linear-gradient(#b11922, #6e0f15);
229
- background-position: left top, left 13px;
230
- }
231
- .button-glossy-demo-1, .button-glossy-demo-1:before {
232
- background-size: 100% 50%;
233
- background-repeat: no-repeat;
234
- }
235
- .button-glossy-demo-1:hover {
236
- text-decoration: none;
237
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e96168), color-stop(50%, #bf1b24), color-stop(100%, #f10c19));
238
- background: -webkit-linear-gradient(#e96168, #bf1b24, #f10c19);
239
- background: -moz-linear-gradient(#e96168, #bf1b24, #f10c19);
240
- background: -o-linear-gradient(#e96168, #bf1b24, #f10c19);
241
- background: linear-gradient(#e96168, #bf1b24, #f10c19);
242
- }
243
- .button-glossy-demo-1:hover:after {
244
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4b1b5), color-stop(100%, #d11d27)) 50%;
245
- background: -webkit-linear-gradient(#f4b1b5 20%, #d11d27) 50%;
246
- background: -moz-linear-gradient(#f4b1b5 20%, #d11d27) 50%;
247
- background: -o-linear-gradient(#f4b1b5 20%, #d11d27) 50%;
248
- background: linear-gradient(#f4b1b5 20%, #d11d27) 50%;
249
- }
250
- .button-glossy-demo-1:hover:before {
251
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e96168), color-stop(50%, #bf1b24), color-stop(100%, #f10c19));
252
- background: -webkit-linear-gradient(#e96168, #bf1b24, #f10c19);
253
- background: -moz-linear-gradient(#e96168, #bf1b24, #f10c19);
254
- background: -o-linear-gradient(#e96168, #bf1b24, #f10c19);
255
- background: linear-gradient(#e96168, #bf1b24, #f10c19);
256
- }
257
- .button-glossy-demo-1:hover, .button-glossy-demo-1:hover:before {
258
- background-size: 100% 100%;
259
- background-position: left top;
260
- background-repeat: no-repeat;
261
- }
262
- .ie7 .button-glossy-demo-1, .ie8 .button-glossy-demo-1, .ie9 .button-glossy-demo-1 {
263
- -webkit-border-radius: none;
264
- -moz-border-radius: none;
265
- -ms-border-radius: none;
266
- -o-border-radius: none;
267
- border-radius: none;
268
- background: url('../img/picasso-buttons-glossy.png');
269
- background-position: 0 -1px;
270
- }
271
- .ie7 .button-glossy-demo-1:hover, .ie8 .button-glossy-demo-1:hover, .ie9 .button-glossy-demo-1:hover {
272
- background-position: 0 -31px;
273
- }
274
- .ie9 .button-glossy-demo-1 {
275
- -webkit-border-radius: none;
276
- -moz-border-radius: none;
277
- -ms-border-radius: none;
278
- -o-border-radius: none;
279
- border-radius: none;
280
- }
281
-
282
- .button-glossy-demo-2 {
283
- width: 70px;
284
- height: 30px;
285
- display: inline-block;
286
- text-align: center;
287
- position: relative;
288
- z-index: 1;
289
- font-family: sans-serif;
290
- font-size: 12px;
291
- text-decoration: none;
292
- cursor: pointer;
293
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #0077b3)), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #006699), color-stop(100%, #00334d));
294
- background: -webkit-linear-gradient(#0088cc, #0077b3), -webkit-linear-gradient(#006699, #00334d);
295
- background: -moz-linear-gradient(#0088cc, #0077b3), -moz-linear-gradient(#006699, #00334d);
296
- background: -o-linear-gradient(#0088cc, #0077b3), -o-linear-gradient(#006699, #00334d);
297
- background: linear-gradient(#0088cc, #0077b3), linear-gradient(#006699, #00334d);
298
- -webkit-border-radius: 5px;
299
- -moz-border-radius: 5px;
300
- -ms-border-radius: 5px;
301
- -o-border-radius: 5px;
302
- border-radius: 5px;
303
- background-position: left top, left 15px;
304
- }
305
- .button-glossy-demo-2:after, .button-glossy-demo-2:before {
306
- content: "";
307
- position: absolute;
308
- display: inline-block;
309
- }
310
- .button-glossy-demo-2:after {
311
- width: 68px;
312
- height: 28px;
313
- left: 1px;
314
- top: 1px;
315
- z-index: 2;
316
- }
317
- .button-glossy-demo-2:before {
318
- width: 66px;
319
- height: 26px;
320
- left: 2px;
321
- top: 2px;
322
- z-index: 3;
323
- }
324
- .button-glossy-demo-2 span {
325
- position: relative;
326
- z-index: 4;
327
- line-height: 30px;
328
- }
329
- .button-glossy-demo-2 span {
330
- color: white;
331
- }
332
- .button-glossy-demo-2:after, .button-glossy-demo-2:before {
333
- -webkit-border-radius: 4px;
334
- -moz-border-radius: 4px;
335
- -ms-border-radius: 4px;
336
- -o-border-radius: 4px;
337
- border-radius: 4px;
338
- }
339
- .button-glossy-demo-2:after {
340
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(15%, #66ccff), color-stop(100%, #000000)) 50%;
341
- background: -webkit-linear-gradient(#66ccff 15%, #000000) 50%;
342
- background: -moz-linear-gradient(#66ccff 15%, #000000) 50%;
343
- background: -o-linear-gradient(#66ccff 15%, #000000) 50%;
344
- background: linear-gradient(#66ccff 15%, #000000) 50%;
345
- }
346
- .button-glossy-demo-2:before {
347
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #0077b3)), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #006699), color-stop(100%, #00334d));
348
- background: -webkit-linear-gradient(#0088cc, #0077b3), -webkit-linear-gradient(#006699, #00334d);
349
- background: -moz-linear-gradient(#0088cc, #0077b3), -moz-linear-gradient(#006699, #00334d);
350
- background: -o-linear-gradient(#0088cc, #0077b3), -o-linear-gradient(#006699, #00334d);
351
- background: linear-gradient(#0088cc, #0077b3), linear-gradient(#006699, #00334d);
352
- background-position: left top, left 13px;
353
- }
354
- .button-glossy-demo-2, .button-glossy-demo-2:before {
355
- background-size: 100% 50%;
356
- background-repeat: no-repeat;
357
- }
358
- .button-glossy-demo-2:hover {
359
- text-decoration: none;
360
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1ab2ff), color-stop(50%, #0070a8), color-stop(100%, #0088cc));
361
- background: -webkit-linear-gradient(#1ab2ff, #0070a8, #0088cc);
362
- background: -moz-linear-gradient(#1ab2ff, #0070a8, #0088cc);
363
- background: -o-linear-gradient(#1ab2ff, #0070a8, #0088cc);
364
- background: linear-gradient(#1ab2ff, #0070a8, #0088cc);
365
- }
366
- .button-glossy-demo-2:hover:after {
367
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #75d1ff), color-stop(100%, #007ebd)) 50%;
368
- background: -webkit-linear-gradient(#75d1ff 20%, #007ebd) 50%;
369
- background: -moz-linear-gradient(#75d1ff 20%, #007ebd) 50%;
370
- background: -o-linear-gradient(#75d1ff 20%, #007ebd) 50%;
371
- background: linear-gradient(#75d1ff 20%, #007ebd) 50%;
372
- }
373
- .button-glossy-demo-2:hover:before {
374
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1ab2ff), color-stop(50%, #0070a8), color-stop(100%, #0088cc));
375
- background: -webkit-linear-gradient(#1ab2ff, #0070a8, #0088cc);
376
- background: -moz-linear-gradient(#1ab2ff, #0070a8, #0088cc);
377
- background: -o-linear-gradient(#1ab2ff, #0070a8, #0088cc);
378
- background: linear-gradient(#1ab2ff, #0070a8, #0088cc);
379
- }
380
- .button-glossy-demo-2:hover, .button-glossy-demo-2:hover:before {
381
- background-size: 100% 100%;
382
- background-position: left top;
383
- background-repeat: no-repeat;
384
- }
385
- .ie7 .button-glossy-demo-2, .ie8 .button-glossy-demo-2, .ie9 .button-glossy-demo-2 {
386
- -webkit-border-radius: none;
387
- -moz-border-radius: none;
388
- -ms-border-radius: none;
389
- -o-border-radius: none;
390
- border-radius: none;
391
- background: url('../img/picasso-buttons-glossy.png');
392
- background-position: 0 -61px;
393
- }
394
- .ie7 .button-glossy-demo-2:hover, .ie8 .button-glossy-demo-2:hover, .ie9 .button-glossy-demo-2:hover {
395
- background-position: 0 -91px;
396
- }
397
- .ie9 .button-glossy-demo-2 {
398
- -webkit-border-radius: none;
399
- -moz-border-radius: none;
400
- -ms-border-radius: none;
401
- -o-border-radius: none;
402
- border-radius: none;
403
- }
404
-
405
- .button-glossy-demo-3 {
406
- width: 80px;
407
- height: 30px;
408
- display: inline-block;
409
- text-align: center;
410
- position: relative;
411
- z-index: 1;
412
- font-family: sans-serif;
413
- font-size: 12px;
414
- text-decoration: none;
415
- cursor: pointer;
416
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbb450), color-stop(100%, #faa937)), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fa9f1e), color-stop(100%, #c77605));
417
- background: -webkit-linear-gradient(#fbb450, #faa937), -webkit-linear-gradient(#fa9f1e, #c77605);
418
- background: -moz-linear-gradient(#fbb450, #faa937), -moz-linear-gradient(#fa9f1e, #c77605);
419
- background: -o-linear-gradient(#fbb450, #faa937), -o-linear-gradient(#fa9f1e, #c77605);
420
- background: linear-gradient(#fbb450, #faa937), linear-gradient(#fa9f1e, #c77605);
421
- -webkit-border-radius: 5px;
422
- -moz-border-radius: 5px;
423
- -ms-border-radius: 5px;
424
- -o-border-radius: 5px;
425
- border-radius: 5px;
426
- background-position: left top, left 15px;
427
- }
428
- .button-glossy-demo-3:after, .button-glossy-demo-3:before {
429
- content: "";
430
- position: absolute;
431
- display: inline-block;
432
- }
433
- .button-glossy-demo-3:after {
434
- width: 78px;
435
- height: 28px;
436
- left: 1px;
437
- top: 1px;
438
- z-index: 2;
439
- }
440
- .button-glossy-demo-3:before {
441
- width: 76px;
442
- height: 26px;
443
- left: 2px;
444
- top: 2px;
445
- z-index: 3;
446
- }
447
- .button-glossy-demo-3 span {
448
- position: relative;
449
- z-index: 4;
450
- line-height: 30px;
451
- }
452
- .button-glossy-demo-3 span {
453
- color: white;
454
- }
455
- .button-glossy-demo-3:after, .button-glossy-demo-3:before {
456
- -webkit-border-radius: 4px;
457
- -moz-border-radius: 4px;
458
- -ms-border-radius: 4px;
459
- -o-border-radius: 4px;
460
- border-radius: 4px;
461
- }
462
- .button-glossy-demo-3:after {
463
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(15%, #fef4e6), color-stop(100%, #633b02)) 50%;
464
- background: -webkit-linear-gradient(#fef4e6 15%, #633b02) 50%;
465
- background: -moz-linear-gradient(#fef4e6 15%, #633b02) 50%;
466
- background: -o-linear-gradient(#fef4e6 15%, #633b02) 50%;
467
- background: linear-gradient(#fef4e6 15%, #633b02) 50%;
468
- }
469
- .button-glossy-demo-3:before {
470
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbb450), color-stop(100%, #faa937)), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fa9f1e), color-stop(100%, #c77605));
471
- background: -webkit-linear-gradient(#fbb450, #faa937), -webkit-linear-gradient(#fa9f1e, #c77605);
472
- background: -moz-linear-gradient(#fbb450, #faa937), -moz-linear-gradient(#fa9f1e, #c77605);
473
- background: -o-linear-gradient(#fbb450, #faa937), -o-linear-gradient(#fa9f1e, #c77605);
474
- background: linear-gradient(#fbb450, #faa937), linear-gradient(#fa9f1e, #c77605);
475
- background-position: left top, left 13px;
476
- }
477
- .button-glossy-demo-3, .button-glossy-demo-3:before {
478
- background-size: 100% 50%;
479
- background-repeat: no-repeat;
480
- }
481
- .button-glossy-demo-3:hover {
482
- text-decoration: none;
483
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fdd49b), color-stop(50%, #faa52d), color-stop(100%, #ffb54c));
484
- background: -webkit-linear-gradient(#fdd49b, #faa52d, #ffb54c);
485
- background: -moz-linear-gradient(#fdd49b, #faa52d, #ffb54c);
486
- background: -o-linear-gradient(#fdd49b, #faa52d, #ffb54c);
487
- background: linear-gradient(#fdd49b, #faa52d, #ffb54c);
488
- }
489
- .button-glossy-demo-3:hover:after {
490
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #fffbf5), color-stop(100%, #fbae41)) 50%;
491
- background: -webkit-linear-gradient(#fffbf5 20%, #fbae41) 50%;
492
- background: -moz-linear-gradient(#fffbf5 20%, #fbae41) 50%;
493
- background: -o-linear-gradient(#fffbf5 20%, #fbae41) 50%;
494
- background: linear-gradient(#fffbf5 20%, #fbae41) 50%;
495
- }
496
- .button-glossy-demo-3:hover:before {
497
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fdd49b), color-stop(50%, #faa52d), color-stop(100%, #ffb54c));
498
- background: -webkit-linear-gradient(#fdd49b, #faa52d, #ffb54c);
499
- background: -moz-linear-gradient(#fdd49b, #faa52d, #ffb54c);
500
- background: -o-linear-gradient(#fdd49b, #faa52d, #ffb54c);
501
- background: linear-gradient(#fdd49b, #faa52d, #ffb54c);
502
- }
503
- .button-glossy-demo-3:hover, .button-glossy-demo-3:hover:before {
504
- background-size: 100% 100%;
505
- background-position: left top;
506
- background-repeat: no-repeat;
507
- }
508
- .ie7 .button-glossy-demo-3, .ie8 .button-glossy-demo-3, .ie9 .button-glossy-demo-3 {
509
- -webkit-border-radius: none;
510
- -moz-border-radius: none;
511
- -ms-border-radius: none;
512
- -o-border-radius: none;
513
- border-radius: none;
514
- background: url('../img/picasso-buttons-glossy.png');
515
- background-position: 0 -121px;
516
- }
517
- .ie7 .button-glossy-demo-3:hover, .ie8 .button-glossy-demo-3:hover, .ie9 .button-glossy-demo-3:hover {
518
- background-position: 0 -151px;
519
- }
520
- .ie9 .button-glossy-demo-3 {
521
- -webkit-border-radius: none;
522
- -moz-border-radius: none;
523
- -ms-border-radius: none;
524
- -o-border-radius: none;
525
- border-radius: none;
526
- }
527
-
528
159
  .button-3d-demo-1 {
529
160
  overflow: hidden;
530
161
  display: inline-block;
@@ -632,7 +263,7 @@ body {
632
263
  display: inline-block;
633
264
  line-height: 2.2em;
634
265
  color: white;
635
- border: 1px solid #004466;
266
+ border: 1px solid #00132e;
636
267
  font-family: sans-serif;
637
268
  font-size: 13px;
638
269
  text-decoration: none;
@@ -664,34 +295,34 @@ body {
664
295
  color: white;
665
296
  }
666
297
  .button-3d-demo-2 span {
667
- background-color: #0088cc;
668
- background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #002233));
669
- background-image: -webkit-linear-gradient(#0088cc, #002233);
670
- background-image: -moz-linear-gradient(#0088cc, #002233);
671
- background-image: -o-linear-gradient(#0088cc, #002233);
672
- background-image: linear-gradient(#0088cc, #002233);
298
+ background-color: #013d93;
299
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #013d93), color-stop(100%, #000000));
300
+ background-image: -webkit-linear-gradient(#013d93, #000000);
301
+ background-image: -moz-linear-gradient(#013d93, #000000);
302
+ background-image: -o-linear-gradient(#013d93, #000000);
303
+ background-image: linear-gradient(#013d93, #000000);
673
304
  -webkit-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
674
305
  -moz-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
675
306
  box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
676
307
  }
677
308
  .button-3d-demo-2 span:hover {
678
- background-color: #0088cc;
679
- background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #004466));
680
- background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), #004466);
681
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), #004466);
682
- background-image: -o-linear-gradient(rgba(255, 255, 255, 0), #004466);
683
- background-image: linear-gradient(rgba(255, 255, 255, 0), #004466);
684
- -webkit-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #0088cc;
685
- -moz-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #0088cc;
686
- box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #0088cc;
309
+ background-color: #003d94;
310
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #00132e));
311
+ background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), #00132e);
312
+ background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), #00132e);
313
+ background-image: -o-linear-gradient(rgba(255, 255, 255, 0), #00132e);
314
+ background-image: linear-gradient(rgba(255, 255, 255, 0), #00132e);
315
+ -webkit-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #003d94;
316
+ -moz-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #003d94;
317
+ box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #003d94;
687
318
  }
688
319
  .button-3d-demo-2 span:active {
689
320
  text-shadow: 0 -1px 0 black;
690
- background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #002233));
691
- background-image: -webkit-linear-gradient(#0088cc, #002233);
692
- background-image: -moz-linear-gradient(#0088cc, #002233);
693
- background-image: -o-linear-gradient(#0088cc, #002233);
694
- background-image: linear-gradient(#0088cc, #002233);
321
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #013d93), color-stop(100%, #000000));
322
+ background-image: -webkit-linear-gradient(#013d93, #000000);
323
+ background-image: -moz-linear-gradient(#013d93, #000000);
324
+ background-image: -o-linear-gradient(#013d93, #000000);
325
+ background-image: linear-gradient(#013d93, #000000);
695
326
  -webkit-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.1), inset 0 0.1em 0.2em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(0, 0, 0, 0.1), inset 0 0 1em rgba(0, 0, 0, 0.75);
696
327
  -moz-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.1), inset 0 0.1em 0.2em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(0, 0, 0, 0.1), inset 0 0 1em rgba(0, 0, 0, 0.75);
697
328
  box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.1), inset 0 0.1em 0.2em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(0, 0, 0, 0.1), inset 0 0 1em rgba(0, 0, 0, 0.75);
@@ -714,15 +345,15 @@ body {
714
345
  }
715
346
  .ie7 .button-3d-demo-2 span, .ie8 .button-3d-demo-2 span, .ie9 .button-3d-demo-2 span {
716
347
  *zoom: 1;
717
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#000088CC', endColorstr='#FF002233');
348
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00013D93', endColorstr='#FF000000');
718
349
  }
719
350
  .ie7 .button-3d-demo-2 span:hover, .ie8 .button-3d-demo-2 span:hover, .ie9 .button-3d-demo-2 span:hover {
720
351
  *zoom: 1;
721
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FFFFFF', endColorstr='#FF004466');
352
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FFFFFF', endColorstr='#FF00132E');
722
353
  }
723
354
  .ie7 .button-3d-demo-2 span:active, .ie8 .button-3d-demo-2 span:active, .ie9 .button-3d-demo-2 span:active {
724
355
  *zoom: 1;
725
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#000088CC', endColorstr='#FF002233');
356
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00013D93', endColorstr='#FF000000');
726
357
  }
727
358
  .ie7 .button-3d-demo-2.disabled span, .ie7 .button-3d-demo-2.disabled span:hover, .ie7 .button-3d-demo-2.disabled span:active, .ie8 .button-3d-demo-2.disabled span, .ie8 .button-3d-demo-2.disabled span:hover, .ie8 .button-3d-demo-2.disabled span:active, .ie9 .button-3d-demo-2.disabled span, .ie9 .button-3d-demo-2.disabled span:hover, .ie9 .button-3d-demo-2.disabled span:active {
728
359
  *zoom: 1;
@@ -1035,278 +666,6 @@ body {
1035
666
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF979797', endColorstr='#FF4B4B4B');
1036
667
  }
1037
668
 
1038
- .button-mini-demo-1 {
1039
- display: inline-block;
1040
- height: 20px;
1041
- padding-right: 10px;
1042
- padding-right: 10px;
1043
- font-family: sans-serif;
1044
- text-decoration: none;
1045
- cursor: pointer;
1046
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f0f0f0), color-stop(50%, #e3e3e3), color-stop(51%, #d6d6d6), color-stop(100%, #cacaca));
1047
- background: -webkit-linear-gradient(top, #f0f0f0 0%, #e3e3e3 50%, #d6d6d6 51%, #cacaca 100%);
1048
- background: -moz-linear-gradient(top, #f0f0f0 0%, #e3e3e3 50%, #d6d6d6 51%, #cacaca 100%);
1049
- background: -o-linear-gradient(top, #f0f0f0 0%, #e3e3e3 50%, #d6d6d6 51%, #cacaca 100%);
1050
- background: linear-gradient(top, #f0f0f0 0%, #e3e3e3 50%, #d6d6d6 51%, #cacaca 100%);
1051
- -webkit-border-radius: 20px;
1052
- -moz-border-radius: 20px;
1053
- -ms-border-radius: 20px;
1054
- -o-border-radius: 20px;
1055
- border-radius: 20px;
1056
- -webkit-box-shadow: #333333 0px 1px 2px 0px;
1057
- -moz-box-shadow: #333333 0px 1px 2px 0px;
1058
- box-shadow: #333333 0px 1px 2px 0px;
1059
- }
1060
- .button-mini-demo-1 span {
1061
- height: 20px;
1062
- line-height: 20px;
1063
- padding-left: 10px;
1064
- display: block;
1065
- }
1066
- .button-mini-demo-1:hover {
1067
- text-decoration: none;
1068
- background: #e3e3e3;
1069
- }
1070
- .button-mini-demo-1:active {
1071
- background: #cacaca;
1072
- -webkit-box-shadow: #999999 0px 0px 3px 3px inset;
1073
- -moz-box-shadow: #999999 0px 0px 3px 3px inset;
1074
- box-shadow: #999999 0px 0px 3px 3px inset;
1075
- }
1076
- .button-mini-demo-1 span {
1077
- color: #0e6695;
1078
- font-size: 11px;
1079
- }
1080
- .ie7 .button-mini-demo-1, .ie8 .button-mini-demo-1, .ie9 .button-mini-demo-1 {
1081
- background: url('../img/picasso-buttons-mini.png');
1082
- background-position: right -1px;
1083
- }
1084
- .ie7 .button-mini-demo-1:hover, .ie8 .button-mini-demo-1:hover, .ie9 .button-mini-demo-1:hover {
1085
- background-position: right -21px;
1086
- }
1087
- .ie7 .button-mini-demo-1 span, .ie8 .button-mini-demo-1 span, .ie9 .button-mini-demo-1 span {
1088
- background-image: url('../img/picasso-buttons-mini.png');
1089
- background-color: white;
1090
- background-position: 0 -1px;
1091
- }
1092
- .ie7 .button-mini-demo-1 span:hover, .ie8 .button-mini-demo-1 span:hover, .ie9 .button-mini-demo-1 span:hover {
1093
- background-position: 0 -21px;
1094
- }
1095
- .ie9 .button-mini-demo-1 {
1096
- -webkit-border-radius: none;
1097
- -moz-border-radius: none;
1098
- -ms-border-radius: none;
1099
- -o-border-radius: none;
1100
- border-radius: none;
1101
- -webkit-box-shadow: none;
1102
- -moz-box-shadow: none;
1103
- box-shadow: none;
1104
- }
1105
-
1106
- .button-mini-demo-2 {
1107
- display: inline-block;
1108
- height: 20px;
1109
- padding-right: 10px;
1110
- padding-right: 10px;
1111
- font-family: sans-serif;
1112
- text-decoration: none;
1113
- cursor: pointer;
1114
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(50%, #0077b3), color-stop(51%, #006699), color-stop(100%, #005580));
1115
- background: -webkit-linear-gradient(top, #0088cc 0%, #0077b3 50%, #006699 51%, #005580 100%);
1116
- background: -moz-linear-gradient(top, #0088cc 0%, #0077b3 50%, #006699 51%, #005580 100%);
1117
- background: -o-linear-gradient(top, #0088cc 0%, #0077b3 50%, #006699 51%, #005580 100%);
1118
- background: linear-gradient(top, #0088cc 0%, #0077b3 50%, #006699 51%, #005580 100%);
1119
- -webkit-border-radius: 20px;
1120
- -moz-border-radius: 20px;
1121
- -ms-border-radius: 20px;
1122
- -o-border-radius: 20px;
1123
- border-radius: 20px;
1124
- -webkit-box-shadow: #333333 0px 1px 2px 0px;
1125
- -moz-box-shadow: #333333 0px 1px 2px 0px;
1126
- box-shadow: #333333 0px 1px 2px 0px;
1127
- }
1128
- .button-mini-demo-2 span {
1129
- height: 20px;
1130
- line-height: 20px;
1131
- padding-left: 10px;
1132
- display: block;
1133
- }
1134
- .button-mini-demo-2:hover {
1135
- text-decoration: none;
1136
- background: #0077b3;
1137
- }
1138
- .button-mini-demo-2:active {
1139
- background: #005580;
1140
- -webkit-box-shadow: #999999 0px 0px 3px 3px inset;
1141
- -moz-box-shadow: #999999 0px 0px 3px 3px inset;
1142
- box-shadow: #999999 0px 0px 3px 3px inset;
1143
- }
1144
- .button-mini-demo-2 span {
1145
- color: white;
1146
- font-size: 11px;
1147
- }
1148
- .ie7 .button-mini-demo-2, .ie8 .button-mini-demo-2, .ie9 .button-mini-demo-2 {
1149
- background: url('../img/picasso-buttons-mini.png');
1150
- background-position: right -41px;
1151
- }
1152
- .ie7 .button-mini-demo-2:hover, .ie8 .button-mini-demo-2:hover, .ie9 .button-mini-demo-2:hover {
1153
- background-position: right -61px;
1154
- }
1155
- .ie7 .button-mini-demo-2 span, .ie8 .button-mini-demo-2 span, .ie9 .button-mini-demo-2 span {
1156
- background-image: url('../img/picasso-buttons-mini.png');
1157
- background-color: white;
1158
- background-position: 0 -41px;
1159
- }
1160
- .ie7 .button-mini-demo-2 span:hover, .ie8 .button-mini-demo-2 span:hover, .ie9 .button-mini-demo-2 span:hover {
1161
- background-position: 0 -61px;
1162
- }
1163
- .ie9 .button-mini-demo-2 {
1164
- -webkit-border-radius: none;
1165
- -moz-border-radius: none;
1166
- -ms-border-radius: none;
1167
- -o-border-radius: none;
1168
- border-radius: none;
1169
- -webkit-box-shadow: none;
1170
- -moz-box-shadow: none;
1171
- box-shadow: none;
1172
- }
1173
-
1174
- .button-mini-demo-3 {
1175
- display: inline-block;
1176
- height: 20px;
1177
- padding-right: 10px;
1178
- padding-right: 10px;
1179
- font-family: sans-serif;
1180
- text-decoration: none;
1181
- cursor: pointer;
1182
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #da4f49), color-stop(50%, #d63b34), color-stop(51%, #c72f29), color-stop(100%, #b22a24));
1183
- background: -webkit-linear-gradient(top, #da4f49 0%, #d63b34 50%, #c72f29 51%, #b22a24 100%);
1184
- background: -moz-linear-gradient(top, #da4f49 0%, #d63b34 50%, #c72f29 51%, #b22a24 100%);
1185
- background: -o-linear-gradient(top, #da4f49 0%, #d63b34 50%, #c72f29 51%, #b22a24 100%);
1186
- background: linear-gradient(top, #da4f49 0%, #d63b34 50%, #c72f29 51%, #b22a24 100%);
1187
- -webkit-border-radius: 20px;
1188
- -moz-border-radius: 20px;
1189
- -ms-border-radius: 20px;
1190
- -o-border-radius: 20px;
1191
- border-radius: 20px;
1192
- -webkit-box-shadow: #333333 0px 1px 2px 0px;
1193
- -moz-box-shadow: #333333 0px 1px 2px 0px;
1194
- box-shadow: #333333 0px 1px 2px 0px;
1195
- }
1196
- .button-mini-demo-3 span {
1197
- height: 20px;
1198
- line-height: 20px;
1199
- padding-left: 10px;
1200
- display: block;
1201
- }
1202
- .button-mini-demo-3:hover {
1203
- text-decoration: none;
1204
- background: #d63b34;
1205
- }
1206
- .button-mini-demo-3:active {
1207
- background: #b22a24;
1208
- -webkit-box-shadow: #999999 0px 0px 3px 3px inset;
1209
- -moz-box-shadow: #999999 0px 0px 3px 3px inset;
1210
- box-shadow: #999999 0px 0px 3px 3px inset;
1211
- }
1212
- .button-mini-demo-3 span {
1213
- color: white;
1214
- font-size: 11px;
1215
- }
1216
- .ie7 .button-mini-demo-3, .ie8 .button-mini-demo-3, .ie9 .button-mini-demo-3 {
1217
- background: url('../img/picasso-buttons-mini.png');
1218
- background-position: right -81px;
1219
- }
1220
- .ie7 .button-mini-demo-3:hover, .ie8 .button-mini-demo-3:hover, .ie9 .button-mini-demo-3:hover {
1221
- background-position: right -101px;
1222
- }
1223
- .ie7 .button-mini-demo-3 span, .ie8 .button-mini-demo-3 span, .ie9 .button-mini-demo-3 span {
1224
- background-image: url('../img/picasso-buttons-mini.png');
1225
- background-color: white;
1226
- background-position: 0 -81px;
1227
- }
1228
- .ie7 .button-mini-demo-3 span:hover, .ie8 .button-mini-demo-3 span:hover, .ie9 .button-mini-demo-3 span:hover {
1229
- background-position: 0 -101px;
1230
- }
1231
- .ie9 .button-mini-demo-3 {
1232
- -webkit-border-radius: none;
1233
- -moz-border-radius: none;
1234
- -ms-border-radius: none;
1235
- -o-border-radius: none;
1236
- border-radius: none;
1237
- -webkit-box-shadow: none;
1238
- -moz-box-shadow: none;
1239
- box-shadow: none;
1240
- }
1241
-
1242
- .button-mini-demo-4 {
1243
- display: inline-block;
1244
- height: 20px;
1245
- padding-right: 10px;
1246
- padding-right: 10px;
1247
- font-family: sans-serif;
1248
- text-decoration: none;
1249
- cursor: pointer;
1250
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #414141), color-stop(50%, #343434), color-stop(51%, #272727), color-stop(100%, #1b1b1b));
1251
- background: -webkit-linear-gradient(top, #414141 0%, #343434 50%, #272727 51%, #1b1b1b 100%);
1252
- background: -moz-linear-gradient(top, #414141 0%, #343434 50%, #272727 51%, #1b1b1b 100%);
1253
- background: -o-linear-gradient(top, #414141 0%, #343434 50%, #272727 51%, #1b1b1b 100%);
1254
- background: linear-gradient(top, #414141 0%, #343434 50%, #272727 51%, #1b1b1b 100%);
1255
- -webkit-border-radius: 20px;
1256
- -moz-border-radius: 20px;
1257
- -ms-border-radius: 20px;
1258
- -o-border-radius: 20px;
1259
- border-radius: 20px;
1260
- -webkit-box-shadow: #333333 0px 1px 2px 0px;
1261
- -moz-box-shadow: #333333 0px 1px 2px 0px;
1262
- box-shadow: #333333 0px 1px 2px 0px;
1263
- }
1264
- .button-mini-demo-4 span {
1265
- height: 20px;
1266
- line-height: 20px;
1267
- padding-left: 10px;
1268
- display: block;
1269
- }
1270
- .button-mini-demo-4:hover {
1271
- text-decoration: none;
1272
- background: #343434;
1273
- }
1274
- .button-mini-demo-4:active {
1275
- background: #1b1b1b;
1276
- -webkit-box-shadow: #999999 0px 0px 3px 3px inset;
1277
- -moz-box-shadow: #999999 0px 0px 3px 3px inset;
1278
- box-shadow: #999999 0px 0px 3px 3px inset;
1279
- }
1280
- .button-mini-demo-4 span {
1281
- color: white;
1282
- font-size: 11px;
1283
- }
1284
- .ie7 .button-mini-demo-4, .ie8 .button-mini-demo-4, .ie9 .button-mini-demo-4 {
1285
- background: url('../img/picasso-buttons-mini.png');
1286
- background-position: right -121px;
1287
- }
1288
- .ie7 .button-mini-demo-4:hover, .ie8 .button-mini-demo-4:hover, .ie9 .button-mini-demo-4:hover {
1289
- background-position: right -141px;
1290
- }
1291
- .ie7 .button-mini-demo-4 span, .ie8 .button-mini-demo-4 span, .ie9 .button-mini-demo-4 span {
1292
- background-image: url('../img/picasso-buttons-mini.png');
1293
- background-color: white;
1294
- background-position: 0 -121px;
1295
- }
1296
- .ie7 .button-mini-demo-4 span:hover, .ie8 .button-mini-demo-4 span:hover, .ie9 .button-mini-demo-4 span:hover {
1297
- background-position: 0 -141px;
1298
- }
1299
- .ie9 .button-mini-demo-4 {
1300
- -webkit-border-radius: none;
1301
- -moz-border-radius: none;
1302
- -ms-border-radius: none;
1303
- -o-border-radius: none;
1304
- border-radius: none;
1305
- -webkit-box-shadow: none;
1306
- -moz-box-shadow: none;
1307
- box-shadow: none;
1308
- }
1309
-
1310
669
  .list-grid-demo-1:before, .list-grid-demo-1:after {
1311
670
  content: "";
1312
671
  display: table;
@@ -1403,7 +762,7 @@ body {
1403
762
  padding: 0 15px;
1404
763
  }
1405
764
  .ie7 .nav-demo-1 ul li, .ie8 .nav-demo-1 ul li, .ie9 .nav-demo-1 ul li {
1406
- height: 46px;
765
+ height: 40px;
1407
766
  }
1408
767
  .nav-demo-1 ul {
1409
768
  list-style: none;
@@ -1457,40 +816,21 @@ body {
1457
816
  background-image: linear-gradient(#e6e6e6, #ffffff);
1458
817
  }
1459
818
  .ie7 .nav-demo-1 ul li, .ie8 .nav-demo-1 ul li, .ie9 .nav-demo-1 ul li {
1460
- border-left: none;
1461
- border-top: none;
1462
- border-bottom: none;
1463
- background: transparent url('../img/picasso-nav.png') no-repeat center -1px;
1464
- }
1465
- .ie7 .nav-demo-1 ul li a, .ie8 .nav-demo-1 ul li a, .ie9 .nav-demo-1 ul li a {
1466
- border-left: 1px solid #acacac;
819
+ border-top: 1px solid #acacac;
820
+ border-bottom: 1px solid #acacac;
821
+ background-color: white;
1467
822
  }
1468
823
  .ie7 .nav-demo-1 ul li:hover, .ie8 .nav-demo-1 ul li:hover, .ie9 .nav-demo-1 ul li:hover {
1469
- background: transparent url('../img/picasso-nav.png') center -47px no-repeat;
824
+ background: #f2f2f2;
1470
825
  }
1471
826
  .ie7 .nav-demo-1 ul li:first-child, .ie8 .nav-demo-1 ul li:first-child, .ie9 .nav-demo-1 ul li:first-child {
1472
- background: transparent url('../img/picasso-nav.png') no-repeat left -1px;
1473
- }
1474
- .ie7 .nav-demo-1 ul li:first-child a, .ie8 .nav-demo-1 ul li:first-child a, .ie9 .nav-demo-1 ul li:first-child a {
1475
- border-left: none;
1476
- }
1477
- .ie7 .nav-demo-1 ul li:first-child:hover, .ie8 .nav-demo-1 ul li:first-child:hover, .ie9 .nav-demo-1 ul li:first-child:hover {
1478
- background: transparent url('../img/picasso-nav.png') left -47px no-repeat;
1479
- }
1480
- .ie7 .nav-demo-1 ul li:first-child.active, .ie8 .nav-demo-1 ul li:first-child.active, .ie9 .nav-demo-1 ul li:first-child.active {
1481
- background: transparent url('../img/picasso-nav.png') no-repeat left -47px;
827
+ border-left: 1px solid #acacac;
1482
828
  }
1483
829
  .ie7 .nav-demo-1 ul .last, .ie8 .nav-demo-1 ul .last, .ie9 .nav-demo-1 ul .last {
1484
- background: transparent url('../img/picasso-nav.png') no-repeat right -47px;
1485
- }
1486
- .ie7 .nav-demo-1 ul .last:hover, .ie8 .nav-demo-1 ul .last:hover, .ie9 .nav-demo-1 ul .last:hover {
1487
- background: transparent url('../img/picasso-nav.png') right -47px no-repeat;
830
+ border-right: 1px solid #acacac;
1488
831
  }
1489
832
  .ie7 .nav-demo-1 ul .active, .ie8 .nav-demo-1 ul .active, .ie9 .nav-demo-1 ul .active {
1490
- background: transparent url('../img/picasso-nav.png') no-repeat center -47px;
1491
- }
1492
- .ie7 .nav-demo-1 ul .last.active, .ie8 .nav-demo-1 ul .last.active, .ie9 .nav-demo-1 ul .last.active {
1493
- background: transparent url('../img/picasso-nav.png') no-repeat right -47px;
833
+ background: #e6e6e6;
1494
834
  }
1495
835
  .ie9 .nav-demo-1 ul {
1496
836
  -webkit-box-shadow: none;
@@ -1573,13 +913,6 @@ body {
1573
913
  .ie7 .popup-demo-1 {
1574
914
  zoom: expression(this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="after" );
1575
915
  }
1576
- .ie7 .popup-demo-1 .popup-close, .ie8 .popup-demo-1 .popup-close {
1577
- line-height: 26px;
1578
- height: 26px;
1579
- width: 26px;
1580
- top: -13px;
1581
- right: -13px;
1582
- }
1583
916
  .popup-demo-1:after {
1584
917
  background: black;
1585
918
  background: rgba(0, 0, 0, 0.7);
@@ -1649,7 +982,7 @@ body {
1649
982
  filter: alpha(opacity=70);
1650
983
  }
1651
984
  .ie8 .popup-demo-1:after {
1652
- background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAEElEQVR4nGNi2MywmYkBCAAJ8gFrYOfxtwAAAABJRU5ErkJggg==');
985
+ background: magick-canvas(2px, 2px, magick-fill(black) magick-effect(fade, 0.3));
1653
986
  }
1654
987
  .ie7 .popup-demo-1 .popup-arrow, .ie8 .popup-demo-1 .popup-arrow {
1655
988
  filter: alpha(opacity=70);
@@ -1666,12 +999,6 @@ body {
1666
999
  .ie7 .popup-demo-1 .popup-arrow-right, .ie8 .popup-demo-1 .popup-arrow-right {
1667
1000
  border-left: 10px solid black;
1668
1001
  }
1669
- .ie7 .popup-demo-1 .popup-close, .ie8 .popup-demo-1 .popup-close {
1670
- border-width: 0;
1671
- background-color: transparent;
1672
- background: url('../img/picasso-popup.png');
1673
- background-position: 0 -1px;
1674
- }
1675
1002
 
1676
1003
  .popup-demo-2 {
1677
1004
  padding: 10px;
@@ -1732,13 +1059,6 @@ body {
1732
1059
  .ie7 .popup-demo-2 {
1733
1060
  zoom: expression(this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="after" );
1734
1061
  }
1735
- .ie7 .popup-demo-2 .popup-close, .ie8 .popup-demo-2 .popup-close {
1736
- line-height: 26px;
1737
- height: 26px;
1738
- width: 26px;
1739
- top: -13px;
1740
- right: -13px;
1741
- }
1742
1062
  .popup-demo-2:after {
1743
1063
  background: gray;
1744
1064
  background: rgba(128, 128, 128, 0.5);
@@ -1808,7 +1128,7 @@ body {
1808
1128
  filter: alpha(opacity=50);
1809
1129
  }
1810
1130
  .ie8 .popup-demo-2:after {
1811
- background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAD0lEQVR4nGNqAAImBiAAAA8oAgWZ/tnVAAAAAElFTkSuQmCC');
1131
+ background: magick-canvas(2px, 2px, magick-fill(gray) magick-effect(fade, 0.5));
1812
1132
  }
1813
1133
  .ie7 .popup-demo-2 .popup-arrow, .ie8 .popup-demo-2 .popup-arrow {
1814
1134
  filter: alpha(opacity=50);
@@ -1825,12 +1145,6 @@ body {
1825
1145
  .ie7 .popup-demo-2 .popup-arrow-right, .ie8 .popup-demo-2 .popup-arrow-right {
1826
1146
  border-left: 10px solid gray;
1827
1147
  }
1828
- .ie7 .popup-demo-2 .popup-close, .ie8 .popup-demo-2 .popup-close {
1829
- border-width: 0;
1830
- background-color: transparent;
1831
- background: url('../img/picasso-popup.png');
1832
- background-position: 0 -27px;
1833
- }
1834
1148
 
1835
1149
  .bubble-demo-1 {
1836
1150
  margin: 0 0 30px 0;
@@ -2626,7 +1940,7 @@ body {
2626
1940
 
2627
1941
  .despegar-warning-border-demo {
2628
1942
  padding: 10px;
2629
- background: #ff9900;
1943
+ background: #ffcc33;
2630
1944
  }
2631
1945
 
2632
1946
  .despegar-fill-bg-demo {
@@ -2634,6 +1948,16 @@ body {
2634
1948
  background: #84a8fb;
2635
1949
  }
2636
1950
 
1951
+ .despegar-body-bg-demo {
1952
+ padding: 10px;
1953
+ background: #e9eaee;
1954
+ }
1955
+
1956
+ .despegar-promo-text-demo {
1957
+ padding: 10px;
1958
+ background: #008c23;
1959
+ }
1960
+
2637
1961
  .clusters-demo-1 .cluster {
2638
1962
  margin-bottom: 15px;
2639
1963
  border: 1px solid #cccccc;
@@ -2722,8 +2046,6 @@ body {
2722
2046
  </a></li><li><a href="picasso-components-_popups.html">_popups
2723
2047
  </a></li><li><a href="picasso-components-_tooltips.html">_tooltips
2724
2048
  </a></li></ul></li><li><p>buttons</p><ul><li><a href="picasso-components-buttons-_3d.html">_3d
2725
- </a></li><li><a href="picasso-components-buttons-_glossy.html">_glossy
2726
- </a></li><li><a href="picasso-components-buttons-_mini.html">_mini
2727
2049
  </a></li></ul></li><li><p>despegar</p><ul><li><a href="picasso-despegar-_mixins.html">_mixins
2728
2050
  </a></li><li><a href="picasso-despegar-_variables.html">_variables
2729
2051
  </a></li></ul></li><li><p>utils</p><ul><li><a href="picasso-utils-_clearfix.html">_clearfix