picasso 0.2.0 → 0.2.1

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 (13) hide show
  1. data/docs/all.html +30 -15
  2. data/docs/build/md/changelog.md +4 -0
  3. data/docs/build/md/components/buttons.md +30 -15
  4. data/docs/buttons.html +30 -15
  5. data/docs/css/style.css +292 -102
  6. data/docs/img/picasso.png +0 -0
  7. data/lib/picasso/version.rb +1 -1
  8. data/stylesheets/picasso/components/_navs.scss +14 -0
  9. data/stylesheets/picasso/components/_pagination.scss +13 -6
  10. data/stylesheets/picasso/components/buttons/_3d.scss +45 -28
  11. data/stylesheets/picasso/components/buttons/_glossy.scss +8 -1
  12. data/stylesheets/picasso/components/buttons/_mini.scss +6 -1
  13. metadata +5 -4
data/docs/all.html CHANGED
@@ -404,20 +404,35 @@ $ git push</code></pre>
404
404
  <pre><code class="lang-css">@import &quot;picasso/components/buttons&quot;;</code></pre>
405
405
  <a name="3d-buttons"></a><h3>3D Buttons</h3>
406
406
  <a name="ejemplos"></a><a name="ejemplos"></a><a name="ejemplos"></a><h4>Ejemplos</h4>
407
- <p><a class="button-3d-demo-1" href="#">Comprar</a>
408
- <a class="button-3d-demo-2" href="#">Buscar</a>
409
- <a class="button-3d-demo-3" href="#">Reservar</a>
410
- <a class="button-3d-demo-4" href="#">Un texto demasiado largo para este bot&oacute;n</a>
407
+ <p><a class="button-3d-demo-1">
408
+ <span>Comprar</span>
409
+ </a>
410
+ <a class="button-3d-demo-2">
411
+ <span>Buscar</span>
412
+ </a>
413
+ <a class="button-3d-demo-3">
414
+ <span>Reservar</span>
415
+ </a>
416
+ <a class="button-3d-demo-4">
417
+ <span>Un texto demasiado largo para este bot&oacute;n</span>
418
+ </a>
411
419
 
412
420
  </p>
413
- <p><a class="button-3d-demo-5" href="#">Bot&oacute;n full-width</a>
421
+ <p><a class="button-3d-demo-5">
422
+ <span>Bot&oacute;n full-width</span>
423
+ </a>
414
424
 
415
425
  </p>
416
- <p><a class="button-3d-demo-6" href="#">Bot&oacute;n redondeado</a>
426
+ <p><a class="button-3d-demo-6">
427
+ <span>Bot&oacute;n redondeado</span>
428
+ </a>
429
+
417
430
 
418
431
  </p>
419
432
  <a name="html"></a><a name="html"></a><a name="html"></a><h4>HTML</h4>
420
- <pre><code class="lang-html">&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;Comprar&lt;/a&gt;</code></pre>
433
+ <pre><code class="lang-html">&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
434
+ &lt;span&gt;Comprar&lt;/span&gt;
435
+ &lt;/a&gt;</code></pre>
421
436
  <h4>Sass</h4>
422
437
  <p>Mixin con los par&aacute;metros por defecto:
423
438
 
@@ -439,16 +454,16 @@ $ git push</code></pre>
439
454
  </p>
440
455
  <a name="glossy-buttons"></a><h3>Glossy Buttons</h3>
441
456
  <h4>Ejemplos</h4>
442
- <p><a class="button-glossy-demo-1" href="#">
457
+ <p><a class="button-glossy-demo-1">
443
458
  <span>Comprar</span>
444
459
  </a>
445
- <a class="button-glossy-demo-2" href="#">
460
+ <a class="button-glossy-demo-2">
446
461
  <span>Buscar</span>
447
462
  </a>
448
- <a class="button-glossy-demo-3" href="#">
463
+ <a class="button-glossy-demo-3">
449
464
  <span>Reservar</span>
450
465
  </a>
451
- <a class="button-glossy-demo-4" href="#">
466
+ <a class="button-glossy-demo-4">
452
467
  <span>Un texto demasiado largo para este bot&oacute;n</span>
453
468
  </a>
454
469
 
@@ -486,16 +501,16 @@ $ git push</code></pre>
486
501
 
487
502
  </p>
488
503
  <h4>Ejemplos</h4>
489
- <p><a class="button-mini-demo-1" href="#">
504
+ <p><a class="button-mini-demo-1">
490
505
  <span>Limpiar</span>
491
506
  </a>
492
- <a class="button-mini-demo-2" href="#">
507
+ <a class="button-mini-demo-2">
493
508
  <span>Abrir</span>
494
509
  </a>
495
- <a class="button-mini-demo-3" href="#">
510
+ <a class="button-mini-demo-3">
496
511
  <span>Descargar</span>
497
512
  </a>
498
- <a class="button-mini-demo-4" href="#">
513
+ <a class="button-mini-demo-4">
499
514
  <span>Ir</span>
500
515
  </a>
501
516
 
data/docs/build/md/changelog.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.2.1
4
+
5
+ * Fix sombras, gradientes y bordes de botones y nav de IE9;
6
+
3
7
  ## 0.2.0
4
8
 
5
9
  * Fix degradados de botones en Chrome;
data/docs/build/md/components/buttons.md CHANGED
@@ -14,19 +14,34 @@ Importaci&oacute;n:
14
14
 
15
15
  #### Ejemplos
16
16
 
17
- <a class="button-3d-demo-1" href="#">Comprar</a>
18
- <a class="button-3d-demo-2" href="#">Buscar</a>
19
- <a class="button-3d-demo-3" href="#">Reservar</a>
20
- <a class="button-3d-demo-4" href="#">Un texto demasiado largo para este bot&oacute;n</a>
17
+ <a class="button-3d-demo-1">
18
+ <span>Comprar</span>
19
+ </a>
20
+ <a class="button-3d-demo-2">
21
+ <span>Buscar</span>
22
+ </a>
23
+ <a class="button-3d-demo-3">
24
+ <span>Reservar</span>
25
+ </a>
26
+ <a class="button-3d-demo-4">
27
+ <span>Un texto demasiado largo para este bot&oacute;n</span>
28
+ </a>
29
+
30
+ <a class="button-3d-demo-5">
31
+ <span>Bot&oacute;n full-width</span>
32
+ </a>
21
33
 
