picasso 0.1.0 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. data/docs/accordions.html +6 -3
  2. data/docs/all.html +105 -60
  3. data/docs/arrows.html +6 -3
  4. data/docs/bubbles.html +6 -3
  5. data/docs/build/md/changelog.md +9 -2
  6. data/docs/build/md/components/buttons.md +167 -137
  7. data/docs/build/md/components/navs.md +1 -1
  8. data/docs/build/md/components/popups.md +1 -1
  9. data/docs/build/md/intro.md +17 -1
  10. data/docs/build/md/todo.md +2 -1
  11. data/docs/build/templates/layout.html +2 -1
  12. data/docs/buttons.html +75 -54
  13. data/docs/changelog.html +15 -5
  14. data/docs/components.html +6 -3
  15. data/docs/css/markdown.css +1 -1
  16. data/docs/css/style.css +720 -220
  17. data/docs/despegar.html +6 -3
  18. data/docs/img/picasso-buttons-glossy.png +0 -0
  19. data/docs/img/{picasso-mini-buttons.png → picasso-buttons-mini.png} +0 -0
  20. data/docs/index.html +23 -4
  21. data/docs/inputs.html +6 -3
  22. data/docs/intro.html +23 -4
  23. data/docs/list-grids.html +6 -3
  24. data/docs/mejoras.html +6 -3
  25. data/docs/navs.html +7 -4
  26. data/docs/pagination.html +6 -3
  27. data/docs/popups.html +7 -4
  28. data/docs/sass/style.scss +43 -19
  29. data/docs/todo.html +8 -4
  30. data/docs/utils.html +6 -3
  31. data/lib/picasso/version.rb +1 -1
  32. data/picasso.gemspec +0 -1
  33. data/stylesheets/picasso/components/_accordions.scss +13 -13
  34. data/stylesheets/picasso/components/_arrows.scss +2 -2
  35. data/stylesheets/picasso/components/_bubbles.scss +5 -5
  36. data/stylesheets/picasso/components/_buttons.scss +3 -2
  37. data/stylesheets/picasso/components/_inputs.scss +7 -7
  38. data/stylesheets/picasso/components/_list-grids.scss +6 -6
  39. data/stylesheets/picasso/components/_navs.scss +10 -10
  40. data/stylesheets/picasso/components/_pagination.scss +8 -8
  41. data/stylesheets/picasso/components/_popups.scss +15 -15
  42. data/stylesheets/picasso/components/buttons/_3d.scss +127 -0
  43. data/stylesheets/picasso/components/buttons/_glossy.scss +220 -0
  44. data/stylesheets/picasso/components/buttons/_mini.scss +150 -0
  45. metadata +9 -23
  46. data/docs/ie.html +0 -201
  47. data/docs/img/picasso-buttons.png +0 -0
  48. data/stylesheets/picasso/components/buttons/_buttons.scss +0 -191
  49. data/stylesheets/picasso/components/buttons/_mini-buttons.scss +0 -149
data/docs/build/md/components/navs.md CHANGED
@@ -96,7 +96,7 @@ Mixin con parámetros personalizados. Disponibles: ancho, alto, background
96
96
  Variable y valor por defecto:
97
97
 
98
98
  ```css
99
- $nav-ie-fallback: "sprites" !default;
99
+ $nav-ie-fallback: "sprites";
100
100
  ```
101
101
 
102
102
  Estrategias soportadas:
data/docs/build/md/components/popups.md CHANGED
@@ -153,7 +153,7 @@ Mixin con parámetros personalizados. Disponibles: background, radio del b
153
153
  Variable y valor por defecto:
154
154
 
155
155
  ```css
156
- $popup-ie-fallback: "sprites" !default;
156
+ $popup-ie-fallback: "sprites";
157
157
  ```
158
158
 
159
159
  Estrategias soportadas:
data/docs/build/md/intro.md CHANGED
@@ -12,12 +12,14 @@ Ejecutar:
12
12
  $ (sudo) gem install picasso
13
13
  ```
14
14
 
15
+ > Opcional: [Instalación de oily_png](#opcional-instalacioacuten-de-oily-png).
16
+
15
17
  En el `config.rb` agregar:
16
18
 
17
19
  ```bash
18
20
  require 'picasso'
19
21
  require 'magick'
20
- gem 'picasso', '~> 0.1.0'
22
+ gem 'picasso', '~> 0.2.0'
21
23
  ```
22
24
 
23
25
  Modificar el número de versión a medida que se quiere usar nuevas versiones del framework.
@@ -41,3 +43,17 @@ o sólo lo necesario:
41
43
  $ (sudo) gem update picasso
42
44
  ```
43
45
 
