picasso 0.2.0 → 0.2.1

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