22
- <a class="button-3d-demo-5" href="#">Bot&oacute;n full-width</a>
34
+ <a class="button-3d-demo-6">
35
+ <span>Bot&oacute;n redondeado</span>
36
+ </a>
23
37
 
24
- <a class="button-3d-demo-6" href="#">Bot&oacute;n redondeado</a>
25
38
 
26
39
  #### HTML
27
40
 
28
41
  ```html
29
- <a class="button" href="#">Comprar</a>
42
+ <a class="button" href="#">
43
+ <span>Comprar</span>
44
+ </a>
30
45
  ```
31
46
 
32
47
  #### Sass
@@ -57,16 +72,16 @@ La estrategia de los botones es siempre graceful degradation.
57
72
 
58
73
  #### Ejemplos
59
74
 
60
- <a class="button-glossy-demo-1" href="#">
75
+ <a class="button-glossy-demo-1">
61
76
  <span>Comprar</span>
62
77
  </a>
63
- <a class="button-glossy-demo-2" href="#">
78
+ <a class="button-glossy-demo-2">
64
79
  <span>Buscar</span>
65
80
  </a>
66
- <a class="button-glossy-demo-3" href="#">
81
+ <a class="button-glossy-demo-3">
67
82
  <span>Reservar</span>
68
83
  </a>
69
- <a class="button-glossy-demo-4" href="#">
84
+ <a class="button-glossy-demo-4">
70
85
  <span>Un texto demasiado largo para este bot&oacute;n</span>
71
86
  </a>
72
87
 
@@ -115,16 +130,16 @@ Perfectos para acciones simples en la interfaz.
115
130
 
116
131
  #### Ejemplos
117
132
 
118
- <a class="button-mini-demo-1" href="#">
133
+ <a class="button-mini-demo-1">
119
134
  <span>Limpiar</span>
120
135
  </a>
121
- <a class="button-mini-demo-2" href="#">
136
+ <a class="button-mini-demo-2">
122
137
  <span>Abrir</span>
123
138
  </a>
124
- <a class="button-mini-demo-3" href="#">
139
+ <a class="button-mini-demo-3">
125
140
  <span>Descargar</span>
126
141
  </a>
127
- <a class="button-mini-demo-4" href="#">
142
+ <a class="button-mini-demo-4">
128
143
  <span>Ir</span>
129
144
  </a>
130
145
 
data/docs/buttons.html CHANGED
@@ -176,20 +176,35 @@
176
176
  <pre><code class="lang-css">@import &quot;picasso/components/buttons&quot;;</code></pre>
177
177
  <a name="3d-buttons"></a><h3>3D Buttons</h3>
178
178
  <a name="ejemplos"></a><a name="ejemplos"></a><a name="ejemplos"></a><h4>Ejemplos</h4>
179
- <p><a class="button-3d-demo-1" href="#">Comprar</a>
180
- <a class="button-3d-demo-2" href="#">Buscar</a>
181
- <a class="button-3d-demo-3" href="#">Reservar</a>
182
- <a class="button-3d-demo-4" href="#">Un texto demasiado largo para este bot&oacute;n</a>
179
+ <p><a class="button-3d-demo-1">
180
+ <span>Comprar</span>
181
+ </a>
182
+ <a class="button-3d-demo-2">
183
+ <span>Buscar</span>
184
+ </a>
185
+ <a class="button-3d-demo-3">
186
+ <span>Reservar</span>
187
+ </a>
188
+ <a class="button-3d-demo-4">
189
+ <span>Un texto demasiado largo para este bot&oacute;n</span>
190
+ </a>
183
191
 
184
192
  </p>
185
- <p><a class="button-3d-demo-5" href="#">Bot&oacute;n full-width</a>
193
+ <p><a class="button-3d-demo-5">
194
+ <span>Bot&oacute;n full-width</span>
195
+ </a>
186
196
 
187
197
  </p>
188
- <p><a class="button-3d-demo-6" href="#">Bot&oacute;n redondeado</a>
198
+ <p><a class="button-3d-demo-6">
199
+ <span>Bot&oacute;n redondeado</span>
200
+ </a>
201
+
189
202
 
190
203
  </p>
191
204
  <a name="html"></a><a name="html"></a><a name="html"></a><h4>HTML</h4>
192
- <pre><code class="lang-html">&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;Comprar&lt;/a&gt;</code></pre>
205
+ <pre><code class="lang-html">&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
206
+ &lt;span&gt;Comprar&lt;/span&gt;
207
+ &lt;/a&gt;</code></pre>
193
208
  <h4>Sass</h4>
194
209
  <p>Mixin con los par&aacute;metros por defecto:
195
210
 
@@ -211,16 +226,16 @@
211
226
  </p>
212
227
  <a name="glossy-buttons"></a><h3>Glossy Buttons</h3>
213
228
  <h4>Ejemplos</h4>
214
- <p><a class="button-glossy-demo-1" href="#">
229
+ <p><a class="button-glossy-demo-1">
215
230
  <span>Comprar</span>
216
231
  </a>
217
- <a class="button-glossy-demo-2" href="#">
232
+ <a class="button-glossy-demo-2">
218
233
  <span>Buscar</span>
219
234
  </a>
220
- <a class="button-glossy-demo-3" href="#">
235
+ <a class="button-glossy-demo-3">
221
236
  <span>Reservar</span>
222
237
  </a>
223
- <a class="button-glossy-demo-4" href="#">
238
+ <a class="button-glossy-demo-4">
224
239
  <span>Un texto demasiado largo para este bot&oacute;n</span>
225
240
  </a>
226
241
 
@@ -258,16 +273,16 @@
258
273
 
259
274
  </p>
260
275
  <h4>Ejemplos</h4>
261
- <p><a class="button-mini-demo-1" href="#">
276
+ <p><a class="button-mini-demo-1">
262
277
  <span>Limpiar</span>
263
278
  </a>
264
- <a class="button-mini-demo-2" href="#">
279
+ <a class="button-mini-demo-2">
265
280
  <span>Abrir</span>
266
281
  </a>
267
- <a class="button-mini-demo-3" href="#">
282
+ <a class="button-mini-demo-3">
268
283
  <span>Descargar</span>
269
284
  </a>
270
- <a class="button-mini-demo-4" href="#">
285
+ <a class="button-mini-demo-4">
271
286
  <span>Ir</span>
272
287
  </a>
273
288
 
data/docs/css/style.css CHANGED
@@ -8,6 +8,7 @@
8
8
  font-family: sans-serif;
