picasso 0.4.2 → 0.5.0

Sign up to get free protection for your applications and to get access to all the features.
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