46
+ ## Opcional: Instalación de oily_png
47
+
48
+ [oily_png](https://github.com/wvanbergen/oily_png/) es una gema que permite acelerar la creación de imágenes dinámicas. Se recomienda su instalación en caso de utilizar Picasso para la creación de sprites.
49
+
50
+ ### Windows
51
+
52
+ Bajar el paquete [Development Kit](http://rubyinstaller.org/downloads/). Extraer dicho paquete en una ruta conocida (por ejemplo `C:\DevKit`). Abrir una consola, ir a la ruta en donde se pusieron los archivos del *Development Kit* y ejecutar `ruby dk.rb init` y luego `ruby dk.rb install`.
53
+
54
+ ### Linux
55
+
56
+ ```bash
57
+ $ (sudo) apt-get update
58
+ $ (sudo) apt-get install ruby-oily-png
59
+ ```
data/docs/build/md/todo.md CHANGED
@@ -10,4 +10,5 @@
10
10
  * Tipografias con pictogramas comunes;
11
11
 
12
12
  ## Otros
13
- * Creación de sprites: Implementar API para poder detectar si un archivo ya existe y obtener el path de imágenes especificado en el config.rb.
13
+ * Creación de sprites: Implementar API para poder detectar si un archivo ya existe.
14
+ * Mejoras en la documentación especificando variables por defecto de cada componente y mejor descripción de sus parámetros.
data/docs/build/templates/layout.html CHANGED
@@ -20,7 +20,8 @@
20
20
 
21
21
  <% if not @noHeader: %>
22
22
  <header>
23
- <h1><%= @manifest.title %></h1>
23
+ <img src="img/picasso.png" />
24
+ <h1 class="title">Framework CSS/Sass.</h1>
24
25
  </header>
25
26
  <% end %>
26
27
 
data/docs/buttons.html CHANGED
@@ -18,7 +18,8 @@
18
18
 
19
19
 
20
20
  <header>
21
- <h1>Picasso. Framework CSS/Sass.</h1>
21
+ <img src="img/picasso.png" />
22
+ <h1 class="title">Framework CSS/Sass.</h1>
22
23
  </header>
23
24
 
24
25
 
@@ -43,6 +44,8 @@
43
44
 
44
45
  <li><a href="./intro.html#actualizacioacuten">Actualizaci&amp;oacute;n</a></li>
45
46
 
47
+ <li><a href="./intro.html#opcional-instalacioacuten-de-oily-png">Opcional: Instalaci&amp;oacute;n de oily_png</a></li>
48
+
46
49
  </ol>
47
50
 
48
51
  </li>
@@ -52,6 +55,8 @@
52
55
 
53
56
  <ol>
54
57
 
58
+ <li><a href="./changelog.html#020">0.2.0</a></li>
59
+
55
60
  <li><a href="./changelog.html#010">0.1.0</a></li>
56
61
 
57
62
  <li><a href="./changelog.html#003">0.0.3</a></li>
@@ -105,8 +110,6 @@
105
110
 
106
111
  <li><a href="./buttons.html#buttons">Buttons</a></li>
107
112
 
108
- <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
109
-
110
113
  <li><a href="./inputs.html#inputs">Inputs</a></li>
111
114
 
112
115
  <li><a href="./navs.html#navs">Navs</a></li>
@@ -163,56 +166,86 @@
163
166
 
164
167
  <article>
165
168
  <a name="buttons"></a><h2>Buttons</h2>
166
- <p>Ideales para situaciones en que se necesita un call-to-action.
169
+ <p>Disponibles en 3 versiones: 3D, Glossy y Mini.
167
170
 
168
171
  </p>
169
- <a name="ejemplos"></a><a name="ejemplos"></a><h3>Ejemplos</h3>
170
- <p><a class="button-demo-1" href="#">
171
- <span>Comprar</span>
172
- </a>
172
+ <a name="sass"></a><a name="sass"></a><a name="sass"></a><h4>Sass</h4>
173
+ <p>Importaci&oacute;n:
173
174
 
174
175
  </p>
175
- <p><a class="button-demo-2" href="#">
176
- <span>Buscar</span>
177
- </a>
176
+ <pre><code class="lang-css">@import &quot;picasso/components/buttons&quot;;</code></pre>
177
+ <a name="3d-buttons"></a><h3>3D Buttons</h3>
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>
178
183
 
179
184
  </p>
180
- <p><a class="button-demo-3" href="#">
181
- <span>Reservar</span>
182
- </a>
185
+ <p><a class="button-3d-demo-5" href="#">Bot&oacute;n full-width</a>
186
+
187
+ </p>
188
+ <p><a class="button-3d-demo-6" href="#">Bot&oacute;n redondeado</a>
189
+
190
+ </p>
191
+ <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>
193
+ <h4>Sass</h4>
194
+ <p>Mixin con los par&aacute;metros por defecto:
195
+
196
+ </p>
197
+ <pre><code class="lang-css">.button{
198
+ @include button-3d();
199
+ }</code></pre>
200
+ <p>Mixin con par&aacute;metros personalizados. Disponibles: background, color, font-size, full-width y rounded:
201
+
202
+ </p>
203
+ <pre><code class="lang-css">.button{
204
+ @include button-3d(red, white, 24px, true, true);
205
+ }</code></pre>
206
+ <a name="fallback-para-ie"></a><a name="fallback-para-ie"></a><a name="fallback-para-ie"></a><h4>Fallback para IE</h4>
207
+ <p>La estrategia de los botones es siempre graceful degradation.
208
+
209
+
183
210
 
184
211
  </p>
185
- <p><a class="button-demo-4" href="#">
212
+ <a name="glossy-buttons"></a><h3>Glossy Buttons</h3>
213
+ <h4>Ejemplos</h4>
214
+ <p><a class="button-glossy-demo-1" href="#">
215
+ <span>Comprar</span>
216
+ </a>
217
+ <a class="button-glossy-demo-2" href="#">
218
+ <span>Buscar</span>
219
+ </a>
220
+ <a class="button-glossy-demo-3" href="#">
221
+ <span>Reservar</span>
222
+ </a>
223
+ <a class="button-glossy-demo-4" href="#">
186
224
  <span>Un texto demasiado largo para este bot&oacute;n</span>
187
225
  </a>
188
226
 
189
227
  </p>
190
- <a name="html"></a><a name="html"></a><h3>HTML</h3>
228
+ <h4>HTML</h4>
191
229
  <pre><code class="lang-html">&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
192
230
  &lt;span&gt;Comprar&lt;/span&gt;
193
231
  &lt;/a&gt;</code></pre>
194
- <a name="sass"></a><a name="sass"></a><h3>Sass</h3>
195
- <p>Importaci&oacute;n:
196
-
197
- </p>
198
- <pre><code class="lang-css">@import &quot;picasso/components/buttons&quot;;</code></pre>
199
232
  <p>Mixin con los par&aacute;metros por defecto:
200
233
 
201
234
  </p>
202
235
  <pre><code class="lang-css">.button{
203
- @include button();
236
+ @include button-glossy();
204
237
  }</code></pre>
205
238
  <p>Mixin con par&aacute;metros personalizados. Disponibles: ancho, alto, background y color:
206
239
 
207
240
  </p>
208
241
  <pre><code class="lang-css">.button{
209
- @include button(100px, 30px, red, white);
242
+ @include button-glossy(100px, 30px, red, white);
210
243
  }</code></pre>
211
- <a name="fallback-para-ie"></a><a name="fallback-para-ie"></a><h3>Fallback para IE</h3>
244
+ <h4>Fallback para IE</h4>
212
245
  <p>Variable y valor por defecto:
213
246
 
214
247
  </p>
215
- <pre><code class="lang-css">$button-ie-fallback: &quot;sprites&quot; !default;</code></pre>
248
+ <pre><code class="lang-css">$button-glossy-ie-fallback: &quot;sprites&quot;;</code></pre>
216
249
  <p>Estrategias soportadas:
217
250
 
218
251
  </p>
@@ -220,59 +253,47 @@
220
253
  <li><code>sprites</code></li>
221
254
  <li><code>GD</code></li>
222
255
  </ul>
223
- <a name="mini-buttons"></a><h2>Mini-Buttons</h2>
224
- <p>Perfectos para acciones simples que influyen en la interfaz.
256
+ <a name="mini-buttons"></a><h3>Mini Buttons</h3>
257
+ <p>Perfectos para acciones simples en la interfaz.
225
258
 
226
259
  </p>
227
- <h3>Ejemplos</h3>
228
- <p><a class="mini-button-demo-1" href="#">
260
+ <h4>Ejemplos</h4>
261
+ <p><a class="button-mini-demo-1" href="#">
229
262
  <span>Limpiar</span>
230
263
  </a>
231
-
232
- </p>
233
- <p><a class="mini-button-demo-2" href="#">
264
+ <a class="button-mini-demo-2" href="#">
234
265
  <span>Abrir</span>
235
266
  </a>
236
-
237
- </p>
238
- <p><a class="mini-button-demo-3" href="#">
267
+ <a class="button-mini-demo-3" href="#">
239
268
  <span>Descargar</span>
240
269
  </a>
241
-
242
- </p>
243
- <p><a class="mini-button-demo-4" href="#">
270
+ <a class="button-mini-demo-4" href="#">
244
271
  <span>Ir</span>
245
272
  </a>
246
273
 
247
-
248
-
249
274
  </p>
250
- <h3>HTML</h3>
251
- <pre><code class="lang-html">&lt;a class=&quot;mini-button&quot; href=&quot;#&quot;&gt;
252
- &lt;span&gt;Comprar&lt;/span&gt;
275
+ <h4>HTML</h4>
276
+ <pre><code class="lang-html">&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
277
+ &lt;span&gt;Limpiar&lt;/span&gt;
253
278
  &lt;/a&gt;</code></pre>
254
- <h3>Sass</h3>
255
- <p>Importaci&oacute;n:
256
-
257
- </p>
258
- <pre><code class="lang-css">@import &quot;picasso/components/buttons&quot;;</code></pre>
279
+ <h4>Sass</h4>
259
280
  <p>Mixin con los par&aacute;metros por defecto:
260
281
 
261
282
  </p>
262
- <pre><code class="lang-css">.mini-button{
263
- @include mini-button();
283
+ <pre><code class="lang-css">.button{
284
+ @include button-mini();
264
285
  }</code></pre>
265
286
  <p>Mixin con par&aacute;metros personalizados. Disponibles: background y color:
266
287
 
267
288
  </p>
268
- <pre><code class="lang-css">.mini-button{
269
- @include button(grey, blue);
289
+ <pre><code class="lang-css">.button{
290
+ @include button-mini(grey, blue);
270
291
  }</code></pre>
271
- <h3>Fallback para IE</h3>
292
+ <h4>Fallback para IE</h4>
272
293
  <p>Variable y valor por defecto:
273
294
 
274
295
  </p>
275
- <pre><code class="lang-css">$mini-button-ie-fallback: &quot;sprites&quot; !default;</code></pre>
296
+ <pre><code class="lang-css">$button-mini-ie-fallback: &quot;sprites&quot;;</code></pre>
276
297
  <p>Estrategias soportadas:
277
298
 
278
299
  </p>
data/docs/changelog.html CHANGED
@@ -18,7 +18,8 @@
18
18
 
19
19
 
20
20
  <header>
21
- <h1>Picasso. Framework CSS/Sass.</h1>
21
+ <img src="img/picasso.png" />
22
+ <h1 class="title">Framework CSS/Sass.</h1>
22
23
  </header>
23
24
 
24
25
 
@@ -43,6 +44,8 @@
43
44
 
44
45
  <li><a href="./intro.html#actualizacioacuten">Actualizaci&amp;oacute;n</a></li>
45
46
 
47
+ <li><a href="./intro.html#opcional-instalacioacuten-de-oily-png">Opcional: Instalaci&amp;oacute;n de oily_png</a></li>
48
+
46
49
  </ol>
47
50
 
48
51
  </li>
@@ -52,6 +55,8 @@
52
55
 
53
56
  <ol>
54
57
 
58
+ <li><a href="./changelog.html#020">0.2.0</a></li>
59
+
55
60
  <li><a href="./changelog.html#010">0.1.0</a></li>
56
61
 
57
62
  <li><a href="./changelog.html#003">0.0.3</a></li>
@@ -105,8 +110,6 @@
105
110
 
106
111
  <li><a href="./buttons.html#buttons">Buttons</a></li>
107
112
 
108
- <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
109
-
110
113
  <li><a href="./inputs.html#inputs">Inputs</a></li>
111
114
 
112
115
  <li><a href="./navs.html#navs">Navs</a></li>
@@ -163,6 +166,13 @@
163
166
 
164
167
  <article>
165
168
  <a name="changelog"></a><h1>Changelog</h1>
169
+ <a name="020"></a><h2>0.2.0</h2>
170
+ <ul>
171
+ <li>Fix degradados de botones en Chrome;</li>
172
+ <li>Separaci&oacute;n de botones por tipo;</li>
173
+ <li>Nuevos botones 3D;</li>
174
+ <li>Se quita a oily_png como dependencia;</li>
175
+ </ul>
166
176
  <a name="010"></a><h2>0.1.0</h2>
167
177
  <ul>
168
178
  <li>Agregados nuevos componentes:</li>
@@ -199,9 +209,9 @@
199
209
  <li>IE: <code>after()</code> / <code>before()</code></li>
200
210
  </ul>
201
211
  </li>
202
- <li>Nuevo fallback para IE: Generación dinámica de sprites para componentes a través de <a href="https://github.com/StanAngeloff/compass-magick">compass-magick</a>.</li>
212
+ <li>Nuevo fallback para IE: Generaci&oacute;n din&aacute;mica de sprites para componentes a trav&eacute;s de <a href="https://github.com/StanAngeloff/compass-magick">compass-magick</a>.</li>
203
213
  <li>Se elimina el soporte para CSS3 Pie, siendo reemplazado por fallback de sprites.</li>
204
- <li>Reorganizaci&ooacute;n interna de la documentaci&ooacute;n.</li>
214
+ <li>Reorganizaci&oacute;n interna de la documentaci&oacute;n.</li>
205
215
  </ul>
206
216
  <a name="003"></a><h2>0.0.3</h2>
207
217
  <ul>
data/docs/components.html CHANGED
@@ -18,7 +18,8 @@
18
18
 
19
19
 
20
20
  <header>
21
- <h1>Picasso. Framework CSS/Sass.</h1>
21
+ <img src="img/picasso.png" />
22
+ <h1 class="title">Framework CSS/Sass.</h1>
22
23
  </header>
23
24
 
24
25
 
@@ -43,6 +44,8 @@
43
44
 
44
45
  <li><a href="./intro.html#actualizacioacuten">Actualizaci&amp;oacute;n</a></li>
45
46
 
47
+ <li><a href="./intro.html#opcional-instalacioacuten-de-oily-png">Opcional: Instalaci&amp;oacute;n de oily_png</a></li>
48
+
46
49
  </ol>
47
50
 
48
51
  </li>
@@ -52,6 +55,8 @@
52
55
 
53
56
  <ol>
54
57
 
58
+ <li><a href="./changelog.html#020">0.2.0</a></li>
59
+
55
60
  <li><a href="./changelog.html#010">0.1.0</a></li>
56
61
 
57
62
  <li><a href="./changelog.html#003">0.0.3</a></li>
@@ -105,8 +110,6 @@
105
110
 
106
111
  <li><a href="./buttons.html#buttons">Buttons</a></li>
107
112
 
108
- <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
109
-
110
113
  <li><a href="./inputs.html#inputs">Inputs</a></li>
111
114
 
112
115
  <li><a href="./navs.html#navs">Navs</a></li>
data/docs/css/markdown.css CHANGED
@@ -49,7 +49,7 @@ h1{
49
49
  padding: 40px 0 0 0;
50
50
  }
51
51
 
52
- h1:first-child{
52
+ h1.title{
53
53
  padding: 0;
54
54
  }
55
55
 
data/docs/css/style.css CHANGED
@@ -1,4 +1,4 @@
1
- .button-demo-1 {
1
+ .button-glossy-demo-1 {
2
2
  width: 90px;
3
3
  height: 30px;
4
4
  display: inline-block;
@@ -8,88 +8,107 @@
8
8
  font-family: sans-serif;
9
9
  font-size: 12px;
10
10
  text-decoration: none;
11
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #ff0000), color-stop(100%, #660000));
12
- background: -webkit-linear-gradient(#ff0000 30%, #660000);
13
- background: -moz-linear-gradient(#ff0000 30%, #660000);
14
- background: -o-linear-gradient(#ff0000 30%, #660000);
15
- background: linear-gradient(#ff0000 30%, #660000);
11
+ 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
+ background: -webkit-linear-gradient(#de1f2a, #c81c26), -webkit-linear-gradient(#b11922, #6e0f15);
13
+ background: -moz-linear-gradient(#de1f2a, #c81c26), -moz-linear-gradient(#b11922, #6e0f15);
14
+ background: -o-linear-gradient(#de1f2a, #c81c26), -o-linear-gradient(#b11922, #6e0f15);
15
+ background: linear-gradient(#de1f2a, #c81c26), linear-gradient(#b11922, #6e0f15);
16
16
  -webkit-border-radius: 5px;
17
17
  -moz-border-radius: 5px;
18
18
  -ms-border-radius: 5px;
19
19
  -o-border-radius: 5px;
20
20
  border-radius: 5px;
21
+ background-position: left top, left 15px;
21
22
  }
22
- .button-demo-1:after, .button-demo-1:before {
23
+ .button-glossy-demo-1:after, .button-glossy-demo-1:before {
23
24
  content: "";
24
25
  position: absolute;
25
26
  display: inline-block;
26
27
  }
27
- .button-demo-1:after {
28
+ .button-glossy-demo-1:after {
28
29
  width: 88px;
29
30
  height: 28px;
30
31
  left: 1px;
31
32
  top: 1px;
32
33
  z-index: 2;
33
34
  }
34
- .button-demo-1:before {
35
+ .button-glossy-demo-1:before {
35
36
  width: 86px;
36
37
  height: 26px;
37
38
  left: 2px;
38
39
  top: 2px;
39
40
  z-index: 3;
40
41
  }
41
- .button-demo-1 span {
42
+ .button-glossy-demo-1 span {
42
43
  position: relative;
43
44
  z-index: 4;
44
45
  line-height: 30px;
45
46
  }
46
- .button-demo-1 span {
47
+ .button-glossy-demo-1 span {
47
48
  color: white;
48
49
  }
49
- .button-demo-1:after, .button-demo-1:before {
50
+ .button-glossy-demo-1:after, .button-glossy-demo-1:before {
50
51
  -webkit-border-radius: 4px;
51
52
  -moz-border-radius: 4px;
52
53
  -ms-border-radius: 4px;
53
54
  -o-border-radius: 4px;
54
55
  border-radius: 4px;
55
56
  }
56
- .button-demo-1:after {
57
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffcccc), color-stop(100%, #4d0000));
58
- background: -webkit-linear-gradient(#ffcccc 20%, #4d0000);
59
- background: -moz-linear-gradient(#ffcccc 20%, #4d0000);
60
- background: -o-linear-gradient(#ffcccc 20%, #4d0000);
61
- background: linear-gradient(#ffcccc 20%, #4d0000);
62
- }
63
- .button-demo-1:before {
64
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #ff0000), color-stop(100%, #660000));
65
- background: -webkit-linear-gradient(#ff0000 30%, #660000);
66
- background: -moz-linear-gradient(#ff0000 30%, #660000);
67
- background: -o-linear-gradient(#ff0000 30%, #660000);
68
- background: linear-gradient(#ff0000 30%, #660000);
69
- }
70
- .button-demo-1:hover {
71
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #ff0000), color-stop(100%, #ff0505));
72
- background: -webkit-linear-gradient(#ff0000 30%, #ff0505);
73
- background: -moz-linear-gradient(#ff0000 30%, #ff0505);
74
- background: -o-linear-gradient(#ff0000 30%, #ff0505);
75
- background: linear-gradient(#ff0000 30%, #ff0505);
76
- }
77
- .button-demo-1:hover:before {
78
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #ff0000), color-stop(100%, #ff0505));
79
- background: -webkit-linear-gradient(#ff0000 30%, #ff0505);
80
- background: -moz-linear-gradient(#ff0000 30%, #ff0505);
81
- background: -o-linear-gradient(#ff0000 30%, #ff0505);
82
- background: linear-gradient(#ff0000 30%, #ff0505);
83
- }
84
- .ie7 .button-demo-1, .ie8 .button-demo-1, .ie9 .button-demo-1 {
85
- background: url('../img/picasso-buttons.png');
57
+ .button-glossy-demo-1:after {
58
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(15%, #f2a4a8), color-stop(100%, #150304)) 50%;
59
+ background: -webkit-linear-gradient(#f2a4a8 15%, #150304) 50%;
60
+ background: -moz-linear-gradient(#f2a4a8 15%, #150304) 50%;
61
+ background: -o-linear-gradient(#f2a4a8 15%, #150304) 50%;
62
+ background: linear-gradient(#f2a4a8 15%, #150304) 50%;
63
+ }
64
+ .button-glossy-demo-1:before {
65
+ 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));
66
+ background: -webkit-linear-gradient(#de1f2a, #c81c26), -webkit-linear-gradient(#b11922, #6e0f15);
67
+ background: -moz-linear-gradient(#de1f2a, #c81c26), -moz-linear-gradient(#b11922, #6e0f15);
68
+ background: -o-linear-gradient(#de1f2a, #c81c26), -o-linear-gradient(#b11922, #6e0f15);
69
+ background: linear-gradient(#de1f2a, #c81c26), linear-gradient(#b11922, #6e0f15);
70
+ background-position: left top, left 13px;
71
+ }
72
+ .button-glossy-demo-1, .button-glossy-demo-1:before {
73
+ background-size: 100% 50%;
74
+ background-repeat: no-repeat;
75
+ }
76
+ .button-glossy-demo-1:hover {
77
+ text-decoration: none;
78
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e96168), color-stop(50%, #bf1b24), color-stop(100%, #f10c19));
79
+ background: -webkit-linear-gradient(#e96168, #bf1b24, #f10c19);
80
+ background: -moz-linear-gradient(#e96168, #bf1b24, #f10c19);
81
+ background: -o-linear-gradient(#e96168, #bf1b24, #f10c19);
82
+ background: linear-gradient(#e96168, #bf1b24, #f10c19);
83
+ }
84
+ .button-glossy-demo-1:hover:after {
85
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4b1b5), color-stop(100%, #d11d27)) 50%;
86
+ background: -webkit-linear-gradient(#f4b1b5 20%, #d11d27) 50%;
87
+ background: -moz-linear-gradient(#f4b1b5 20%, #d11d27) 50%;
88
+ background: -o-linear-gradient(#f4b1b5 20%, #d11d27) 50%;
89
+ background: linear-gradient(#f4b1b5 20%, #d11d27) 50%;
90
+ }
91
+ .button-glossy-demo-1:hover:before {
92
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e96168), color-stop(50%, #bf1b24), color-stop(100%, #f10c19));
93
+ background: -webkit-linear-gradient(#e96168, #bf1b24, #f10c19);
94
+ background: -moz-linear-gradient(#e96168, #bf1b24, #f10c19);
95
+ background: -o-linear-gradient(#e96168, #bf1b24, #f10c19);
96
+ background: linear-gradient(#e96168, #bf1b24, #f10c19);
97
+ }
98
+ .button-glossy-demo-1:hover, .button-glossy-demo-1:hover:before {
99
+ background-size: 100% 100%;
100
+ background-position: left top;
101
+ background-repeat: no-repeat;
102
+ }
103
+ .ie7 .button-glossy-demo-1, .ie8 .button-glossy-demo-1, .ie9 .button-glossy-demo-1 {
104
+ background: url('../img/picasso-buttons-glossy.png');
86
105
  background-position: 0 -1px;
87
106
  }
88
- .ie7 .button-demo-1:hover, .ie8 .button-demo-1:hover, .ie9 .button-demo-1:hover {
107
+ .ie7 .button-glossy-demo-1:hover, .ie8 .button-glossy-demo-1:hover, .ie9 .button-glossy-demo-1:hover {
89
108
  background-position: 0 -31px;
90
109
  }
91
110
 
92
- .button-demo-2 {
111
+ .button-glossy-demo-2 {
93
112
  width: 70px;
94
113
  height: 30px;
95
114
  display: inline-block;
@@ -99,88 +118,107 @@
99
118
  font-family: sans-serif;
100
119
  font-size: 12px;
101
120
  text-decoration: none;
102
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #0088cc), color-stop(100%, #002233));
103
- background: -webkit-linear-gradient(#0088cc 30%, #002233);
104
- background: -moz-linear-gradient(#0088cc 30%, #002233);
105
- background: -o-linear-gradient(#0088cc 30%, #002233);
106
- background: linear-gradient(#0088cc 30%, #002233);
121
+ 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
+ background: -webkit-linear-gradient(#0088cc, #0077b3), -webkit-linear-gradient(#006699, #00334d);
123
+ background: -moz-linear-gradient(#0088cc, #0077b3), -moz-linear-gradient(#006699, #00334d);
124
+ background: -o-linear-gradient(#0088cc, #0077b3), -o-linear-gradient(#006699, #00334d);
125
+ background: linear-gradient(#0088cc, #0077b3), linear-gradient(#006699, #00334d);
107
126
  -webkit-border-radius: 5px;
108
127
  -moz-border-radius: 5px;
109
128
  -ms-border-radius: 5px;
110
129
  -o-border-radius: 5px;
111
130
  border-radius: 5px;
131
+ background-position: left top, left 15px;
112
132
  }
113
- .button-demo-2:after, .button-demo-2:before {
133
+ .button-glossy-demo-2:after, .button-glossy-demo-2:before {
114
134
  content: "";
115
135
  position: absolute;
116
136
  display: inline-block;
117
137
  }
118
- .button-demo-2:after {
138
+ .button-glossy-demo-2:after {
119
139
  width: 68px;
120
140
  height: 28px;
121
141
  left: 1px;
122
142
  top: 1px;
123
143
  z-index: 2;
124
144
  }
125
- .button-demo-2:before {
145
+ .button-glossy-demo-2:before {
126
146
  width: 66px;
127
147
  height: 26px;
128
148
  left: 2px;
129
149
  top: 2px;
130
150
  z-index: 3;
131
151
  }
132
- .button-demo-2 span {
152
+ .button-glossy-demo-2 span {
133
153
  position: relative;
134
154
  z-index: 4;
135
155
  line-height: 30px;
136
156
  }
137
- .button-demo-2 span {
157
+ .button-glossy-demo-2 span {
138
158
  color: white;
139
159
  }
140
- .button-demo-2:after, .button-demo-2:before {
160
+ .button-glossy-demo-2:after, .button-glossy-demo-2:before {
141
161
  -webkit-border-radius: 4px;
142
162
  -moz-border-radius: 4px;
143
163
  -ms-border-radius: 4px;
144
164
  -o-border-radius: 4px;
145
165
  border-radius: 4px;
146
166
  }
147
- .button-demo-2:after {
148
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #99ddff), color-stop(100%, #00111a));
149
- background: -webkit-linear-gradient(#99ddff 20%, #00111a);
150
- background: -moz-linear-gradient(#99ddff 20%, #00111a);
151
- background: -o-linear-gradient(#99ddff 20%, #00111a);
152
- background: linear-gradient(#99ddff 20%, #00111a);
153
- }
154
- .button-demo-2:before {
155
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #0088cc), color-stop(100%, #002233));
156
- background: -webkit-linear-gradient(#0088cc 30%, #002233);
157
- background: -moz-linear-gradient(#0088cc 30%, #002233);
158
- background: -o-linear-gradient(#0088cc 30%, #002233);
159
- background: linear-gradient(#0088cc 30%, #002233);
160
- }
161
- .button-demo-2:hover {
162
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #0088cc), color-stop(100%, #008bd1));
163
- background: -webkit-linear-gradient(#0088cc 30%, #008bd1);
164
- background: -moz-linear-gradient(#0088cc 30%, #008bd1);
165
- background: -o-linear-gradient(#0088cc 30%, #008bd1);
166
- background: linear-gradient(#0088cc 30%, #008bd1);
167
- }
168
- .button-demo-2:hover:before {
169
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #0088cc), color-stop(100%, #008bd1));
170
- background: -webkit-linear-gradient(#0088cc 30%, #008bd1);
171
- background: -moz-linear-gradient(#0088cc 30%, #008bd1);
172
- background: -o-linear-gradient(#0088cc 30%, #008bd1);
173
- background: linear-gradient(#0088cc 30%, #008bd1);
174
- }
175
- .ie7 .button-demo-2, .ie8 .button-demo-2, .ie9 .button-demo-2 {
176
- background: url('../img/picasso-buttons.png');
167
+ .button-glossy-demo-2:after {
168
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(15%, #66ccff), color-stop(100%, #000000)) 50%;
169
+ background: -webkit-linear-gradient(#66ccff 15%, #000000) 50%;
170
+ background: -moz-linear-gradient(#66ccff 15%, #000000) 50%;
171
+ background: -o-linear-gradient(#66ccff 15%, #000000) 50%;
172
+ background: linear-gradient(#66ccff 15%, #000000) 50%;
173
+ }
174
+ .button-glossy-demo-2:before {
175
+ 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));
176
+ background: -webkit-linear-gradient(#0088cc, #0077b3), -webkit-linear-gradient(#006699, #00334d);
177
+ background: -moz-linear-gradient(#0088cc, #0077b3), -moz-linear-gradient(#006699, #00334d);
178
+ background: -o-linear-gradient(#0088cc, #0077b3), -o-linear-gradient(#006699, #00334d);
179
+ background: linear-gradient(#0088cc, #0077b3), linear-gradient(#006699, #00334d);
180
+ background-position: left top, left 13px;
181
+ }
182
+ .button-glossy-demo-2, .button-glossy-demo-2:before {
183
+ background-size: 100% 50%;
184
+ background-repeat: no-repeat;
185
+ }
186
+ .button-glossy-demo-2:hover {
187
+ text-decoration: none;
188
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1ab2ff), color-stop(50%, #0070a8), color-stop(100%, #0088cc));
189
+ background: -webkit-linear-gradient(#1ab2ff, #0070a8, #0088cc);
190
+ background: -moz-linear-gradient(#1ab2ff, #0070a8, #0088cc);
191
+ background: -o-linear-gradient(#1ab2ff, #0070a8, #0088cc);
192
+ background: linear-gradient(#1ab2ff, #0070a8, #0088cc);
193
+ }
194
+ .button-glossy-demo-2:hover:after {
195
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #75d1ff), color-stop(100%, #007ebd)) 50%;
196
+ background: -webkit-linear-gradient(#75d1ff 20%, #007ebd) 50%;
197
+ background: -moz-linear-gradient(#75d1ff 20%, #007ebd) 50%;
198
+ background: -o-linear-gradient(#75d1ff 20%, #007ebd) 50%;
199
+ background: linear-gradient(#75d1ff 20%, #007ebd) 50%;
200
+ }
201
+ .button-glossy-demo-2:hover:before {
202
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1ab2ff), color-stop(50%, #0070a8), color-stop(100%, #0088cc));
203
+ background: -webkit-linear-gradient(#1ab2ff, #0070a8, #0088cc);
204
+ background: -moz-linear-gradient(#1ab2ff, #0070a8, #0088cc);
205
+ background: -o-linear-gradient(#1ab2ff, #0070a8, #0088cc);
206
+ background: linear-gradient(#1ab2ff, #0070a8, #0088cc);
207
+ }
208
+ .button-glossy-demo-2:hover, .button-glossy-demo-2:hover:before {
209
+ background-size: 100% 100%;
210
+ background-position: left top;
211
+ background-repeat: no-repeat;
212
+ }
213
+ .ie7 .button-glossy-demo-2, .ie8 .button-glossy-demo-2, .ie9 .button-glossy-demo-2 {
214
+ background: url('../img/picasso-buttons-glossy.png');
177
215
  background-position: 0 -61px;
178
216
  }
179
- .ie7 .button-demo-2:hover, .ie8 .button-demo-2:hover, .ie9 .button-demo-2:hover {
217
+ .ie7 .button-glossy-demo-2:hover, .ie8 .button-glossy-demo-2:hover, .ie9 .button-glossy-demo-2:hover {
180
218
  background-position: 0 -91px;
181
219
  }
182
220
 
183
- .button-demo-3 {
221
+ .button-glossy-demo-3 {
184
222
  width: 80px;
185
223
  height: 30px;
186
224
  display: inline-block;
@@ -190,88 +228,107 @@
190
228
  font-family: sans-serif;
191
229
  font-size: 12px;
192
230
  text-decoration: none;
193
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #fbb450), color-stop(100%, #ae6704));
194
- background: -webkit-linear-gradient(#fbb450 30%, #ae6704);
195
- background: -moz-linear-gradient(#fbb450 30%, #ae6704);
196
- background: -o-linear-gradient(#fbb450 30%, #ae6704);
197
- background: linear-gradient(#fbb450 30%, #ae6704);
231
+ 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
+ background: -webkit-linear-gradient(#fbb450, #faa937), -webkit-linear-gradient(#fa9f1e, #c77605);
233
+ background: -moz-linear-gradient(#fbb450, #faa937), -moz-linear-gradient(#fa9f1e, #c77605);
234
+ background: -o-linear-gradient(#fbb450, #faa937), -o-linear-gradient(#fa9f1e, #c77605);
235
+ background: linear-gradient(#fbb450, #faa937), linear-gradient(#fa9f1e, #c77605);
198
236
  -webkit-border-radius: 5px;
199
237
  -moz-border-radius: 5px;
200
238
  -ms-border-radius: 5px;
201
239
  -o-border-radius: 5px;
202
240
  border-radius: 5px;
241
+ background-position: left top, left 15px;
203
242
  }
204
- .button-demo-3:after, .button-demo-3:before {
243
+ .button-glossy-demo-3:after, .button-glossy-demo-3:before {
205
244
  content: "";
206
245
  position: absolute;
207
246
  display: inline-block;
208
247
  }
209
- .button-demo-3:after {
248
+ .button-glossy-demo-3:after {
210
249
  width: 78px;
211
250
  height: 28px;
212
251
  left: 1px;
213
252
  top: 1px;
214
253
  z-index: 2;
215
254
  }
216
- .button-demo-3:before {
255
+ .button-glossy-demo-3:before {
217
256
  width: 76px;
218
257
  height: 26px;
219
258
  left: 2px;
220
259
  top: 2px;
221
260
  z-index: 3;
222
261
  }
223
- .button-demo-3 span {
262
+ .button-glossy-demo-3 span {
224
263
  position: relative;
225
264
  z-index: 4;
226
265
  line-height: 30px;
227
266
  }
228
- .button-demo-3 span {
267
+ .button-glossy-demo-3 span {
229
268
  color: white;
230
269
  }
231
- .button-demo-3:after, .button-demo-3:before {
270
+ .button-glossy-demo-3:after, .button-glossy-demo-3:before {
232
271
  -webkit-border-radius: 4px;
233
272
  -moz-border-radius: 4px;
234
273
  -ms-border-radius: 4px;
235
274
  -o-border-radius: 4px;
236
275
  border-radius: 4px;
237
276
  }
238
- .button-demo-3:after {
239
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(100%, #955903));
240
- background: -webkit-linear-gradient(#ffffff 20%, #955903);
241
- background: -moz-linear-gradient(#ffffff 20%, #955903);
242
- background: -o-linear-gradient(#ffffff 20%, #955903);
243
- background: linear-gradient(#ffffff 20%, #955903);
244
- }
245
- .button-demo-3:before {
246
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #fbb450), color-stop(100%, #ae6704));
247
- background: -webkit-linear-gradient(#fbb450 30%, #ae6704);
248
- background: -moz-linear-gradient(#fbb450 30%, #ae6704);
249
- background: -o-linear-gradient(#fbb450 30%, #ae6704);
250
- background: linear-gradient(#fbb450 30%, #ae6704);
251
- }
252
- .button-demo-3:hover {
253
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #fbb450), color-stop(100%, #fbb655));
254
- background: -webkit-linear-gradient(#fbb450 30%, #fbb655);
255
- background: -moz-linear-gradient(#fbb450 30%, #fbb655);
256
- background: -o-linear-gradient(#fbb450 30%, #fbb655);
257
- background: linear-gradient(#fbb450 30%, #fbb655);
258
- }
259
- .button-demo-3:hover:before {
260
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #fbb450), color-stop(100%, #fbb655));
261
- background: -webkit-linear-gradient(#fbb450 30%, #fbb655);
262
- background: -moz-linear-gradient(#fbb450 30%, #fbb655);
263
- background: -o-linear-gradient(#fbb450 30%, #fbb655);
264
- background: linear-gradient(#fbb450 30%, #fbb655);
265
- }
266
- .ie7 .button-demo-3, .ie8 .button-demo-3, .ie9 .button-demo-3 {
267
- background: url('../img/picasso-buttons.png');
277
+ .button-glossy-demo-3:after {
278
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(15%, #fef4e6), color-stop(100%, #633b02)) 50%;
279
+ background: -webkit-linear-gradient(#fef4e6 15%, #633b02) 50%;
280
+ background: -moz-linear-gradient(#fef4e6 15%, #633b02) 50%;
281
+ background: -o-linear-gradient(#fef4e6 15%, #633b02) 50%;
282
+ background: linear-gradient(#fef4e6 15%, #633b02) 50%;
283
+ }
284
+ .button-glossy-demo-3:before {
285
+ 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));
286
+ background: -webkit-linear-gradient(#fbb450, #faa937), -webkit-linear-gradient(#fa9f1e, #c77605);
287
+ background: -moz-linear-gradient(#fbb450, #faa937), -moz-linear-gradient(#fa9f1e, #c77605);
288
+ background: -o-linear-gradient(#fbb450, #faa937), -o-linear-gradient(#fa9f1e, #c77605);
289
+ background: linear-gradient(#fbb450, #faa937), linear-gradient(#fa9f1e, #c77605);
290
+ background-position: left top, left 13px;
291
+ }
292
+ .button-glossy-demo-3, .button-glossy-demo-3:before {
293
+ background-size: 100% 50%;
294
+ background-repeat: no-repeat;
295
+ }
296
+ .button-glossy-demo-3:hover {
297
+ text-decoration: none;
298
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fdd49b), color-stop(50%, #faa52d), color-stop(100%, #ffb54c));
299
+ background: -webkit-linear-gradient(#fdd49b, #faa52d, #ffb54c);
300
+ background: -moz-linear-gradient(#fdd49b, #faa52d, #ffb54c);
301
+ background: -o-linear-gradient(#fdd49b, #faa52d, #ffb54c);
302
+ background: linear-gradient(#fdd49b, #faa52d, #ffb54c);
303
+ }
304
+ .button-glossy-demo-3:hover:after {
305
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #fffbf5), color-stop(100%, #fbae41)) 50%;
306
+ background: -webkit-linear-gradient(#fffbf5 20%, #fbae41) 50%;
307
+ background: -moz-linear-gradient(#fffbf5 20%, #fbae41) 50%;
308
+ background: -o-linear-gradient(#fffbf5 20%, #fbae41) 50%;
309
+ background: linear-gradient(#fffbf5 20%, #fbae41) 50%;
310
+ }
311
+ .button-glossy-demo-3:hover:before {
312
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fdd49b), color-stop(50%, #faa52d), color-stop(100%, #ffb54c));
313
+ background: -webkit-linear-gradient(#fdd49b, #faa52d, #ffb54c);
314
+ background: -moz-linear-gradient(#fdd49b, #faa52d, #ffb54c);
315
+ background: -o-linear-gradient(#fdd49b, #faa52d, #ffb54c);
316
+ background: linear-gradient(#fdd49b, #faa52d, #ffb54c);
317
+ }
318
+ .button-glossy-demo-3:hover, .button-glossy-demo-3:hover:before {
319
+ background-size: 100% 100%;
320
+ background-position: left top;
321
+ background-repeat: no-repeat;
322
+ }
323
+ .ie7 .button-glossy-demo-3, .ie8 .button-glossy-demo-3, .ie9 .button-glossy-demo-3 {
324
+ background: url('../img/picasso-buttons-glossy.png');
268
325
  background-position: 0 -121px;
269
326
  }
270
- .ie7 .button-demo-3:hover, .ie8 .button-demo-3:hover, .ie9 .button-demo-3:hover {
327
+ .ie7 .button-glossy-demo-3:hover, .ie8 .button-glossy-demo-3:hover, .ie9 .button-glossy-demo-3:hover {
271
328
  background-position: 0 -151px;
272
329
  }
273
330
 
274
- .button-demo-4 {
331
+ .button-glossy-demo-4 {
275
332
  width: 250px;
276
333
  height: 30px;
277
334
  display: inline-block;
@@ -281,88 +338,527 @@
281
338
  font-family: sans-serif;
282
339
  font-size: 12px;
283
340
  text-decoration: none;
284
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #62c462), color-stop(100%, #276627));
285
- background: -webkit-linear-gradient(#62c462 30%, #276627);
286
- background: -moz-linear-gradient(#62c462 30%, #276627);
287
- background: -o-linear-gradient(#62c462 30%, #276627);
288
- background: linear-gradient(#62c462 30%, #276627);
341
+ 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
+ background: -webkit-linear-gradient(#62c462, #4fbd4f), -webkit-linear-gradient(#42b142, #2d792d);
343
+ background: -moz-linear-gradient(#62c462, #4fbd4f), -moz-linear-gradient(#42b142, #2d792d);
344
+ background: -o-linear-gradient(#62c462, #4fbd4f), -o-linear-gradient(#42b142, #2d792d);
345
+ background: linear-gradient(#62c462, #4fbd4f), linear-gradient(#42b142, #2d792d);
289
346
  -webkit-border-radius: 5px;
290
347
  -moz-border-radius: 5px;
291
348
  -ms-border-radius: 5px;
292
349
  -o-border-radius: 5px;
293
350
  border-radius: 5px;
351
+ background-position: left top, left 15px;
294
352
  }
295
- .button-demo-4:after, .button-demo-4:before {
353
+ .button-glossy-demo-4:after, .button-glossy-demo-4:before {
296
354
  content: "";
297
355
  position: absolute;
298
356
  display: inline-block;
299
357
  }
300
- .button-demo-4:after {
358
+ .button-glossy-demo-4:after {
301
359
  width: 248px;
302
360
  height: 28px;
303
361
  left: 1px;
304
362
  top: 1px;
305
363
  z-index: 2;
306
364
  }
307
- .button-demo-4:before {
365
+ .button-glossy-demo-4:before {
308
366
  width: 246px;
309
367
  height: 26px;
310
368
  left: 2px;
311
369
  top: 2px;
312
370
  z-index: 3;
313
371
  }
314
- .button-demo-4 span {
372
+ .button-glossy-demo-4 span {
315
373
  position: relative;
316
374
  z-index: 4;
317
375
  line-height: 30px;
318
376
  }
319
- .button-demo-4 span {
377
+ .button-glossy-demo-4 span {
320
378
  color: white;
321
379
  }
322
- .button-demo-4:after, .button-demo-4:before {
380
+ .button-glossy-demo-4:after, .button-glossy-demo-4:before {
323
381
  -webkit-border-radius: 4px;
324
382
  -moz-border-radius: 4px;
325
383
  -ms-border-radius: 4px;
326
384
  -o-border-radius: 4px;
327
385
  border-radius: 4px;
328
386
  }
329
- .button-demo-4:after {
330
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f6fcf6), color-stop(100%, #205420));
331
- background: -webkit-linear-gradient(#f6fcf6 20%, #205420);
332
- background: -moz-linear-gradient(#f6fcf6 20%, #205420);
333
- background: -o-linear-gradient(#f6fcf6 20%, #205420);
334
- background: linear-gradient(#f6fcf6 20%, #205420);
335
- }
336
- .button-demo-4:before {
337
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #62c462), color-stop(100%, #276627));
338
- background: -webkit-linear-gradient(#62c462 30%, #276627);
339
- background: -moz-linear-gradient(#62c462 30%, #276627);
340
- background: -o-linear-gradient(#62c462 30%, #276627);
341
- background: linear-gradient(#62c462 30%, #276627);
342
- }
343
- .button-demo-4:hover {
344
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #62c462), color-stop(100%, #66c566));
345
- background: -webkit-linear-gradient(#62c462 30%, #66c566);
346
- background: -moz-linear-gradient(#62c462 30%, #66c566);
347
- background: -o-linear-gradient(#62c462 30%, #66c566);
348
- background: linear-gradient(#62c462 30%, #66c566);
349
- }
350
- .button-demo-4:hover:before {
351
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #62c462), color-stop(100%, #66c566));
352
- background: -webkit-linear-gradient(#62c462 30%, #66c566);
353
- background: -moz-linear-gradient(#62c462 30%, #66c566);
354
- background: -o-linear-gradient(#62c462 30%, #66c566);
355
- background: linear-gradient(#62c462 30%, #66c566);
356
- }
357
- .ie7 .button-demo-4, .ie8 .button-demo-4, .ie9 .button-demo-4 {
358
- background: url('../img/picasso-buttons.png');
387
+ .button-glossy-demo-4:after {
388
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(15%, #d1eed1), color-stop(100%, #122f12)) 50%;
389
+ background: -webkit-linear-gradient(#d1eed1 15%, #122f12) 50%;
390
+ background: -moz-linear-gradient(#d1eed1 15%, #122f12) 50%;
391
+ background: -o-linear-gradient(#d1eed1 15%, #122f12) 50%;
392
+ background: linear-gradient(#d1eed1 15%, #122f12) 50%;
393
+ }
394
+ .button-glossy-demo-4:before {
395
+ 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));
396
+ background: -webkit-linear-gradient(#62c462, #4fbd4f), -webkit-linear-gradient(#42b142, #2d792d);
397
+ background: -moz-linear-gradient(#62c462, #4fbd4f), -moz-linear-gradient(#42b142, #2d792d);
398
+ background: -o-linear-gradient(#62c462, #4fbd4f), -o-linear-gradient(#42b142, #2d792d);
399
+ background: linear-gradient(#62c462, #4fbd4f), linear-gradient(#42b142, #2d792d);
400
+ background-position: left top, left 13px;
401
+ }
402
+ .button-glossy-demo-4, .button-glossy-demo-4:before {
403
+ background-size: 100% 50%;
404
+ background-repeat: no-repeat;
405
+ }
406
+ .button-glossy-demo-4:hover {
407
+ text-decoration: none;
408
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #9ad99a), color-stop(50%, #48ba48), color-stop(100%, #52d452));
409
+ background: -webkit-linear-gradient(#9ad99a, #48ba48, #52d452);
410
+ background: -moz-linear-gradient(#9ad99a, #48ba48, #52d452);
411
+ background: -o-linear-gradient(#9ad99a, #48ba48, #52d452);
412
+ background: linear-gradient(#9ad99a, #48ba48, #52d452);
413
+ }
414
+ .button-glossy-demo-4:hover:after {
415
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #dcf2dc), color-stop(100%, #57c057)) 50%;
416
+ background: -webkit-linear-gradient(#dcf2dc 20%, #57c057) 50%;
417
+ background: -moz-linear-gradient(#dcf2dc 20%, #57c057) 50%;
418
+ background: -o-linear-gradient(#dcf2dc 20%, #57c057) 50%;
419
+ background: linear-gradient(#dcf2dc 20%, #57c057) 50%;
420
+ }
421
+ .button-glossy-demo-4:hover:before {
422
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #9ad99a), color-stop(50%, #48ba48), color-stop(100%, #52d452));
423
+ background: -webkit-linear-gradient(#9ad99a, #48ba48, #52d452);
424
+ background: -moz-linear-gradient(#9ad99a, #48ba48, #52d452);
425
+ background: -o-linear-gradient(#9ad99a, #48ba48, #52d452);
426
+ background: linear-gradient(#9ad99a, #48ba48, #52d452);
427
+ }
428
+ .button-glossy-demo-4:hover, .button-glossy-demo-4:hover:before {
429
+ background-size: 100% 100%;
430
+ background-position: left top;
431
+ background-repeat: no-repeat;
432
+ }
433
+ .ie7 .button-glossy-demo-4, .ie8 .button-glossy-demo-4, .ie9 .button-glossy-demo-4 {
434
+ background: url('../img/picasso-buttons-glossy.png');
359
435
  background-position: 0 -181px;
360
436
  }
361
- .ie7 .button-demo-4:hover, .ie8 .button-demo-4:hover, .ie9 .button-demo-4:hover {
437
+ .ie7 .button-glossy-demo-4:hover, .ie8 .button-glossy-demo-4:hover, .ie9 .button-glossy-demo-4:hover {
362
438
  background-position: 0 -211px;
363
439
  }
364
440
 
365
- .mini-button-demo-1 {
441
+ .button-3d-demo-1 {
442
+ padding: 0 13px;
443
+ display: inline-block;
444
+ line-height: 2.2em;
445
+ color: white;
446
+ border: 1px solid #c00811;
447
+ font-family: sans-serif;
448
+ font-size: 13px;
449
+ text-decoration: none;
450
+ background-color: #f73741;
451
+ text-align: center;
452
+ 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
+ -webkit-border-radius: 0.4em;
462
+ -moz-border-radius: 0.4em;
463
+ -ms-border-radius: 0.4em;
464
+ -o-border-radius: 0.4em;
465
+ border-radius: 0.4em;
466
+ }
467
+ .button-3d-demo-1:active {
468
+ position: relative;
469
+ top: 1px;
470
+ }
471
+ .button-3d-demo-1:visited {
472
+ color: white;
473
+ }
474
+ .button-3d-demo-1:hover {
475
+ text-decoration: none;
476
+ color: white;
477
+ background-color: #ff2f3a;
478
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #c00811));
479
+ background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), #c00811);
480
+ background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), #c00811);
481
+ background-image: -o-linear-gradient(rgba(255, 255, 255, 0), #c00811);
482
+ background-image: linear-gradient(rgba(255, 255, 255, 0), #c00811);
483
+ -webkit-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #ff2f3a;
484
+ -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
+ 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
+ }
487
+ .button-3d-demo-1:active {
488
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f73741), color-stop(100%, #8f060d));
489
+ background-image: -webkit-linear-gradient(#f73741, #8f060d);
490
+ background-image: -moz-linear-gradient(#f73741, #8f060d);
491
+ background-image: -o-linear-gradient(#f73741, #8f060d);
492
+ background-image: linear-gradient(#f73741, #8f060d);
493
+ text-shadow: 0 -1px 0 black;
494
+ -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
+ -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
+ 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
+ }
498
+ .ie7 .button-3d-demo-1, .ie8 .button-3d-demo-1, .ie9 .button-3d-demo-1 {
499
+ *zoom: 1;
500
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF73741', endColorstr='#FF8F060D');
501
+ }
502
+ .ie7 .button-3d-demo-1:hover, .ie8 .button-3d-demo-1:hover, .ie9 .button-3d-demo-1:hover {
503
+ *zoom: 1;
504
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FFFFFF', endColorstr='#FFC00811');
505
+ }
506
+ .ie7 .button-3d-demo-1:active, .ie8 .button-3d-demo-1:active, .ie9 .button-3d-demo-1:active {
507
+ *zoom: 1;
508
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF73741', endColorstr='#FF8F060D');
509
+ }
510
+
511
+ .button-3d-demo-2 {
512
+ padding: 0 13px;
513
+ display: inline-block;
514
+ line-height: 2.2em;
515
+ color: white;
516
+ border: 1px solid #004466;
517
+ font-family: sans-serif;
518
+ font-size: 13px;
519
+ text-decoration: none;
520
+ background-color: #0088cc;
521
+ text-align: center;
522
+ 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
+ -webkit-border-radius: 0.4em;
532
+ -moz-border-radius: 0.4em;
533
+ -ms-border-radius: 0.4em;
534
+ -o-border-radius: 0.4em;
535
+ border-radius: 0.4em;
536
+ }
537
+ .button-3d-demo-2:active {
538
+ position: relative;
539
+ top: 1px;
540
+ }
541
+ .button-3d-demo-2:visited {
542
+ color: white;
543
+ }
544
+ .button-3d-demo-2:hover {
545
+ text-decoration: none;
546
+ color: white;
547
+ background-color: #0088cc;
548
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #004466));
549
+ background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), #004466);
550
+ background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), #004466);
551
+ background-image: -o-linear-gradient(rgba(255, 255, 255, 0), #004466);
552
+ background-image: linear-gradient(rgba(255, 255, 255, 0), #004466);
553
+ -webkit-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #0088cc;
554
+ -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
+ 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
+ }
557
+ .button-3d-demo-2:active {
558
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #002233));
559
+ background-image: -webkit-linear-gradient(#0088cc, #002233);
560
+ background-image: -moz-linear-gradient(#0088cc, #002233);
561
+ background-image: -o-linear-gradient(#0088cc, #002233);
562
+ background-image: linear-gradient(#0088cc, #002233);
563
+ text-shadow: 0 -1px 0 black;
564
+ -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
+ -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
+ 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
+ }
568
+ .ie7 .button-3d-demo-2, .ie8 .button-3d-demo-2, .ie9 .button-3d-demo-2 {
569
+ *zoom: 1;
570
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF0088CC', endColorstr='#FF002233');
571
+ }
572
+ .ie7 .button-3d-demo-2:hover, .ie8 .button-3d-demo-2:hover, .ie9 .button-3d-demo-2:hover {
573
+ *zoom: 1;
574
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FFFFFF', endColorstr='#FF004466');
575
+ }
576
+ .ie7 .button-3d-demo-2:active, .ie8 .button-3d-demo-2:active, .ie9 .button-3d-demo-2:active {
577
+ *zoom: 1;
578
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF0088CC', endColorstr='#FF002233');
579
+ }
580
+
581
+ .button-3d-demo-3 {
582
+ padding: 0 13px;
583
+ display: inline-block;
584
+ line-height: 2.2em;
585
+ color: white;
586
+ border: 1px solid #e08505;
587
+ font-family: sans-serif;
588
+ font-size: 13px;
589
+ text-decoration: none;
590
+ background-color: #fbb450;
591
+ text-align: center;
592
+ 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
+ -webkit-border-radius: 0.4em;
602
+ -moz-border-radius: 0.4em;
603
+ -ms-border-radius: 0.4em;
604
+ -o-border-radius: 0.4em;
605
+ border-radius: 0.4em;
606
+ }
607
+ .button-3d-demo-3:active {
608
+ position: relative;
609
+ top: 1px;
610
+ }
611
+ .button-3d-demo-3:visited {
612
+ color: white;
613
+ }
614
+ .button-3d-demo-3:hover {
615
+ text-decoration: none;
616
+ color: white;
617
+ background-color: #ffb54c;
618
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #e08505));
619
+ background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), #e08505);
620
+ background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), #e08505);
621
+ background-image: -o-linear-gradient(rgba(255, 255, 255, 0), #e08505);
622
+ background-image: linear-gradient(rgba(255, 255, 255, 0), #e08505);
623
+ -webkit-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #ffb54c;
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 #ffb54c;
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 #ffb54c;
626
+ }
627
+ .button-3d-demo-3:active {
628
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbb450), color-stop(100%, #ae6704));
629
+ background-image: -webkit-linear-gradient(#fbb450, #ae6704);
630
+ background-image: -moz-linear-gradient(#fbb450, #ae6704);
631
+ background-image: -o-linear-gradient(#fbb450, #ae6704);
632
+ background-image: linear-gradient(#fbb450, #ae6704);
633
+ text-shadow: 0 -1px 0 black;
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);
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);
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);
637
+ }
638
+ .ie7 .button-3d-demo-3, .ie8 .button-3d-demo-3, .ie9 .button-3d-demo-3 {
639
+ *zoom: 1;
640
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFBB450', endColorstr='#FFAE6704');
641
+ }
642
+ .ie7 .button-3d-demo-3:hover, .ie8 .button-3d-demo-3:hover, .ie9 .button-3d-demo-3:hover {
643
+ *zoom: 1;
644
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FFFFFF', endColorstr='#FFE08505');
645
+ }
646
+ .ie7 .button-3d-demo-3:active, .ie8 .button-3d-demo-3:active, .ie9 .button-3d-demo-3:active {
647
+ *zoom: 1;
648
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFBB450', endColorstr='#FFAE6704');
649
+ }
650
+
651
+ .button-3d-demo-4 {
652
+ padding: 0 13px;
653
+ display: inline-block;
654
+ line-height: 2.2em;
655
+ color: white;
656
+ border: 1px solid #348c34;
657
+ font-family: sans-serif;
658
+ font-size: 13px;
659
+ text-decoration: none;
660
+ background-color: #62c462;
661
+ text-align: center;
662
+ 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
+ -webkit-border-radius: 0.4em;
672
+ -moz-border-radius: 0.4em;
673
+ -ms-border-radius: 0.4em;
674
+ -o-border-radius: 0.4em;
675
+ border-radius: 0.4em;
676
+ }
677
+ .button-3d-demo-4:active {
678
+ position: relative;
679
+ top: 1px;
680
+ }
681
+ .button-3d-demo-4:visited {
682
+ color: white;
683
+ }
684
+ .button-3d-demo-4:hover {
685
+ text-decoration: none;
686
+ color: white;
687
+ background-color: #57cf57;
688
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #348c34));
689
+ background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), #348c34);
690
+ background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), #348c34);
691
+ background-image: -o-linear-gradient(rgba(255, 255, 255, 0), #348c34);
692
+ background-image: linear-gradient(rgba(255, 255, 255, 0), #348c34);
693
+ -webkit-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #57cf57;
694
+ -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
+ 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
+ }
697
+ .button-3d-demo-4:active {
698
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #62c462), color-stop(100%, #276627));
699
+ background-image: -webkit-linear-gradient(#62c462, #276627);
700
+ background-image: -moz-linear-gradient(#62c462, #276627);
701
+ background-image: -o-linear-gradient(#62c462, #276627);
702
+ background-image: linear-gradient(#62c462, #276627);
703
+ text-shadow: 0 -1px 0 black;
704
+ -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
+ -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
+ 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
+ }
708
+ .ie7 .button-3d-demo-4, .ie8 .button-3d-demo-4, .ie9 .button-3d-demo-4 {
709
+ *zoom: 1;
710
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF62C462', endColorstr='#FF276627');
711
+ }
712
+ .ie7 .button-3d-demo-4:hover, .ie8 .button-3d-demo-4:hover, .ie9 .button-3d-demo-4:hover {
713
+ *zoom: 1;
714
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FFFFFF', endColorstr='#FF348C34');
715
+ }
716
+ .ie7 .button-3d-demo-4:active, .ie8 .button-3d-demo-4:active, .ie9 .button-3d-demo-4:active {
717
+ *zoom: 1;
718
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF62C462', endColorstr='#FF276627');
719
+ }
720
+
721
+ .button-3d-demo-5 {
722
+ padding: 0 24px;
723
+ display: block;
724
+ line-height: 2.2em;
725
+ color: white;
726
+ border: 1px solid #00132e;
727
+ font-family: sans-serif;
728
+ font-size: 24px;
729
+ text-decoration: none;
730
+ background-color: #013d93;
731
+ text-align: center;
732
+ 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
+ -webkit-border-radius: 0.4em;
742
+ -moz-border-radius: 0.4em;
743
+ -ms-border-radius: 0.4em;
744
+ -o-border-radius: 0.4em;
745
+ border-radius: 0.4em;
746
+ }
747
+ .button-3d-demo-5:active {
748
+ position: relative;
749
+ top: 1px;
750
+ }
751
+ .button-3d-demo-5:visited {
752
+ color: white;
753
+ }
754
+ .button-3d-demo-5:hover {
755
+ text-decoration: none;
756
+ color: white;
757
+ background-color: #003d94;
758
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #00132e));
759
+ background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), #00132e);
760
+ background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), #00132e);
761
+ background-image: -o-linear-gradient(rgba(255, 255, 255, 0), #00132e);
762
+ background-image: linear-gradient(rgba(255, 255, 255, 0), #00132e);
763
+ -webkit-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #003d94;
764
+ -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
+ 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
+ }
767
+ .button-3d-demo-5:active {
768
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #013d93), color-stop(100%, #000000));
769
+ background-image: -webkit-linear-gradient(#013d93, #000000);
770
+ background-image: -moz-linear-gradient(#013d93, #000000);
771
+ background-image: -o-linear-gradient(#013d93, #000000);
772
+ background-image: linear-gradient(#013d93, #000000);
773
+ text-shadow: 0 -1px 0 black;
774
+ -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
+ -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
+ 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
+ }
778
+ .ie7 .button-3d-demo-5, .ie8 .button-3d-demo-5, .ie9 .button-3d-demo-5 {
779
+ *zoom: 1;
780
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF013D93', endColorstr='#FF000000');
781
+ }
782
+ .ie7 .button-3d-demo-5:hover, .ie8 .button-3d-demo-5:hover, .ie9 .button-3d-demo-5:hover {
783
+ *zoom: 1;
784
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FFFFFF', endColorstr='#FF00132E');
785
+ }
786
+ .ie7 .button-3d-demo-5:active, .ie8 .button-3d-demo-5:active, .ie9 .button-3d-demo-5:active {
787
+ *zoom: 1;
788
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF013D93', endColorstr='#FF000000');
789
+ }
790
+
791
+ .button-3d-demo-6 {
792
+ padding: 0 11px;
793
+ display: inline-block;
794
+ line-height: 1.75em;
795
+ color: #013d93;
796
+ border: 1px solid #bbbbbb;
797
+ font-family: sans-serif;
798
+ font-size: 11px;
799
+ text-decoration: none;
800
+ background-color: #eeeeee;
801
+ text-align: center;
802
+ 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
+ -webkit-border-radius: 1.1em;
812
+ -moz-border-radius: 1.1em;
813
+ -ms-border-radius: 1.1em;
814
+ -o-border-radius: 1.1em;
815
+ border-radius: 1.1em;
816
+ }
817
+ .button-3d-demo-6:active {
818
+ position: relative;
819
+ top: 1px;
820
+ }
821
+ .button-3d-demo-6:visited {
822
+ color: #013d93;
823
+ }
824
+ .button-3d-demo-6:hover {
825
+ text-decoration: none;
826
+ color: #013d93;
827
+ background-color: #f0ecec;
828
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #bbbbbb));
829
+ background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), #bbbbbb);
830
+ background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), #bbbbbb);
831
+ background-image: -o-linear-gradient(rgba(255, 255, 255, 0), #bbbbbb);
832
+ background-image: linear-gradient(rgba(255, 255, 255, 0), #bbbbbb);
833
+ -webkit-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #f0ecec;
834
+ -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
+ 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
+ }
837
+ .button-3d-demo-6:active {
838
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #a2a2a2));
839
+ background-image: -webkit-linear-gradient(#eeeeee, #a2a2a2);
840
+ background-image: -moz-linear-gradient(#eeeeee, #a2a2a2);
841
+ background-image: -o-linear-gradient(#eeeeee, #a2a2a2);
842
+ background-image: linear-gradient(#eeeeee, #a2a2a2);
843
+ text-shadow: 0 -1px 0 #b5b5b5;
844
+ -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
+ -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
+ 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
+ }
848
+ .ie7 .button-3d-demo-6, .ie8 .button-3d-demo-6, .ie9 .button-3d-demo-6 {
849
+ *zoom: 1;
850
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFEEEEEE', endColorstr='#FFA2A2A2');
851
+ }
852
+ .ie7 .button-3d-demo-6:hover, .ie8 .button-3d-demo-6:hover, .ie9 .button-3d-demo-6:hover {
853
+ *zoom: 1;
854
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FFFFFF', endColorstr='#FFBBBBBB');
855
+ }
856
+ .ie7 .button-3d-demo-6:active, .ie8 .button-3d-demo-6:active, .ie9 .button-3d-demo-6:active {
857
+ *zoom: 1;
858
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFEEEEEE', endColorstr='#FFA2A2A2');
859
+ }
860
+
861
+ .button-mini-demo-1 {
366
862
  display: inline-block;
367
863
  height: 20px;
368
864
  padding-right: 10px;
@@ -384,42 +880,43 @@
384
880
  -moz-box-shadow: #333333 0px 1px 2px 0px;
385
881
  box-shadow: #333333 0px 1px 2px 0px;
386
882
  }
387
- .mini-button-demo-1 span {
883
+ .button-mini-demo-1 span {
388
884
  height: 20px;
389
885
  line-height: 20px;
390
886
  padding-left: 10px;
887
+ display: block;
391
888
  }
392
- .mini-button-demo-1:hover {
889
+ .button-mini-demo-1:hover {
890
+ text-decoration: none;
393
891
  background: #e3e3e3;
394
892
  }
395
- .mini-button-demo-1:active {
893
+ .button-mini-demo-1:active {
396
894
  background: #cacaca;
397
895
  -webkit-box-shadow: #999999 0px 0px 3px 3px inset;
398
896
  -moz-box-shadow: #999999 0px 0px 3px 3px inset;
399
897
  box-shadow: #999999 0px 0px 3px 3px inset;
400
898
  }
401
- .mini-button-demo-1 span {
899
+ .button-mini-demo-1 span {
402
900
  color: #0e6695;
403
- display: block;
404
901
  font-size: 11px;
405
902
  }
406
- .ie7 .mini-button-demo-1, .ie8 .mini-button-demo-1, .ie9 .mini-button-demo-1 {
407
- background: url('../img/picasso-mini-buttons.png');
903
+ .ie7 .button-mini-demo-1, .ie8 .button-mini-demo-1, .ie9 .button-mini-demo-1 {
904
+ background: url('../img/picasso-buttons-mini.png');
408
905
  background-position: right -1px;
409
906
  }
410
- .ie7 .mini-button-demo-1:hover, .ie8 .mini-button-demo-1:hover, .ie9 .mini-button-demo-1:hover {
907
+ .ie7 .button-mini-demo-1:hover, .ie8 .button-mini-demo-1:hover, .ie9 .button-mini-demo-1:hover {
411
908
  background-position: right -21px;
412
909
  }
413
- .ie7 .mini-button-demo-1 span, .ie8 .mini-button-demo-1 span, .ie9 .mini-button-demo-1 span {
414
- background-image: url('../img/picasso-mini-buttons.png');
910
+ .ie7 .button-mini-demo-1 span, .ie8 .button-mini-demo-1 span, .ie9 .button-mini-demo-1 span {
911
+ background-image: url('../img/picasso-buttons-mini.png');
415
912
  background-color: white;
416
913
  background-position: 0 -1px;
417
914
  }
418
- .ie7 .mini-button-demo-1 span:hover, .ie8 .mini-button-demo-1 span:hover, .ie9 .mini-button-demo-1 span:hover {
915
+ .ie7 .button-mini-demo-1 span:hover, .ie8 .button-mini-demo-1 span:hover, .ie9 .button-mini-demo-1 span:hover {
419
916
  background-position: 0 -21px;
420
917
  }
421
918
 
422
- .mini-button-demo-2 {
919
+ .button-mini-demo-2 {
423
920
  display: inline-block;
424
921
  height: 20px;
425
922
  padding-right: 10px;
@@ -441,42 +938,43 @@
441
938
  -moz-box-shadow: #333333 0px 1px 2px 0px;
442
939
  box-shadow: #333333 0px 1px 2px 0px;
443
940
  }
444
- .mini-button-demo-2 span {
941
+ .button-mini-demo-2 span {
445
942
  height: 20px;
446
943
  line-height: 20px;
447
944
  padding-left: 10px;
945
+ display: block;
448
946
  }
449
- .mini-button-demo-2:hover {
947
+ .button-mini-demo-2:hover {
948
+ text-decoration: none;
450
949
  background: #0077b3;
451
950
  }
452
- .mini-button-demo-2:active {
951
+ .button-mini-demo-2:active {
453
952
  background: #005580;
454
953
  -webkit-box-shadow: #999999 0px 0px 3px 3px inset;
455
954
  -moz-box-shadow: #999999 0px 0px 3px 3px inset;
456
955
  box-shadow: #999999 0px 0px 3px 3px inset;
457
956
  }
458
- .mini-button-demo-2 span {
957
+ .button-mini-demo-2 span {
459
958
  color: white;
460
- display: block;
461
959
  font-size: 11px;
462
960
  }
463
- .ie7 .mini-button-demo-2, .ie8 .mini-button-demo-2, .ie9 .mini-button-demo-2 {
464
- background: url('../img/picasso-mini-buttons.png');
961
+ .ie7 .button-mini-demo-2, .ie8 .button-mini-demo-2, .ie9 .button-mini-demo-2 {
962
+ background: url('../img/picasso-buttons-mini.png');
465
963
  background-position: right -41px;
466
964
  }
467
- .ie7 .mini-button-demo-2:hover, .ie8 .mini-button-demo-2:hover, .ie9 .mini-button-demo-2:hover {
965
+ .ie7 .button-mini-demo-2:hover, .ie8 .button-mini-demo-2:hover, .ie9 .button-mini-demo-2:hover {
468
966
  background-position: right -61px;
469
967
  }
470
- .ie7 .mini-button-demo-2 span, .ie8 .mini-button-demo-2 span, .ie9 .mini-button-demo-2 span {
471
- background-image: url('../img/picasso-mini-buttons.png');
968
+ .ie7 .button-mini-demo-2 span, .ie8 .button-mini-demo-2 span, .ie9 .button-mini-demo-2 span {
969
+ background-image: url('../img/picasso-buttons-mini.png');
472
970
  background-color: white;
473
971
  background-position: 0 -41px;
474
972
  }
475
- .ie7 .mini-button-demo-2 span:hover, .ie8 .mini-button-demo-2 span:hover, .ie9 .mini-button-demo-2 span:hover {
973
+ .ie7 .button-mini-demo-2 span:hover, .ie8 .button-mini-demo-2 span:hover, .ie9 .button-mini-demo-2 span:hover {
476
974
  background-position: 0 -61px;
477
975
  }
478
976
 
479
- .mini-button-demo-3 {
977
+ .button-mini-demo-3 {
480
978
  display: inline-block;
481
979
  height: 20px;
482
980
  padding-right: 10px;
@@ -498,42 +996,43 @@
498
996
  -moz-box-shadow: #333333 0px 1px 2px 0px;
499
997
  box-shadow: #333333 0px 1px 2px 0px;
500
998
  }
501
- .mini-button-demo-3 span {
999
+ .button-mini-demo-3 span {
502
1000
  height: 20px;
503
1001
  line-height: 20px;
504
1002
  padding-left: 10px;
1003
+ display: block;
505
1004
  }
506
- .mini-button-demo-3:hover {
1005
+ .button-mini-demo-3:hover {
1006
+ text-decoration: none;
507
1007
  background: #d63b34;
508
1008
  }
509
- .mini-button-demo-3:active {
1009
+ .button-mini-demo-3:active {
510
1010
  background: #b22a24;
511
1011
  -webkit-box-shadow: #999999 0px 0px 3px 3px inset;
512
1012
  -moz-box-shadow: #999999 0px 0px 3px 3px inset;
513
1013
  box-shadow: #999999 0px 0px 3px 3px inset;
514
1014
  }
515
- .mini-button-demo-3 span {
1015
+ .button-mini-demo-3 span {
516
1016
  color: white;
517
- display: block;
518
1017
  font-size: 11px;
519
1018
  }
520
- .ie7 .mini-button-demo-3, .ie8 .mini-button-demo-3, .ie9 .mini-button-demo-3 {
521
- background: url('../img/picasso-mini-buttons.png');
1019
+ .ie7 .button-mini-demo-3, .ie8 .button-mini-demo-3, .ie9 .button-mini-demo-3 {
1020
+ background: url('../img/picasso-buttons-mini.png');
522
1021
  background-position: right -81px;
523
1022
  }
524
- .ie7 .mini-button-demo-3:hover, .ie8 .mini-button-demo-3:hover, .ie9 .mini-button-demo-3:hover {
1023
+ .ie7 .button-mini-demo-3:hover, .ie8 .button-mini-demo-3:hover, .ie9 .button-mini-demo-3:hover {
525
1024
  background-position: right -101px;
526
1025
  }
527
- .ie7 .mini-button-demo-3 span, .ie8 .mini-button-demo-3 span, .ie9 .mini-button-demo-3 span {
528
- background-image: url('../img/picasso-mini-buttons.png');
1026
+ .ie7 .button-mini-demo-3 span, .ie8 .button-mini-demo-3 span, .ie9 .button-mini-demo-3 span {
1027
+ background-image: url('../img/picasso-buttons-mini.png');
529
1028
  background-color: white;
530
1029
  background-position: 0 -81px;
531
1030
  }
532
- .ie7 .mini-button-demo-3 span:hover, .ie8 .mini-button-demo-3 span:hover, .ie9 .mini-button-demo-3 span:hover {
1031
+ .ie7 .button-mini-demo-3 span:hover, .ie8 .button-mini-demo-3 span:hover, .ie9 .button-mini-demo-3 span:hover {
533
1032
  background-position: 0 -101px;
534
1033
  }
535
1034
 
536
- .mini-button-demo-4 {
1035
+ .button-mini-demo-4 {
537
1036
  display: inline-block;
538
1037
  height: 20px;
539
1038
  padding-right: 10px;
@@ -555,38 +1054,39 @@
555
1054
  -moz-box-shadow: #333333 0px 1px 2px 0px;
556
1055
  box-shadow: #333333 0px 1px 2px 0px;
557
1056
  }
558
- .mini-button-demo-4 span {
1057
+ .button-mini-demo-4 span {
559
1058
  height: 20px;
560
1059
  line-height: 20px;
561
1060
  padding-left: 10px;
1061
+ display: block;
562
1062
  }
563
- .mini-button-demo-4:hover {
1063
+ .button-mini-demo-4:hover {
1064
+ text-decoration: none;
564
1065
  background: #343434;
565
1066
  }
566
- .mini-button-demo-4:active {
1067
+ .button-mini-demo-4:active {
567
1068
  background: #1b1b1b;
568
1069
  -webkit-box-shadow: #999999 0px 0px 3px 3px inset;
569
1070
  -moz-box-shadow: #999999 0px 0px 3px 3px inset;
570
1071
  box-shadow: #999999 0px 0px 3px 3px inset;
571
1072
  }
572
- .mini-button-demo-4 span {
1073
+ .button-mini-demo-4 span {
573
1074
  color: white;
574
- display: block;
575
1075
  font-size: 11px;
576
1076
  }
577
- .ie7 .mini-button-demo-4, .ie8 .mini-button-demo-4, .ie9 .mini-button-demo-4 {
578
- background: url('../img/picasso-mini-buttons.png');
1077
+ .ie7 .button-mini-demo-4, .ie8 .button-mini-demo-4, .ie9 .button-mini-demo-4 {
1078
+ background: url('../img/picasso-buttons-mini.png');
579
1079
  background-position: right -121px;
580
1080
  }
581
- .ie7 .mini-button-demo-4:hover, .ie8 .mini-button-demo-4:hover, .ie9 .mini-button-demo-4:hover {
1081
+ .ie7 .button-mini-demo-4:hover, .ie8 .button-mini-demo-4:hover, .ie9 .button-mini-demo-4:hover {
582
1082
  background-position: right -141px;
583
1083
  }
584
- .ie7 .mini-button-demo-4 span, .ie8 .mini-button-demo-4 span, .ie9 .mini-button-demo-4 span {
585
- background-image: url('../img/picasso-mini-buttons.png');
1084
+ .ie7 .button-mini-demo-4 span, .ie8 .button-mini-demo-4 span, .ie9 .button-mini-demo-4 span {
1085
+ background-image: url('../img/picasso-buttons-mini.png');
586
1086
  background-color: white;
587
1087
  background-position: 0 -121px;
588
1088
  }
589
- .ie7 .mini-button-demo-4 span:hover, .ie8 .mini-button-demo-4 span:hover, .ie9 .mini-button-demo-4 span:hover {
1089
+ .ie7 .button-mini-demo-4 span:hover, .ie8 .button-mini-demo-4 span:hover, .ie9 .button-mini-demo-4 span:hover {
590
1090
  background-position: 0 -141px;
591
1091
  }
592
1092