9
9
  font-size: 12px;
10
10
  text-decoration: none;
11
+ cursor: pointer;
11
12
  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));
12
13
  background: -webkit-linear-gradient(#de1f2a, #c81c26), -webkit-linear-gradient(#b11922, #6e0f15);
13
14
  background: -moz-linear-gradient(#de1f2a, #c81c26), -moz-linear-gradient(#b11922, #6e0f15);
@@ -101,12 +102,24 @@
101
102
  background-repeat: no-repeat;
102
103
  }
103
104
  .ie7 .button-glossy-demo-1, .ie8 .button-glossy-demo-1, .ie9 .button-glossy-demo-1 {
105
+ -webkit-border-radius: none;
106
+ -moz-border-radius: none;
107
+ -ms-border-radius: none;
108
+ -o-border-radius: none;
109
+ border-radius: none;
104
110
  background: url('../img/picasso-buttons-glossy.png');
105
111
  background-position: 0 -1px;
106
112
  }
107
113
  .ie7 .button-glossy-demo-1:hover, .ie8 .button-glossy-demo-1:hover, .ie9 .button-glossy-demo-1:hover {
108
114
  background-position: 0 -31px;
109
115
  }
116
+ .ie9 .button-glossy-demo-1 {
117
+ -webkit-border-radius: none;
118
+ -moz-border-radius: none;
119
+ -ms-border-radius: none;
120
+ -o-border-radius: none;
121
+ border-radius: none;
122
+ }
110
123
 
111
124
  .button-glossy-demo-2 {
112
125
  width: 70px;
@@ -118,6 +131,7 @@
118
131
  font-family: sans-serif;
119
132
  font-size: 12px;
120
133
  text-decoration: none;
134
+ cursor: pointer;
121
135
  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));
122
136
  background: -webkit-linear-gradient(#0088cc, #0077b3), -webkit-linear-gradient(#006699, #00334d);
123
137
  background: -moz-linear-gradient(#0088cc, #0077b3), -moz-linear-gradient(#006699, #00334d);
@@ -211,12 +225,24 @@
211
225
  background-repeat: no-repeat;
212
226
  }
213
227
  .ie7 .button-glossy-demo-2, .ie8 .button-glossy-demo-2, .ie9 .button-glossy-demo-2 {
228
+ -webkit-border-radius: none;
229
+ -moz-border-radius: none;
230
+ -ms-border-radius: none;
231
+ -o-border-radius: none;
232
+ border-radius: none;
214
233
  background: url('../img/picasso-buttons-glossy.png');
215
234
  background-position: 0 -61px;
216
235
  }
217
236
  .ie7 .button-glossy-demo-2:hover, .ie8 .button-glossy-demo-2:hover, .ie9 .button-glossy-demo-2:hover {
218
237
  background-position: 0 -91px;
219
238
  }
239
+ .ie9 .button-glossy-demo-2 {
240
+ -webkit-border-radius: none;
241
+ -moz-border-radius: none;
242
+ -ms-border-radius: none;
243
+ -o-border-radius: none;
244
+ border-radius: none;
245
+ }
220
246
 
221
247
  .button-glossy-demo-3 {
222
248
  width: 80px;
@@ -228,6 +254,7 @@
228
254
  font-family: sans-serif;
229
255
  font-size: 12px;
230
256
  text-decoration: none;
257
+ cursor: pointer;
231
258
  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));
232
259
  background: -webkit-linear-gradient(#fbb450, #faa937), -webkit-linear-gradient(#fa9f1e, #c77605);
233
260
  background: -moz-linear-gradient(#fbb450, #faa937), -moz-linear-gradient(#fa9f1e, #c77605);
@@ -321,12 +348,24 @@
321
348
  background-repeat: no-repeat;
322
349
  }
323
350
  .ie7 .button-glossy-demo-3, .ie8 .button-glossy-demo-3, .ie9 .button-glossy-demo-3 {
351
+ -webkit-border-radius: none;
352
+ -moz-border-radius: none;
353
+ -ms-border-radius: none;
354
+ -o-border-radius: none;
355
+ border-radius: none;
324
356
  background: url('../img/picasso-buttons-glossy.png');
325
357
  background-position: 0 -121px;
326
358
  }
327
359
  .ie7 .button-glossy-demo-3:hover, .ie8 .button-glossy-demo-3:hover, .ie9 .button-glossy-demo-3:hover {
328
360
  background-position: 0 -151px;
329
361
  }
362
+ .ie9 .button-glossy-demo-3 {
363
+ -webkit-border-radius: none;
364
+ -moz-border-radius: none;
365
+ -ms-border-radius: none;
366
+ -o-border-radius: none;
367
+ border-radius: none;
368
+ }
330
369
 
331
370
  .button-glossy-demo-4 {
332
371
  width: 250px;
@@ -338,6 +377,7 @@
338
377
  font-family: sans-serif;
339
378
  font-size: 12px;
340
379
  text-decoration: none;
380
+ cursor: pointer;
341
381
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #62c462), color-stop(100%, #4fbd4f)), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #42b142), color-stop(100%, #2d792d));
342
382
  background: -webkit-linear-gradient(#62c462, #4fbd4f), -webkit-linear-gradient(#42b142, #2d792d);
343
383
  background: -moz-linear-gradient(#62c462, #4fbd4f), -moz-linear-gradient(#42b142, #2d792d);
@@ -431,15 +471,27 @@
431
471
  background-repeat: no-repeat;
432
472
  }
433
473
  .ie7 .button-glossy-demo-4, .ie8 .button-glossy-demo-4, .ie9 .button-glossy-demo-4 {
474
+ -webkit-border-radius: none;
475
+ -moz-border-radius: none;
476
+ -ms-border-radius: none;
477
+ -o-border-radius: none;
478
+ border-radius: none;
434
479
  background: url('../img/picasso-buttons-glossy.png');
435
480
  background-position: 0 -181px;
436
481
  }
437
482
  .ie7 .button-glossy-demo-4:hover, .ie8 .button-glossy-demo-4:hover, .ie9 .button-glossy-demo-4:hover {
438
483
  background-position: 0 -211px;
439
484
  }
485
+ .ie9 .button-glossy-demo-4 {
486
+ -webkit-border-radius: none;
487
+ -moz-border-radius: none;
488
+ -ms-border-radius: none;
489
+ -o-border-radius: none;
490
+ border-radius: none;
491
+ }
440
492
 
441
493
  .button-3d-demo-1 {
442
- padding: 0 13px;
494
+ overflow: hidden;
443
495
  display: inline-block;
444
496
  line-height: 2.2em;
445
497
  color: white;
@@ -447,17 +499,9 @@
447
499
  font-family: sans-serif;
448
500
  font-size: 13px;
449
501
  text-decoration: none;
450
- background-color: #f73741;
451
502
  text-align: center;
503
+ cursor: pointer;
452
504
  text-shadow: 0 1px 0 black;
453
- background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f73741), color-stop(100%, #8f060d));
454
- background-image: -webkit-linear-gradient(#f73741, #8f060d);
455
- background-image: -moz-linear-gradient(#f73741, #8f060d);
456
- background-image: -o-linear-gradient(#f73741, #8f060d);
457
- background-image: linear-gradient(#f73741, #8f060d);
458
- -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);
459
- -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);
460
- box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
461
505
  -webkit-border-radius: 0.4em;
462
506
  -moz-border-radius: 0.4em;
463
507
  -ms-border-radius: 0.4em;
@@ -468,12 +512,29 @@
468
512
  position: relative;
469
513
  top: 1px;
470
514
  }
515
+ .button-3d-demo-1 span {
516
+ display: block;
517
+ padding: 0 13px;
518
+ }
471
519
  .button-3d-demo-1:visited {
472
520
  color: white;
473
521
  }
474
522
  .button-3d-demo-1:hover {
475
523
  text-decoration: none;
476
524
  color: white;
525
+ }
526
+ .button-3d-demo-1 span {
527
+ background-color: #f73741;
528
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f73741), color-stop(100%, #8f060d));
529
+ background-image: -webkit-linear-gradient(#f73741, #8f060d);
530
+ background-image: -moz-linear-gradient(#f73741, #8f060d);
531
+ background-image: -o-linear-gradient(#f73741, #8f060d);
532
+ background-image: linear-gradient(#f73741, #8f060d);
533
+ -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);
534
+ -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);
535
+ box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
536
+ }
537
+ .button-3d-demo-1 span:hover {
477
538
  background-color: #ff2f3a;
478
539
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #c00811));
479
540
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), #c00811);
@@ -484,32 +545,32 @@
484
545
  -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 #ff2f3a;
485
546
  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 #ff2f3a;
486
547
  }
487
- .button-3d-demo-1:active {
548
+ .button-3d-demo-1 span:active {
549
+ text-shadow: 0 -1px 0 black;
488
550
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f73741), color-stop(100%, #8f060d));
489
551
  background-image: -webkit-linear-gradient(#f73741, #8f060d);
490
552
  background-image: -moz-linear-gradient(#f73741, #8f060d);
491
553
  background-image: -o-linear-gradient(#f73741, #8f060d);
492
554
  background-image: linear-gradient(#f73741, #8f060d);
493
- text-shadow: 0 -1px 0 black;
494
555
  -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);
495
556
  -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);
496
557
  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);
497
558
  }
498
- .ie7 .button-3d-demo-1, .ie8 .button-3d-demo-1, .ie9 .button-3d-demo-1 {
559
+ .ie7 .button-3d-demo-1 span, .ie8 .button-3d-demo-1 span, .ie9 .button-3d-demo-1 span {
499
560
  *zoom: 1;
500
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF73741', endColorstr='#FF8F060D');
561
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00F73741', endColorstr='#FF8F060D');
501
562
  }
502
- .ie7 .button-3d-demo-1:hover, .ie8 .button-3d-demo-1:hover, .ie9 .button-3d-demo-1:hover {
563
+ .ie7 .button-3d-demo-1 span:hover, .ie8 .button-3d-demo-1 span:hover, .ie9 .button-3d-demo-1 span:hover {
503
564
  *zoom: 1;
504
565
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FFFFFF', endColorstr='#FFC00811');
505
566
  }
506
- .ie7 .button-3d-demo-1:active, .ie8 .button-3d-demo-1:active, .ie9 .button-3d-demo-1:active {
567
+ .ie7 .button-3d-demo-1 span:active, .ie8 .button-3d-demo-1 span:active, .ie9 .button-3d-demo-1 span:active {
507
568
  *zoom: 1;
508
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF73741', endColorstr='#FF8F060D');
569
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00F73741', endColorstr='#FF8F060D');
509
570
  }
510
571
 
511
572
  .button-3d-demo-2 {
512
- padding: 0 13px;
573
+ overflow: hidden;
513
574
  display: inline-block;
514
575
  line-height: 2.2em;
515
576
  color: white;
@@ -517,17 +578,9 @@
517
578
  font-family: sans-serif;
518
579
  font-size: 13px;
519
580
  text-decoration: none;
520
- background-color: #0088cc;
521
581
  text-align: center;
582
+ cursor: pointer;
522
583
  text-shadow: 0 1px 0 black;
523
- background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #002233));
524
- background-image: -webkit-linear-gradient(#0088cc, #002233);
525
- background-image: -moz-linear-gradient(#0088cc, #002233);
526
- background-image: -o-linear-gradient(#0088cc, #002233);
527
- background-image: linear-gradient(#0088cc, #002233);
528
- -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);
529
- -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);
530
- box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
531
584
  -webkit-border-radius: 0.4em;
532
585
  -moz-border-radius: 0.4em;
533
586
  -ms-border-radius: 0.4em;
@@ -538,12 +591,29 @@
538
591
  position: relative;
539
592
  top: 1px;
540
593
  }
594
+ .button-3d-demo-2 span {
595
+ display: block;
596
+ padding: 0 13px;
597
+ }
541
598
  .button-3d-demo-2:visited {
542
599
  color: white;
543
600
  }
544
601
  .button-3d-demo-2:hover {
545
602
  text-decoration: none;
546
603
  color: white;
604
+ }
605
+ .button-3d-demo-2 span {
606
+ background-color: #0088cc;
607
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #002233));
608
+ background-image: -webkit-linear-gradient(#0088cc, #002233);
609
+ background-image: -moz-linear-gradient(#0088cc, #002233);
610
+ background-image: -o-linear-gradient(#0088cc, #002233);
611
+ background-image: linear-gradient(#0088cc, #002233);
612
+ -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);
613
+ -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);
614
+ box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
615
+ }
616
+ .button-3d-demo-2 span:hover {
547
617
  background-color: #0088cc;
548
618
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #004466));
549
619
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), #004466);
@@ -554,32 +624,32 @@
554
624
  -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;
555
625
  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;
556
626
  }
557
- .button-3d-demo-2:active {
627
+ .button-3d-demo-2 span:active {
628
+ text-shadow: 0 -1px 0 black;
558
629
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #002233));
559
630
  background-image: -webkit-linear-gradient(#0088cc, #002233);
560
631
  background-image: -moz-linear-gradient(#0088cc, #002233);
561
632
  background-image: -o-linear-gradient(#0088cc, #002233);
562
633
  background-image: linear-gradient(#0088cc, #002233);
563
- text-shadow: 0 -1px 0 black;
564
634
  -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);
565
635
  -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);
566
636
  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);
567
637
  }
568
- .ie7 .button-3d-demo-2, .ie8 .button-3d-demo-2, .ie9 .button-3d-demo-2 {
638
+ .ie7 .button-3d-demo-2 span, .ie8 .button-3d-demo-2 span, .ie9 .button-3d-demo-2 span {
569
639
  *zoom: 1;
570
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF0088CC', endColorstr='#FF002233');
640
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#000088CC', endColorstr='#FF002233');
571
641
  }
572
- .ie7 .button-3d-demo-2:hover, .ie8 .button-3d-demo-2:hover, .ie9 .button-3d-demo-2:hover {
642
+ .ie7 .button-3d-demo-2 span:hover, .ie8 .button-3d-demo-2 span:hover, .ie9 .button-3d-demo-2 span:hover {
573
643
  *zoom: 1;
574
644
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FFFFFF', endColorstr='#FF004466');
575
645
  }
576
- .ie7 .button-3d-demo-2:active, .ie8 .button-3d-demo-2:active, .ie9 .button-3d-demo-2:active {
646
+ .ie7 .button-3d-demo-2 span:active, .ie8 .button-3d-demo-2 span:active, .ie9 .button-3d-demo-2 span:active {
577
647
  *zoom: 1;
578
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF0088CC', endColorstr='#FF002233');
648
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#000088CC', endColorstr='#FF002233');
579
649
  }
580
650
 
581
651
  .button-3d-demo-3 {
582
- padding: 0 13px;
652
+ overflow: hidden;
583
653
  display: inline-block;
584
654
  line-height: 2.2em;
585
655
  color: white;
@@ -587,17 +657,9 @@
587
657
  font-family: sans-serif;
588
658
  font-size: 13px;
589
659
  text-decoration: none;
590
- background-color: #fbb450;
591
660
  text-align: center;
661
+ cursor: pointer;
592
662
  text-shadow: 0 1px 0 black;
593
- background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbb450), color-stop(100%, #ae6704));
594
- background-image: -webkit-linear-gradient(#fbb450, #ae6704);
595
- background-image: -moz-linear-gradient(#fbb450, #ae6704);
596
- background-image: -o-linear-gradient(#fbb450, #ae6704);
597
- background-image: linear-gradient(#fbb450, #ae6704);
598
- -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);
599
- -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);
600
- box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
601
663
  -webkit-border-radius: 0.4em;
602
664
  -moz-border-radius: 0.4em;
603
665
  -ms-border-radius: 0.4em;
@@ -608,12 +670,29 @@
608
670
  position: relative;
609
671
  top: 1px;
610
672
  }
673
+ .button-3d-demo-3 span {
674
+ display: block;
675
+ padding: 0 13px;
676
+ }
611
677
  .button-3d-demo-3:visited {
612
678
  color: white;
613
679
  }
614
680
  .button-3d-demo-3:hover {
615
681
  text-decoration: none;
616
682
  color: white;
683
+ }
684
+ .button-3d-demo-3 span {
685
+ background-color: #fbb450;
686
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbb450), color-stop(100%, #ae6704));
687
+ background-image: -webkit-linear-gradient(#fbb450, #ae6704);
688
+ background-image: -moz-linear-gradient(#fbb450, #ae6704);
689
+ background-image: -o-linear-gradient(#fbb450, #ae6704);
690
+ background-image: linear-gradient(#fbb450, #ae6704);
691
+ -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);
692
+ -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);
693
+ box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
694
+ }
695
+ .button-3d-demo-3 span:hover {
617
696
  background-color: #ffb54c;
618
697
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #e08505));
619
698
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), #e08505);
@@ -624,32 +703,32 @@
624
703
  -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 #ffb54c;
625
704
  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 #ffb54c;
626
705
  }
627
- .button-3d-demo-3:active {
706
+ .button-3d-demo-3 span:active {
707
+ text-shadow: 0 -1px 0 black;
628
708
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbb450), color-stop(100%, #ae6704));
629
709
  background-image: -webkit-linear-gradient(#fbb450, #ae6704);
630
710
  background-image: -moz-linear-gradient(#fbb450, #ae6704);
631
711
  background-image: -o-linear-gradient(#fbb450, #ae6704);
632
712
  background-image: linear-gradient(#fbb450, #ae6704);
633
- text-shadow: 0 -1px 0 black;
634
713
  -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);
635
714
  -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);
636
715
  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);
637
716
  }
638
- .ie7 .button-3d-demo-3, .ie8 .button-3d-demo-3, .ie9 .button-3d-demo-3 {
717
+ .ie7 .button-3d-demo-3 span, .ie8 .button-3d-demo-3 span, .ie9 .button-3d-demo-3 span {
639
718
  *zoom: 1;
640
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFBB450', endColorstr='#FFAE6704');
719
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FBB450', endColorstr='#FFAE6704');
641
720
  }
642
- .ie7 .button-3d-demo-3:hover, .ie8 .button-3d-demo-3:hover, .ie9 .button-3d-demo-3:hover {
721
+ .ie7 .button-3d-demo-3 span:hover, .ie8 .button-3d-demo-3 span:hover, .ie9 .button-3d-demo-3 span:hover {
643
722
  *zoom: 1;
644
723
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FFFFFF', endColorstr='#FFE08505');
645
724
  }
646
- .ie7 .button-3d-demo-3:active, .ie8 .button-3d-demo-3:active, .ie9 .button-3d-demo-3:active {
725
+ .ie7 .button-3d-demo-3 span:active, .ie8 .button-3d-demo-3 span:active, .ie9 .button-3d-demo-3 span:active {
647
726
  *zoom: 1;
648
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFBB450', endColorstr='#FFAE6704');
727
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FBB450', endColorstr='#FFAE6704');
649
728
  }
650
729
 
651
730
  .button-3d-demo-4 {
652
- padding: 0 13px;
731
+ overflow: hidden;
653
732
  display: inline-block;
654
733
  line-height: 2.2em;
655
734
  color: white;
@@ -657,17 +736,9 @@
657
736
  font-family: sans-serif;
658
737
  font-size: 13px;
659
738
  text-decoration: none;
660
- background-color: #62c462;
661
739
  text-align: center;
740
+ cursor: pointer;
662
741
  text-shadow: 0 1px 0 black;
663
- background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #62c462), color-stop(100%, #276627));
664
- background-image: -webkit-linear-gradient(#62c462, #276627);
665
- background-image: -moz-linear-gradient(#62c462, #276627);
666
- background-image: -o-linear-gradient(#62c462, #276627);
667
- background-image: linear-gradient(#62c462, #276627);
668
- -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);
669
- -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);
670
- box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
671
742
  -webkit-border-radius: 0.4em;
672
743
  -moz-border-radius: 0.4em;
673
744
  -ms-border-radius: 0.4em;
@@ -678,12 +749,29 @@
678
749
  position: relative;
679
750
  top: 1px;
680
751
  }
752
+ .button-3d-demo-4 span {
753
+ display: block;
754
+ padding: 0 13px;
755
+ }
681
756
  .button-3d-demo-4:visited {
682
757
  color: white;
683
758
  }
684
759
  .button-3d-demo-4:hover {
685
760
  text-decoration: none;
686
761
  color: white;
762
+ }
763
+ .button-3d-demo-4 span {
764
+ background-color: #62c462;
765
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #62c462), color-stop(100%, #276627));
766
+ background-image: -webkit-linear-gradient(#62c462, #276627);
767
+ background-image: -moz-linear-gradient(#62c462, #276627);
768
+ background-image: -o-linear-gradient(#62c462, #276627);
769
+ background-image: linear-gradient(#62c462, #276627);
770
+ -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);
771
+ -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);
772
+ box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
773
+ }
774
+ .button-3d-demo-4 span:hover {
687
775
  background-color: #57cf57;
688
776
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #348c34));
689
777
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), #348c34);
@@ -694,32 +782,32 @@
694
782
  -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 #57cf57;
695
783
  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 #57cf57;
696
784
  }
697
- .button-3d-demo-4:active {
785
+ .button-3d-demo-4 span:active {
786
+ text-shadow: 0 -1px 0 black;
698
787
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #62c462), color-stop(100%, #276627));
699
788
  background-image: -webkit-linear-gradient(#62c462, #276627);
700
789
  background-image: -moz-linear-gradient(#62c462, #276627);
701
790
  background-image: -o-linear-gradient(#62c462, #276627);
702
791
  background-image: linear-gradient(#62c462, #276627);
703
- text-shadow: 0 -1px 0 black;
704
792
  -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);
705
793
  -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);
706
794
  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);
707
795
  }
708
- .ie7 .button-3d-demo-4, .ie8 .button-3d-demo-4, .ie9 .button-3d-demo-4 {
796
+ .ie7 .button-3d-demo-4 span, .ie8 .button-3d-demo-4 span, .ie9 .button-3d-demo-4 span {
709
797
  *zoom: 1;
710
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF62C462', endColorstr='#FF276627');
798
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#0062C462', endColorstr='#FF276627');
711
799
  }
712
- .ie7 .button-3d-demo-4:hover, .ie8 .button-3d-demo-4:hover, .ie9 .button-3d-demo-4:hover {
800
+ .ie7 .button-3d-demo-4 span:hover, .ie8 .button-3d-demo-4 span:hover, .ie9 .button-3d-demo-4 span:hover {
713
801
  *zoom: 1;
714
802
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FFFFFF', endColorstr='#FF348C34');
715
803
  }
716
- .ie7 .button-3d-demo-4:active, .ie8 .button-3d-demo-4:active, .ie9 .button-3d-demo-4:active {
804
+ .ie7 .button-3d-demo-4 span:active, .ie8 .button-3d-demo-4 span:active, .ie9 .button-3d-demo-4 span:active {
717
805
  *zoom: 1;
718
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF62C462', endColorstr='#FF276627');
806
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#0062C462', endColorstr='#FF276627');
719
807
  }
720
808
 
721
809
  .button-3d-demo-5 {
722
- padding: 0 24px;
810
+ overflow: hidden;
723
811
  display: block;
724
812
  line-height: 2.2em;
725
813
  color: white;
@@ -727,17 +815,9 @@
727
815
  font-family: sans-serif;
728
816
  font-size: 24px;
729
817
  text-decoration: none;
730
- background-color: #013d93;
731
818
  text-align: center;
819
+ cursor: pointer;
732
820
  text-shadow: 0 1px 0 black;
733
- background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #013d93), color-stop(100%, #000000));
734
- background-image: -webkit-linear-gradient(#013d93, #000000);
735
- background-image: -moz-linear-gradient(#013d93, #000000);
736
- background-image: -o-linear-gradient(#013d93, #000000);
737
- background-image: linear-gradient(#013d93, #000000);
738
- -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);
739
- -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);
740
- box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
741
821
  -webkit-border-radius: 0.4em;
742
822
  -moz-border-radius: 0.4em;
743
823
  -ms-border-radius: 0.4em;
@@ -748,12 +828,29 @@
748
828
  position: relative;
749
829
  top: 1px;
750
830
  }
831
+ .button-3d-demo-5 span {
832
+ display: block;
833
+ padding: 0 24px;
834
+ }
751
835
  .button-3d-demo-5:visited {
752
836
  color: white;
753
837
  }
754
838
  .button-3d-demo-5:hover {
755
839
  text-decoration: none;
756
840
  color: white;
841
+ }
842
+ .button-3d-demo-5 span {
843
+ background-color: #013d93;
844
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #013d93), color-stop(100%, #000000));
845
+ background-image: -webkit-linear-gradient(#013d93, #000000);
846
+ background-image: -moz-linear-gradient(#013d93, #000000);
847
+ background-image: -o-linear-gradient(#013d93, #000000);
848
+ background-image: linear-gradient(#013d93, #000000);
849
+ -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);
850
+ -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);
851
+ box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
852
+ }
853
+ .button-3d-demo-5 span:hover {
757
854
  background-color: #003d94;
758
855
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #00132e));
759
856
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), #00132e);
@@ -764,32 +861,32 @@
764
861
  -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;
765
862
  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;
766
863
  }
767
- .button-3d-demo-5:active {
864
+ .button-3d-demo-5 span:active {
865
+ text-shadow: 0 -1px 0 black;
768
866
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #013d93), color-stop(100%, #000000));
769
867
  background-image: -webkit-linear-gradient(#013d93, #000000);
770
868
  background-image: -moz-linear-gradient(#013d93, #000000);
771
869
  background-image: -o-linear-gradient(#013d93, #000000);
772
870
  background-image: linear-gradient(#013d93, #000000);
773
- text-shadow: 0 -1px 0 black;
774
871
  -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);
775
872
  -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);
776
873
  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);
777
874
  }
778
- .ie7 .button-3d-demo-5, .ie8 .button-3d-demo-5, .ie9 .button-3d-demo-5 {
875
+ .ie7 .button-3d-demo-5 span, .ie8 .button-3d-demo-5 span, .ie9 .button-3d-demo-5 span {
779
876
  *zoom: 1;
780
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF013D93', endColorstr='#FF000000');
877
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00013D93', endColorstr='#FF000000');
781
878
  }
782
- .ie7 .button-3d-demo-5:hover, .ie8 .button-3d-demo-5:hover, .ie9 .button-3d-demo-5:hover {
879
+ .ie7 .button-3d-demo-5 span:hover, .ie8 .button-3d-demo-5 span:hover, .ie9 .button-3d-demo-5 span:hover {
783
880
  *zoom: 1;
784
881
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FFFFFF', endColorstr='#FF00132E');
785
882
  }
786
- .ie7 .button-3d-demo-5:active, .ie8 .button-3d-demo-5:active, .ie9 .button-3d-demo-5:active {
883
+ .ie7 .button-3d-demo-5 span:active, .ie8 .button-3d-demo-5 span:active, .ie9 .button-3d-demo-5 span:active {
787
884
  *zoom: 1;
788
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF013D93', endColorstr='#FF000000');
885
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00013D93', endColorstr='#FF000000');
789
886
  }
790
887
 
791
888
  .button-3d-demo-6 {
792
- padding: 0 11px;
889
+ overflow: hidden;
793
890
  display: inline-block;
794
891
  line-height: 1.75em;
795
892
  color: #013d93;
@@ -797,17 +894,9 @@
797
894
  font-family: sans-serif;
798
895
  font-size: 11px;
799
896
  text-decoration: none;
800
- background-color: #eeeeee;
801
897
  text-align: center;
898
+ cursor: pointer;
802
899
  text-shadow: 0 1px 0 #b5b5b5;
803
- background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #a2a2a2));
804
- background-image: -webkit-linear-gradient(#eeeeee, #a2a2a2);
805
- background-image: -moz-linear-gradient(#eeeeee, #a2a2a2);
806
- background-image: -o-linear-gradient(#eeeeee, #a2a2a2);
807
- background-image: linear-gradient(#eeeeee, #a2a2a2);
808
- -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);
809
- -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);
810
- box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
811
900
  -webkit-border-radius: 1.1em;
812
901
  -moz-border-radius: 1.1em;
813
902
  -ms-border-radius: 1.1em;
@@ -818,12 +907,29 @@
818
907
  position: relative;
819
908
  top: 1px;
820
909
  }
910
+ .button-3d-demo-6 span {
911
+ display: block;
912
+ padding: 0 11px;
913
+ }
821
914
  .button-3d-demo-6:visited {
822
915
  color: #013d93;
823
916
  }
824
917
  .button-3d-demo-6:hover {
825
918
  text-decoration: none;
826
919
  color: #013d93;
920
+ }
921
+ .button-3d-demo-6 span {
922
+ background-color: #eeeeee;
923
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #a2a2a2));
924
+ background-image: -webkit-linear-gradient(#eeeeee, #a2a2a2);
925
+ background-image: -moz-linear-gradient(#eeeeee, #a2a2a2);
926
+ background-image: -o-linear-gradient(#eeeeee, #a2a2a2);
927
+ background-image: linear-gradient(#eeeeee, #a2a2a2);
928
+ -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);
929
+ -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);
930
+ box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
931
+ }
932
+ .button-3d-demo-6 span:hover {
827
933
  background-color: #f0ecec;
828
934
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #bbbbbb));
829
935
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), #bbbbbb);
@@ -834,28 +940,28 @@
834
940
  -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 #f0ecec;
835
941
  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 #f0ecec;
836
942
  }
837
- .button-3d-demo-6:active {
943
+ .button-3d-demo-6 span:active {
944
+ text-shadow: 0 -1px 0 #b5b5b5;
838
945
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #a2a2a2));
839
946
  background-image: -webkit-linear-gradient(#eeeeee, #a2a2a2);
840
947
  background-image: -moz-linear-gradient(#eeeeee, #a2a2a2);
841
948
  background-image: -o-linear-gradient(#eeeeee, #a2a2a2);
842
949
  background-image: linear-gradient(#eeeeee, #a2a2a2);
843
- text-shadow: 0 -1px 0 #b5b5b5;
844
950
  -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);
845
951
  -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);
846
952
  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);
847
953
  }
848
- .ie7 .button-3d-demo-6, .ie8 .button-3d-demo-6, .ie9 .button-3d-demo-6 {
954
+ .ie7 .button-3d-demo-6 span, .ie8 .button-3d-demo-6 span, .ie9 .button-3d-demo-6 span {
849
955
  *zoom: 1;
850
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFEEEEEE', endColorstr='#FFA2A2A2');
956
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00EEEEEE', endColorstr='#FFA2A2A2');
851
957
  }
852
- .ie7 .button-3d-demo-6:hover, .ie8 .button-3d-demo-6:hover, .ie9 .button-3d-demo-6:hover {
958
+ .ie7 .button-3d-demo-6 span:hover, .ie8 .button-3d-demo-6 span:hover, .ie9 .button-3d-demo-6 span:hover {
853
959
  *zoom: 1;
854
960
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FFFFFF', endColorstr='#FFBBBBBB');
855
961
  }
856
- .ie7 .button-3d-demo-6:active, .ie8 .button-3d-demo-6:active, .ie9 .button-3d-demo-6:active {
962
+ .ie7 .button-3d-demo-6 span:active, .ie8 .button-3d-demo-6 span:active, .ie9 .button-3d-demo-6 span:active {
857
963
  *zoom: 1;
858
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFEEEEEE', endColorstr='#FFA2A2A2');
964
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00EEEEEE', endColorstr='#FFA2A2A2');
859
965
  }
860
966
 
861
967
  .button-mini-demo-1 {
@@ -915,6 +1021,16 @@
915
1021
  .ie7 .button-mini-demo-1 span:hover, .ie8 .button-mini-demo-1 span:hover, .ie9 .button-mini-demo-1 span:hover {
916
1022
  background-position: 0 -21px;
917
1023
  }
1024
+ .ie9 .button-mini-demo-1 {
1025
+ -webkit-border-radius: none;
1026
+ -moz-border-radius: none;
1027
+ -ms-border-radius: none;
1028
+ -o-border-radius: none;
1029
+ border-radius: none;
1030
+ -webkit-box-shadow: none;
1031
+ -moz-box-shadow: none;
1032
+ box-shadow: none;
1033
+ }
918
1034
 
919
1035
  .button-mini-demo-2 {
920
1036
  display: inline-block;
@@ -973,6 +1089,16 @@
973
1089
  .ie7 .button-mini-demo-2 span:hover, .ie8 .button-mini-demo-2 span:hover, .ie9 .button-mini-demo-2 span:hover {
974
1090
  background-position: 0 -61px;
975
1091
  }
1092
+ .ie9 .button-mini-demo-2 {
1093
+ -webkit-border-radius: none;
1094
+ -moz-border-radius: none;
1095
+ -ms-border-radius: none;
1096
+ -o-border-radius: none;
1097
+ border-radius: none;
1098
+ -webkit-box-shadow: none;
1099
+ -moz-box-shadow: none;
1100
+ box-shadow: none;
1101
+ }
976
1102
 
977
1103
  .button-mini-demo-3 {
978
1104
  display: inline-block;
@@ -1031,6 +1157,16 @@
1031
1157
  .ie7 .button-mini-demo-3 span:hover, .ie8 .button-mini-demo-3 span:hover, .ie9 .button-mini-demo-3 span:hover {
1032
1158
  background-position: 0 -101px;
1033
1159
  }
1160
+ .ie9 .button-mini-demo-3 {
1161
+ -webkit-border-radius: none;
1162
+ -moz-border-radius: none;
1163
+ -ms-border-radius: none;
1164
+ -o-border-radius: none;
1165
+ border-radius: none;
1166
+ -webkit-box-shadow: none;
1167
+ -moz-box-shadow: none;
1168
+ box-shadow: none;
1169
+ }
1034
1170
 
1035
1171
  .button-mini-demo-4 {
1036
1172
  display: inline-block;
@@ -1089,6 +1225,16 @@
1089
1225
  .ie7 .button-mini-demo-4 span:hover, .ie8 .button-mini-demo-4 span:hover, .ie9 .button-mini-demo-4 span:hover {
1090
1226
  background-position: 0 -141px;
1091
1227
  }
1228
+ .ie9 .button-mini-demo-4 {
1229
+ -webkit-border-radius: none;
1230
+ -moz-border-radius: none;
1231
+ -ms-border-radius: none;
1232
+ -o-border-radius: none;
1233
+ border-radius: none;
1234
+ -webkit-box-shadow: none;
1235
+ -moz-box-shadow: none;
1236
+ box-shadow: none;
1237
+ }
1092
1238
 
1093
1239
  .text-input-demo-1 {
1094
1240
  width: 200px;
@@ -1390,6 +1536,28 @@
1390
1536
  .ie7 .nav-demo-1 ul .last.active, .ie8 .nav-demo-1 ul .last.active, .ie9 .nav-demo-1 ul .last.active {
1391
1537
  background: transparent url('../img/picasso-nav.png') no-repeat right -47px;
1392
1538
  }
1539
+ .ie9 .nav-demo-1 ul {
1540
+ -webkit-box-shadow: none;
1541
+ -moz-box-shadow: none;
1542
+ box-shadow: none;
1543
+ }
1544
+ .ie9 .nav-demo-1 ul li:first-child {
1545
+ -moz-border-radius-topleft: none;
1546
+ -webkit-border-top-left-radius: none;
1547
+ border-top-left-radius: none;
1548
+ -moz-border-radius-bottomleft: none;
1549
+ -webkit-border-bottom-left-radius: none;
1550
+ border-bottom-left-radius: none;
1551
+ }
1552
+ .ie9 .nav-demo-1 ul li:last-child {
1553
+ -moz-border-radius-topright: none;
1554
+ -webkit-border-top-right-radius: none;
1555
+ border-top-right-radius: none;
1556
+ -moz-border-radius-bottomright: none;
1557
+ -webkit-border-bottom-right-radius: none;
1558
+ border-bottom-right-radius: none;
1559
+ border: none;
1560
+ }
1393
1561
 
1394
1562
  .nav-demo-2:before, .nav-demo-2:after {
1395
1563
  content: "";
@@ -1517,6 +1685,28 @@
1517
1685
  .ie7 .nav-demo-2 ul .last.active, .ie8 .nav-demo-2 ul .last.active, .ie9 .nav-demo-2 ul .last.active {
1518
1686
  background: transparent url('../img/picasso-nav.png') no-repeat right -175px;
1519
1687
  }
1688
+ .ie9 .nav-demo-2 ul {
1689
+ -webkit-box-shadow: none;
1690
+ -moz-box-shadow: none;
1691
+ box-shadow: none;
1692
+ }
1693
+ .ie9 .nav-demo-2 ul li:first-child {
1694
+ -moz-border-radius-topleft: none;
1695
+ -webkit-border-top-left-radius: none;
1696
+ border-top-left-radius: none;
1697
+ -moz-border-radius-bottomleft: none;
1698
+ -webkit-border-bottom-left-radius: none;
1699
+ border-bottom-left-radius: none;
1700
+ }
1701
+ .ie9 .nav-demo-2 ul li:last-child {
1702
+ -moz-border-radius-topright: none;
1703
+ -webkit-border-top-right-radius: none;
1704
+ border-top-right-radius: none;
1705
+ -moz-border-radius-bottomright: none;
1706
+ -webkit-border-bottom-right-radius: none;
1707
+ border-bottom-right-radius: none;
1708
+ border: none;
1709
+ }
1520
1710
  .nav-demo-2 a, .nav-demo-2 a:hover {
1521
1711
  color: white;
1522
1712
  }