picasso 0.0.3 → 0.1.0

data/docs/changelog.html

@@ -52,6 +52,8 @@
                             
                                 <ol>
                                     
+                                        <li><a href="./changelog.html#010">0.1.0</a></li>
+                                    
                                         <li><a href="./changelog.html#003">0.0.3</a></li>
                                     
                                         <li><a href="./changelog.html#002">0.0.2</a></li>
@@ -67,15 +69,29 @@
                             
                                 <ol>
                                     
+                                        <li><a href="./todo.html#componentes">Componentes</a></li>
+                                    
+                                        <li><a href="./todo.html#utilidades">Utilidades</a></li>
+                                    
+                                        <li><a href="./todo.html#otros">Otros</a></li>
+                                    
                                 </ol>
                             
                         </li>
                     
                         <li>
-                            <a href="./docs.html#generar-la-documentacioacuten">Generar la documentaci&amp;oacute;n</a>
+                            <a href="./mejoras.html#mejoras-antildeadidos">Mejoras / A&amp;ntilde;adidos</a>
                             
                                 <ol>
                                     
+                                        <li><a href="./mejoras.html#utilizar-el-coacutedigo-fuente">Utilizar el c&amp;oacute;digo fuente</a></li>
+                                    
+                                        <li><a href="./mejoras.html#pruebas-locales-de-nuevos-antildeadidos-cambios">Pruebas locales de nuevos a&amp;ntilde;adidos/cambios:</a></li>
+                                    
+                                        <li><a href="./mejoras.html#subidas-en-el-repositorio">Subidas en el repositorio</a></li>
+                                    
+                                        <li><a href="./mejoras.html#generar-la-documentacioacuten">Generar la documentaci&amp;oacute;n</a></li>
+                                    
                                 </ol>
                             
                         </li>
@@ -85,15 +101,27 @@
                             
                                 <ol>
                                     
+                                        <li><a href="./components.html#componentes-disponibles">Componentes disponibles</a></li>
+                                    
                                         <li><a href="./buttons.html#buttons">Buttons</a></li>
                                     
                                         <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
                                     
+                                        <li><a href="./inputs.html#inputs">Inputs</a></li>
+                                    
+                                        <li><a href="./navs.html#navs">Navs</a></li>
+                                    
+                                        <li><a href="./list-grids.html#list-grid">List Grid</a></li>
+                                    
                                         <li><a href="./arrows.html#arrows">Arrows</a></li>
                                     
+                                        <li><a href="./pagination.html#pagination">Pagination</a></li>
+                                    
                                         <li><a href="./bubbles.html#bubbles">Bubbles</a></li>
                                     
-                                        <li><a href="./ie.html#internet-explorer">Internet Explorer</a></li>
+                                        <li><a href="./popups.html#popups">Popups</a></li>
+                                    
+                                        <li><a href="./accordions.html#accordions">Accordions</a></li>
                                     
                                 </ol>
                             
@@ -106,6 +134,10 @@
                                     
                                         <li><a href="./utils.html#clearfix">Clearfix</a></li>
                                     
+                                        <li><a href="./utils.html#ie">IE</a></li>
+                                    
+                                        <li><a href="./utils.html#sprite">Sprite</a></li>
+                                    
                                 </ol>
                             
                         </li>
@@ -131,6 +163,46 @@
 
     <article>
     <a name="changelog"></a><h1>Changelog</h1>
+<a name="010"></a><h2>0.1.0</h2>
+<ul>
+<li>Agregados nuevos componentes:</li>
+<li><ul>
+<li>Popups</li>
+</ul>
+</li>
+<li><ul>
+<li>Pagination</li>
+</ul>
+</li>
+<li><ul>
+<li>Navs</li>
+</ul>
+</li>
+<li><ul>
+<li>List Grids</li>
+</ul>
+</li>
+<li><ul>
+<li>Inputs</li>
+</ul>
+</li>
+<li><ul>
+<li>Accordions</li>
+</ul>
+</li>
+<li>Agregadas nuevas utilidades:</li>
+<li><ul>
+<li>Sprite: <code>insert-in-sprite()</code></li>
+</ul>
+</li>
+<li><ul>
+<li>IE: <code>after()</code> / <code>before()</code></li>
+</ul>
+</li>
+<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>
+<li>Se elimina el soporte para CSS3 Pie, siendo reemplazado por fallback de sprites.</li>
+<li>Reorganizaci&ooacute;n interna de la documentaci&ooacute;n.</li>
+</ul>
 <a name="003"></a><h2>0.0.3</h2>
 <ul>
 <li>Agregados estilos de fallback para Internet Explorer.</li>

data/docs/components.html

@@ -52,6 +52,8 @@
                             
                                 <ol>
                                     
+                                        <li><a href="./changelog.html#010">0.1.0</a></li>
+                                    
                                         <li><a href="./changelog.html#003">0.0.3</a></li>
                                     
                                         <li><a href="./changelog.html#002">0.0.2</a></li>
@@ -67,15 +69,29 @@
                             
                                 <ol>
                                     
+                                        <li><a href="./todo.html#componentes">Componentes</a></li>
+                                    
+                                        <li><a href="./todo.html#utilidades">Utilidades</a></li>
+                                    
+                                        <li><a href="./todo.html#otros">Otros</a></li>
+                                    
                                 </ol>
                             
                         </li>
                     
                         <li>
-                            <a href="./docs.html#generar-la-documentacioacuten">Generar la documentaci&amp;oacute;n</a>
+                            <a href="./mejoras.html#mejoras-antildeadidos">Mejoras / A&amp;ntilde;adidos</a>
                             
                                 <ol>
                                     
+                                        <li><a href="./mejoras.html#utilizar-el-coacutedigo-fuente">Utilizar el c&amp;oacute;digo fuente</a></li>
+                                    
+                                        <li><a href="./mejoras.html#pruebas-locales-de-nuevos-antildeadidos-cambios">Pruebas locales de nuevos a&amp;ntilde;adidos/cambios:</a></li>
+                                    
+                                        <li><a href="./mejoras.html#subidas-en-el-repositorio">Subidas en el repositorio</a></li>
+                                    
+                                        <li><a href="./mejoras.html#generar-la-documentacioacuten">Generar la documentaci&amp;oacute;n</a></li>
+                                    
                                 </ol>
                             
                         </li>
@@ -85,15 +101,27 @@
                             
                                 <ol>
                                     
+                                        <li><a href="./components.html#componentes-disponibles">Componentes disponibles</a></li>
+                                    
                                         <li><a href="./buttons.html#buttons">Buttons</a></li>
                                     
                                         <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
                                     
+                                        <li><a href="./inputs.html#inputs">Inputs</a></li>
+                                    
+                                        <li><a href="./navs.html#navs">Navs</a></li>
+                                    
+                                        <li><a href="./list-grids.html#list-grid">List Grid</a></li>
+                                    
                                         <li><a href="./arrows.html#arrows">Arrows</a></li>
                                     
+                                        <li><a href="./pagination.html#pagination">Pagination</a></li>
+                                    
                                         <li><a href="./bubbles.html#bubbles">Bubbles</a></li>
                                     
-                                        <li><a href="./ie.html#internet-explorer">Internet Explorer</a></li>
+                                        <li><a href="./popups.html#popups">Popups</a></li>
+                                    
+                                        <li><a href="./accordions.html#accordions">Accordions</a></li>
                                     
                                 </ol>
                             
@@ -106,6 +134,10 @@
                                     
                                         <li><a href="./utils.html#clearfix">Clearfix</a></li>
                                     
+                                        <li><a href="./utils.html#ie">IE</a></li>
+                                    
+                                        <li><a href="./utils.html#sprite">Sprite</a></li>
+                                    
                                 </ol>
                             
                         </li>
@@ -132,6 +164,37 @@
     <article>
     <hr>
 <a name="components"></a><h1>Components</h1>
+<p>Representan a elementos comunes/patrones utilizados a lo largo del sitio. Estan pensandos para ser flexibles y configurables para ser implementados en distintas situaciones. 
+
+</p>
+<p>La gran mayor&iacute;a de los componentes hacen uso intensivo de estilos CSS3 y ofrecen estrateg&iacute;as alternativas (<a href="https://encrypted.google.com/search?hl=en&amp;q=fallback%20definition">fallback</a>) para navegadores que no soportan dichos estilos (Internet Explorer &lt;= 9).
+
+</p>
+<p>Para tener compatibilidad con Internet Explorer, el &uacute;nico requisito es que la p&aacute;gina que carga los estilos generados por Picasso posean la <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">t&eacute;cnica de clases condicionales en la etiqueta html</a>:
+
+</p>
+<pre><code class="lang-html">&lt;!DOCTYPE html&gt;
+&lt;!--[if IE 7]&gt; &lt;html class=&quot;ie7&quot;&gt; &lt;![endif]--&gt;
+&lt;!--[if IE 8]&gt; &lt;html class=&quot;ie8&quot;&gt; &lt;![endif]--&gt;
+&lt;!--[if IE 9]&gt; &lt;html class=&quot;ie9&quot;&gt; &lt;![endif]--&gt;
+&lt;!--[if gt IE 9]&gt;&lt;!--&gt; &lt;html&gt; &lt;!--&lt;![endif]--&gt;</code></pre>
+<a name="estrategias-y-estilos-de-fallback-para-ie-en-componentes"></a><h3>Estrategias y estilos de fallback para IE en componentes</h3>
+<p>Para ciertos componentes, Picasso ofrece dos estrategias para aplicar estilos de fallback. Dichas estrateg&iacute;as se setean en variables individuales de cada componente, por ejemplo:
+
+</p>
+<pre><code class="lang-css">$&lt;componente&gt;-ie-fallback: &quot;sprites&quot;|&quot;GD&quot;</code></pre>
+<p>Los valores admitidos son <code>sprites</code> y <code>GD</code> (Graceful Degradation).
+
+</p>
+<a name="estrategiacutea-de-sprites"></a><h4>Estrateg&iacute;a de sprites</h4>
+<p>Por cada componente, Picasso generar&aacute; dinamicamente un sprite para recrear los estilos de cada elemento y setear&aacute; los estilos para que Internet Explorer utilice el sprite generado.
+
+</p>
+<a name="estrategiacutea-gd"></a><h4>Estrateg&iacute;a GD</h4>
+<p>Por cada componente, Picasso setear&aacute; estilos minimos, soportados por Internet Explorer, para que el componente siga siendo usable y funcional.
+
+</p>
+<a name="componentes-disponibles"></a><h2>Componentes disponibles</h2>
 
 </article>
 

data/docs/config.rb

@@ -1,6 +1,14 @@
-css_dir           = "css"
-sass_dir          = "sass"
-sass_options      = { :cache => false }
-line_comments     = false
-output_style      = :expanded
-add_import_path "../stylesheets"
+# Dependencias
+require 'magick'
+
+css_dir           = "css"
+sass_dir          = "sass"
+sass_options      = { :cache => false }
+line_comments     = false
+output_style      = :expanded
+add_import_path "../stylesheets"
+
+#Utilizar URLs relativas
+relative_assets   = true
+#Directorio Images relativo al config.rb
+images_dir        = "img"

data/docs/css/markdown.css

@@ -45,6 +45,14 @@ h4{ font-size:1.2em; }
 h5{ font-size:1em; }
 h6{ font-size:0.9em; }
 
+h1{
+  padding: 40px 0 0 0;
+}
+
+h1:first-child{
+  padding: 0;
+}
+
 blockquote{
 color:#666666;
 margin:0;

data/docs/css/style.css

@@ -12,7 +12,6 @@
   background: -webkit-linear-gradient(#ff0000 30%, #660000);
   background: -moz-linear-gradient(#ff0000 30%, #660000);
   background: -o-linear-gradient(#ff0000 30%, #660000);
-  background: -ms-linear-gradient(#ff0000 30%, #660000);
   background: linear-gradient(#ff0000 30%, #660000);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
@@ -59,7 +58,6 @@
   background: -webkit-linear-gradient(#ffcccc 20%, #4d0000);
   background: -moz-linear-gradient(#ffcccc 20%, #4d0000);
   background: -o-linear-gradient(#ffcccc 20%, #4d0000);
-  background: -ms-linear-gradient(#ffcccc 20%, #4d0000);
   background: linear-gradient(#ffcccc 20%, #4d0000);
 }
 .button-demo-1:before {
@@ -67,7 +65,6 @@
   background: -webkit-linear-gradient(#ff0000 30%, #660000);
   background: -moz-linear-gradient(#ff0000 30%, #660000);
   background: -o-linear-gradient(#ff0000 30%, #660000);
-  background: -ms-linear-gradient(#ff0000 30%, #660000);
   background: linear-gradient(#ff0000 30%, #660000);
 }
 .button-demo-1:hover {
@@ -75,7 +72,6 @@
   background: -webkit-linear-gradient(#ff0000 30%, #ff0505);
   background: -moz-linear-gradient(#ff0000 30%, #ff0505);
   background: -o-linear-gradient(#ff0000 30%, #ff0505);
-  background: -ms-linear-gradient(#ff0000 30%, #ff0505);
   background: linear-gradient(#ff0000 30%, #ff0505);
 }
 .button-demo-1:hover:before {
@@ -83,11 +79,14 @@
   background: -webkit-linear-gradient(#ff0000 30%, #ff0505);
   background: -moz-linear-gradient(#ff0000 30%, #ff0505);
   background: -o-linear-gradient(#ff0000 30%, #ff0505);
-  background: -ms-linear-gradient(#ff0000 30%, #ff0505);
   background: linear-gradient(#ff0000 30%, #ff0505);
 }
-.ie9 .button-demo-1, .ie8 .button-demo-1, .ie7 .button-demo-1 {
-  background-color: red;
+.ie7 .button-demo-1, .ie8 .button-demo-1, .ie9 .button-demo-1 {
+  background: url('../img/picasso-buttons.png');
+  background-position: 0 -1px;
+}
+.ie7 .button-demo-1:hover, .ie8 .button-demo-1:hover, .ie9 .button-demo-1:hover {
+  background-position: 0 -31px;
 }
 
 .button-demo-2 {
@@ -104,7 +103,6 @@
   background: -webkit-linear-gradient(#0088cc 30%, #002233);
   background: -moz-linear-gradient(#0088cc 30%, #002233);
   background: -o-linear-gradient(#0088cc 30%, #002233);
-  background: -ms-linear-gradient(#0088cc 30%, #002233);
   background: linear-gradient(#0088cc 30%, #002233);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
@@ -151,7 +149,6 @@
   background: -webkit-linear-gradient(#99ddff 20%, #00111a);
   background: -moz-linear-gradient(#99ddff 20%, #00111a);
   background: -o-linear-gradient(#99ddff 20%, #00111a);
-  background: -ms-linear-gradient(#99ddff 20%, #00111a);
   background: linear-gradient(#99ddff 20%, #00111a);
 }
 .button-demo-2:before {
@@ -159,7 +156,6 @@
   background: -webkit-linear-gradient(#0088cc 30%, #002233);
   background: -moz-linear-gradient(#0088cc 30%, #002233);
   background: -o-linear-gradient(#0088cc 30%, #002233);
-  background: -ms-linear-gradient(#0088cc 30%, #002233);
   background: linear-gradient(#0088cc 30%, #002233);
 }
 .button-demo-2:hover {
@@ -167,7 +163,6 @@
   background: -webkit-linear-gradient(#0088cc 30%, #008bd1);
   background: -moz-linear-gradient(#0088cc 30%, #008bd1);
   background: -o-linear-gradient(#0088cc 30%, #008bd1);
-  background: -ms-linear-gradient(#0088cc 30%, #008bd1);
   background: linear-gradient(#0088cc 30%, #008bd1);
 }
 .button-demo-2:hover:before {
@@ -175,11 +170,14 @@
   background: -webkit-linear-gradient(#0088cc 30%, #008bd1);
   background: -moz-linear-gradient(#0088cc 30%, #008bd1);
   background: -o-linear-gradient(#0088cc 30%, #008bd1);
-  background: -ms-linear-gradient(#0088cc 30%, #008bd1);
   background: linear-gradient(#0088cc 30%, #008bd1);
 }
-.ie9 .button-demo-2, .ie8 .button-demo-2, .ie7 .button-demo-2 {
-  background-color: #0088cc;
+.ie7 .button-demo-2, .ie8 .button-demo-2, .ie9 .button-demo-2 {
+  background: url('../img/picasso-buttons.png');
+  background-position: 0 -61px;
+}
+.ie7 .button-demo-2:hover, .ie8 .button-demo-2:hover, .ie9 .button-demo-2:hover {
+  background-position: 0 -91px;
 }
 
 .button-demo-3 {
@@ -196,7 +194,6 @@
   background: -webkit-linear-gradient(#fbb450 30%, #ae6704);
   background: -moz-linear-gradient(#fbb450 30%, #ae6704);
   background: -o-linear-gradient(#fbb450 30%, #ae6704);
-  background: -ms-linear-gradient(#fbb450 30%, #ae6704);
   background: linear-gradient(#fbb450 30%, #ae6704);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
@@ -243,7 +240,6 @@
   background: -webkit-linear-gradient(#ffffff 20%, #955903);
   background: -moz-linear-gradient(#ffffff 20%, #955903);
   background: -o-linear-gradient(#ffffff 20%, #955903);
-  background: -ms-linear-gradient(#ffffff 20%, #955903);
   background: linear-gradient(#ffffff 20%, #955903);
 }
 .button-demo-3:before {
@@ -251,7 +247,6 @@
   background: -webkit-linear-gradient(#fbb450 30%, #ae6704);
   background: -moz-linear-gradient(#fbb450 30%, #ae6704);
   background: -o-linear-gradient(#fbb450 30%, #ae6704);
-  background: -ms-linear-gradient(#fbb450 30%, #ae6704);
   background: linear-gradient(#fbb450 30%, #ae6704);
 }
 .button-demo-3:hover {
@@ -259,7 +254,6 @@
   background: -webkit-linear-gradient(#fbb450 30%, #fbb655);
   background: -moz-linear-gradient(#fbb450 30%, #fbb655);
   background: -o-linear-gradient(#fbb450 30%, #fbb655);
-  background: -ms-linear-gradient(#fbb450 30%, #fbb655);
   background: linear-gradient(#fbb450 30%, #fbb655);
 }
 .button-demo-3:hover:before {
@@ -267,11 +261,14 @@
   background: -webkit-linear-gradient(#fbb450 30%, #fbb655);
   background: -moz-linear-gradient(#fbb450 30%, #fbb655);
   background: -o-linear-gradient(#fbb450 30%, #fbb655);
-  background: -ms-linear-gradient(#fbb450 30%, #fbb655);
   background: linear-gradient(#fbb450 30%, #fbb655);
 }
-.ie9 .button-demo-3, .ie8 .button-demo-3, .ie7 .button-demo-3 {
-  background-color: #fbb450;
+.ie7 .button-demo-3, .ie8 .button-demo-3, .ie9 .button-demo-3 {
+  background: url('../img/picasso-buttons.png');
+  background-position: 0 -121px;
+}
+.ie7 .button-demo-3:hover, .ie8 .button-demo-3:hover, .ie9 .button-demo-3:hover {
+  background-position: 0 -151px;
 }
 
 .button-demo-4 {
@@ -288,7 +285,6 @@
   background: -webkit-linear-gradient(#62c462 30%, #276627);
   background: -moz-linear-gradient(#62c462 30%, #276627);
   background: -o-linear-gradient(#62c462 30%, #276627);
-  background: -ms-linear-gradient(#62c462 30%, #276627);
   background: linear-gradient(#62c462 30%, #276627);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
@@ -335,7 +331,6 @@
   background: -webkit-linear-gradient(#f6fcf6 20%, #205420);
   background: -moz-linear-gradient(#f6fcf6 20%, #205420);
   background: -o-linear-gradient(#f6fcf6 20%, #205420);
-  background: -ms-linear-gradient(#f6fcf6 20%, #205420);
   background: linear-gradient(#f6fcf6 20%, #205420);
 }
 .button-demo-4:before {
@@ -343,7 +338,6 @@
   background: -webkit-linear-gradient(#62c462 30%, #276627);
   background: -moz-linear-gradient(#62c462 30%, #276627);
   background: -o-linear-gradient(#62c462 30%, #276627);
-  background: -ms-linear-gradient(#62c462 30%, #276627);
   background: linear-gradient(#62c462 30%, #276627);
 }
 .button-demo-4:hover {
@@ -351,7 +345,6 @@
   background: -webkit-linear-gradient(#62c462 30%, #66c566);
   background: -moz-linear-gradient(#62c462 30%, #66c566);
   background: -o-linear-gradient(#62c462 30%, #66c566);
-  background: -ms-linear-gradient(#62c462 30%, #66c566);
   background: linear-gradient(#62c462 30%, #66c566);
 }
 .button-demo-4:hover:before {
@@ -359,25 +352,28 @@
   background: -webkit-linear-gradient(#62c462 30%, #66c566);
   background: -moz-linear-gradient(#62c462 30%, #66c566);
   background: -o-linear-gradient(#62c462 30%, #66c566);
-  background: -ms-linear-gradient(#62c462 30%, #66c566);
   background: linear-gradient(#62c462 30%, #66c566);
 }
-.ie9 .button-demo-4, .ie8 .button-demo-4, .ie7 .button-demo-4 {
-  background-color: #62c462;
+.ie7 .button-demo-4, .ie8 .button-demo-4, .ie9 .button-demo-4 {
+  background: url('../img/picasso-buttons.png');
+  background-position: 0 -181px;
+}
+.ie7 .button-demo-4:hover, .ie8 .button-demo-4:hover, .ie9 .button-demo-4:hover {
+  background-position: 0 -211px;
 }
 
 .mini-button-demo-1 {
   display: inline-block;
   height: 20px;
-  padding-right: 20px;
+  padding-right: 10px;
+  padding-right: 10px;
   font-family: sans-serif;
   text-decoration: none;
-  text-align: center;
+  cursor: pointer;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f0f0f0), color-stop(50%, #e3e3e3), color-stop(51%, #d6d6d6), color-stop(100%, #cacaca));
   background: -webkit-linear-gradient(top, #f0f0f0 0%, #e3e3e3 50%, #d6d6d6 51%, #cacaca 100%);
   background: -moz-linear-gradient(top, #f0f0f0 0%, #e3e3e3 50%, #d6d6d6 51%, #cacaca 100%);
   background: -o-linear-gradient(top, #f0f0f0 0%, #e3e3e3 50%, #d6d6d6 51%, #cacaca 100%);
-  background: -ms-linear-gradient(top, #f0f0f0 0%, #e3e3e3 50%, #d6d6d6 51%, #cacaca 100%);
   background: linear-gradient(top, #f0f0f0 0%, #e3e3e3 50%, #d6d6d6 51%, #cacaca 100%);
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
@@ -390,8 +386,8 @@
 }
 .mini-button-demo-1 span {
   height: 20px;
-  padding: 0 0 0 20px;
   line-height: 20px;
+  padding-left: 10px;
 }
 .mini-button-demo-1:hover {
   background: #e3e3e3;
@@ -407,22 +403,34 @@
   display: block;
   font-size: 11px;
 }
-.ie9 .mini-button-demo-1, .ie8 .mini-button-demo-1, .ie7 .mini-button-demo-1 {
-  background-color: #f0f0f0;
+.ie7 .mini-button-demo-1, .ie8 .mini-button-demo-1, .ie9 .mini-button-demo-1 {
+  background: url('../img/picasso-mini-buttons.png');
+  background-position: right -1px;
+}
+.ie7 .mini-button-demo-1:hover, .ie8 .mini-button-demo-1:hover, .ie9 .mini-button-demo-1:hover {
+  background-position: right -21px;
+}
+.ie7 .mini-button-demo-1 span, .ie8 .mini-button-demo-1 span, .ie9 .mini-button-demo-1 span {
+  background-image: url('../img/picasso-mini-buttons.png');
+  background-color: white;
+  background-position: 0 -1px;
+}
+.ie7 .mini-button-demo-1 span:hover, .ie8 .mini-button-demo-1 span:hover, .ie9 .mini-button-demo-1 span:hover {
+  background-position: 0 -21px;
 }
 
 .mini-button-demo-2 {
   display: inline-block;
   height: 20px;
-  padding-right: 20px;
+  padding-right: 10px;
+  padding-right: 10px;
   font-family: sans-serif;
   text-decoration: none;
-  text-align: center;
+  cursor: pointer;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(50%, #0077b3), color-stop(51%, #006699), color-stop(100%, #005580));
   background: -webkit-linear-gradient(top, #0088cc 0%, #0077b3 50%, #006699 51%, #005580 100%);
   background: -moz-linear-gradient(top, #0088cc 0%, #0077b3 50%, #006699 51%, #005580 100%);
   background: -o-linear-gradient(top, #0088cc 0%, #0077b3 50%, #006699 51%, #005580 100%);
-  background: -ms-linear-gradient(top, #0088cc 0%, #0077b3 50%, #006699 51%, #005580 100%);
   background: linear-gradient(top, #0088cc 0%, #0077b3 50%, #006699 51%, #005580 100%);
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
@@ -435,8 +443,8 @@
 }
 .mini-button-demo-2 span {
   height: 20px;
-  padding: 0 0 0 20px;
   line-height: 20px;
+  padding-left: 10px;
 }
 .mini-button-demo-2:hover {
   background: #0077b3;
@@ -452,22 +460,34 @@
   display: block;
   font-size: 11px;
 }
-.ie9 .mini-button-demo-2, .ie8 .mini-button-demo-2, .ie7 .mini-button-demo-2 {
-  background-color: #0088cc;
+.ie7 .mini-button-demo-2, .ie8 .mini-button-demo-2, .ie9 .mini-button-demo-2 {
+  background: url('../img/picasso-mini-buttons.png');
+  background-position: right -41px;
+}
+.ie7 .mini-button-demo-2:hover, .ie8 .mini-button-demo-2:hover, .ie9 .mini-button-demo-2:hover {
+  background-position: right -61px;
+}
+.ie7 .mini-button-demo-2 span, .ie8 .mini-button-demo-2 span, .ie9 .mini-button-demo-2 span {
+  background-image: url('../img/picasso-mini-buttons.png');
+  background-color: white;
+  background-position: 0 -41px;
+}
+.ie7 .mini-button-demo-2 span:hover, .ie8 .mini-button-demo-2 span:hover, .ie9 .mini-button-demo-2 span:hover {
+  background-position: 0 -61px;
 }
 
 .mini-button-demo-3 {
   display: inline-block;
   height: 20px;
-  padding-right: 20px;
+  padding-right: 10px;
+  padding-right: 10px;
   font-family: sans-serif;
   text-decoration: none;
-  text-align: center;
+  cursor: pointer;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #da4f49), color-stop(50%, #d63b34), color-stop(51%, #c72f29), color-stop(100%, #b22a24));
   background: -webkit-linear-gradient(top, #da4f49 0%, #d63b34 50%, #c72f29 51%, #b22a24 100%);
   background: -moz-linear-gradient(top, #da4f49 0%, #d63b34 50%, #c72f29 51%, #b22a24 100%);
   background: -o-linear-gradient(top, #da4f49 0%, #d63b34 50%, #c72f29 51%, #b22a24 100%);
-  background: -ms-linear-gradient(top, #da4f49 0%, #d63b34 50%, #c72f29 51%, #b22a24 100%);
   background: linear-gradient(top, #da4f49 0%, #d63b34 50%, #c72f29 51%, #b22a24 100%);
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
@@ -480,8 +500,8 @@
 }
 .mini-button-demo-3 span {
   height: 20px;
-  padding: 0 0 0 20px;
   line-height: 20px;
+  padding-left: 10px;
 }
 .mini-button-demo-3:hover {
   background: #d63b34;
@@ -497,22 +517,34 @@
   display: block;
   font-size: 11px;
 }
-.ie9 .mini-button-demo-3, .ie8 .mini-button-demo-3, .ie7 .mini-button-demo-3 {
-  background-color: #da4f49;
+.ie7 .mini-button-demo-3, .ie8 .mini-button-demo-3, .ie9 .mini-button-demo-3 {
+  background: url('../img/picasso-mini-buttons.png');
+  background-position: right -81px;
+}
+.ie7 .mini-button-demo-3:hover, .ie8 .mini-button-demo-3:hover, .ie9 .mini-button-demo-3:hover {
+  background-position: right -101px;
+}
+.ie7 .mini-button-demo-3 span, .ie8 .mini-button-demo-3 span, .ie9 .mini-button-demo-3 span {
+  background-image: url('../img/picasso-mini-buttons.png');
+  background-color: white;
+  background-position: 0 -81px;
+}
+.ie7 .mini-button-demo-3 span:hover, .ie8 .mini-button-demo-3 span:hover, .ie9 .mini-button-demo-3 span:hover {
+  background-position: 0 -101px;
 }
 
 .mini-button-demo-4 {
   display: inline-block;
   height: 20px;
-  padding-right: 20px;
+  padding-right: 10px;
+  padding-right: 10px;
   font-family: sans-serif;
   text-decoration: none;
-  text-align: center;
+  cursor: pointer;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #414141), color-stop(50%, #343434), color-stop(51%, #272727), color-stop(100%, #1b1b1b));
   background: -webkit-linear-gradient(top, #414141 0%, #343434 50%, #272727 51%, #1b1b1b 100%);
   background: -moz-linear-gradient(top, #414141 0%, #343434 50%, #272727 51%, #1b1b1b 100%);
   background: -o-linear-gradient(top, #414141 0%, #343434 50%, #272727 51%, #1b1b1b 100%);
-  background: -ms-linear-gradient(top, #414141 0%, #343434 50%, #272727 51%, #1b1b1b 100%);
   background: linear-gradient(top, #414141 0%, #343434 50%, #272727 51%, #1b1b1b 100%);
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
@@ -525,8 +557,8 @@
 }
 .mini-button-demo-4 span {
   height: 20px;
-  padding: 0 0 0 20px;
   line-height: 20px;
+  padding-left: 10px;
 }
 .mini-button-demo-4:hover {
   background: #343434;
@@ -542,8 +574,690 @@
   display: block;
   font-size: 11px;
 }
-.ie9 .mini-button-demo-4, .ie8 .mini-button-demo-4, .ie7 .mini-button-demo-4 {
-  background-color: #414141;
+.ie7 .mini-button-demo-4, .ie8 .mini-button-demo-4, .ie9 .mini-button-demo-4 {
+  background: url('../img/picasso-mini-buttons.png');
+  background-position: right -121px;
+}
+.ie7 .mini-button-demo-4:hover, .ie8 .mini-button-demo-4:hover, .ie9 .mini-button-demo-4:hover {
+  background-position: right -141px;
+}
+.ie7 .mini-button-demo-4 span, .ie8 .mini-button-demo-4 span, .ie9 .mini-button-demo-4 span {
+  background-image: url('../img/picasso-mini-buttons.png');
+  background-color: white;
+  background-position: 0 -121px;
+}
+.ie7 .mini-button-demo-4 span:hover, .ie8 .mini-button-demo-4 span:hover, .ie9 .mini-button-demo-4 span:hover {
+  background-position: 0 -141px;
+}
+
+.text-input-demo-1 {
+  width: 200px;
+  height: 20px;
+  line-height: 20px;
+  padding: 1px;
+  border: 1px solid #dddddd;
+  border-top: 1px solid #919191;
+  color: #333333;
+  font-size: 11px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  -moz-border-radius: 3px 3px 3px 3px;
+  -ms-border-radius: 3px 3px 3px 3px;
+  -o-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+}
+.text-input-demo-1:focus {
+  outline: 0;
+  border: 1px solid #319fda;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+}
+
+.text-input-demo-2 {
+  width: 120px;
+  height: 20px;
+  line-height: 20px;
+  padding: 1px;
+  border: 1px solid red;
+  border-top: 1px solid #660000;
+  color: #333333;
+  font-size: 11px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -o-border-radius: 10px;
+  border-radius: 10px;
+  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+}
+.text-input-demo-2:focus {
+  outline: 0;
+  border: 1px solid green;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+}
+
+.text-input-demo-3 {
+  width: 200px;
+  height: 40px;
+  line-height: 40px;
+  padding: 1px;
+  border: 1px solid #dddddd;
+  border-top: 1px solid #919191;
+  color: blue;
+  font-size: 25px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+}
+.text-input-demo-3:focus {
+  outline: 0;
+  border: 1px solid blue;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+}
+
+.select-demo-1 {
+  width: 200px;
+  height: 20px;
+  line-height: 20px;
+  padding: 1px;
+  border: 1px solid #dddddd;
+  border-top: 1px solid #919191;
+  color: #333333;
+  font-size: 11px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  -moz-border-radius: 3px 3px 3px 3px;
+  -ms-border-radius: 3px 3px 3px 3px;
+  -o-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+}
+.select-demo-1:focus {
+  outline: 0;
+  border: 1px solid #319fda;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+}
+
+.select-demo-2 {
+  width: 120px;
+  height: 20px;
+  line-height: 20px;
+  padding: 1px;
+  border: 1px solid red;
+  border-top: 1px solid #660000;
+  color: #333333;
+  font-size: 11px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -o-border-radius: 10px;
+  border-radius: 10px;
+  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+}
+.select-demo-2:focus {
+  outline: 0;
+  border: 1px solid green;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+}
+
+.select-demo-3 {
+  width: 200px;
+  height: 40px;
+  line-height: 40px;
+  padding: 1px;
+  border: 1px solid #dddddd;
+  border-top: 1px solid #919191;
+  color: blue;
+  font-size: 25px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+}
+.select-demo-3:focus {
+  outline: 0;
+  border: 1px solid blue;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
+}
+
+.nav-demo-1:before, .nav-demo-1:after {
+  content: "";
+  display: table;
+}
+.nav-demo-1:after {
+  clear: both;
+}
+.ie6 .nav-demo-1, .ie7 .nav-demo-1 {
+  zoom: 1;
+}
+.nav-demo-1 ul {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  float: left;
+}
+.nav-demo-1 ul:before, .nav-demo-1 ul:after {
+  content: "";
+  display: table;
+}
+.nav-demo-1 ul:after {
+  clear: both;
+}
+.ie6 .nav-demo-1 ul, .ie7 .nav-demo-1 ul {
+  zoom: 1;
+}
+.nav-demo-1 ul li {
+  display: inline-block;
+  height: 40px;
+  line-height: 40px;
+  float: left;
+}
+.nav-demo-1 ul li a {
+  display: block;
+  padding: 0 15px;
+}
+.ie7 .nav-demo-1 ul li, .ie8 .nav-demo-1 ul li, .ie9 .nav-demo-1 ul li {
+  height: 46px;
+}
+.nav-demo-1 ul {
+  list-style: none;
+  -webkit-box-shadow: 0 6px 6px -6px black;
+  -moz-box-shadow: 0 6px 6px -6px black;
+  box-shadow: 0 6px 6px -6px black;
+}
+.nav-demo-1 ul li {
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6));
+  background-image: -webkit-linear-gradient(#ffffff, #e6e6e6);
+  background-image: -moz-linear-gradient(#ffffff, #e6e6e6);
+  background-image: -o-linear-gradient(#ffffff, #e6e6e6);
+  background-image: linear-gradient(#ffffff, #e6e6e6);
+  border-left: 1px solid #acacac;
+  border-top: 1px solid #acacac;
+  border-bottom: 1px solid #acacac;
+}
+.nav-demo-1 ul li:hover {
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
+  background-image: -webkit-linear-gradient(#ffffff, #f2f2f2);
+  background-image: -moz-linear-gradient(#ffffff, #f2f2f2);
+  background-image: -o-linear-gradient(#ffffff, #f2f2f2);
+  background-image: linear-gradient(#ffffff, #f2f2f2);
+}
+.nav-demo-1 ul li:first-child {
+  -moz-border-radius-topleft: 5px;
+  -webkit-border-top-left-radius: 5px;
+  border-top-left-radius: 5px;
+  -moz-border-radius-bottomleft: 5px;
+  -webkit-border-bottom-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+.nav-demo-1 ul li:last-child {
+  -moz-border-radius-topright: 5px;
+  -webkit-border-top-right-radius: 5px;
+  border-top-right-radius: 5px;
+  -moz-border-radius-bottomright: 5px;
+  -webkit-border-bottom-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  border-right: 1px solid #acacac;
+}
+.nav-demo-1 ul li a {
+  font-size: 16px;
+  font-family: sans-serif;
+}
+.nav-demo-1 ul .active {
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #ffffff));
+  background-image: -webkit-linear-gradient(#e6e6e6, #ffffff);
+  background-image: -moz-linear-gradient(#e6e6e6, #ffffff);
+  background-image: -o-linear-gradient(#e6e6e6, #ffffff);
+  background-image: linear-gradient(#e6e6e6, #ffffff);
+}
+.ie7 .nav-demo-1 ul li, .ie8 .nav-demo-1 ul li, .ie9 .nav-demo-1 ul li {
+  border-left: none;
+  border-top: none;
+  border-bottom: none;
+  background: transparent url('../img/picasso-nav.png') no-repeat center -1px;
+}
+.ie7 .nav-demo-1 ul li a, .ie8 .nav-demo-1 ul li a, .ie9 .nav-demo-1 ul li a {
+  border-left: 1px solid #acacac;
+}
+.ie7 .nav-demo-1 ul li:hover, .ie8 .nav-demo-1 ul li:hover, .ie9 .nav-demo-1 ul li:hover {
+  background: transparent url('../img/picasso-nav.png') center -47px no-repeat;
+}
+.ie7 .nav-demo-1 ul li:first-child, .ie8 .nav-demo-1 ul li:first-child, .ie9 .nav-demo-1 ul li:first-child {
+  background: transparent url('../img/picasso-nav.png') no-repeat left -1px;
+}
+.ie7 .nav-demo-1 ul li:first-child a, .ie8 .nav-demo-1 ul li:first-child a, .ie9 .nav-demo-1 ul li:first-child a {
+  border-left: none;
+}
+.ie7 .nav-demo-1 ul li:first-child:hover, .ie8 .nav-demo-1 ul li:first-child:hover, .ie9 .nav-demo-1 ul li:first-child:hover {
+  background: transparent url('../img/picasso-nav.png') left -47px no-repeat;
+}
+.ie7 .nav-demo-1 ul li:first-child.active, .ie8 .nav-demo-1 ul li:first-child.active, .ie9 .nav-demo-1 ul li:first-child.active {
+  background: transparent url('../img/picasso-nav.png') no-repeat left -47px;
+}
+.ie7 .nav-demo-1 ul .last, .ie8 .nav-demo-1 ul .last, .ie9 .nav-demo-1 ul .last {
+  background: transparent url('../img/picasso-nav.png') no-repeat right -47px;
+}
+.ie7 .nav-demo-1 ul .last:hover, .ie8 .nav-demo-1 ul .last:hover, .ie9 .nav-demo-1 ul .last:hover {
+  background: transparent url('../img/picasso-nav.png') right -47px no-repeat;
+}
+.ie7 .nav-demo-1 ul .active, .ie8 .nav-demo-1 ul .active, .ie9 .nav-demo-1 ul .active {
+  background: transparent url('../img/picasso-nav.png') no-repeat center -47px;
+}
+.ie7 .nav-demo-1 ul .last.active, .ie8 .nav-demo-1 ul .last.active, .ie9 .nav-demo-1 ul .last.active {
+  background: transparent url('../img/picasso-nav.png') no-repeat right -47px;
+}
+
+.nav-demo-2:before, .nav-demo-2:after {
+  content: "";
+  display: table;
+}
+.nav-demo-2:after {
+  clear: both;
+}
+.ie6 .nav-demo-2, .ie7 .nav-demo-2 {
+  zoom: 1;
+}
+.nav-demo-2 ul {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  float: right;
+}
+.nav-demo-2 ul:before, .nav-demo-2 ul:after {
+  content: "";
+  display: table;
+}
+.nav-demo-2 ul:after {
+  clear: both;
+}
+.ie6 .nav-demo-2 ul, .ie7 .nav-demo-2 ul {
+  zoom: 1;
+}
+.nav-demo-2 ul li {
+  display: inline-block;
+  height: 30px;
+  line-height: 30px;
+  float: left;
+}
+.nav-demo-2 ul li a {
+  display: block;
+  padding: 0 15px;
+}
+.ie7 .nav-demo-2 ul li, .ie8 .nav-demo-2 ul li, .ie9 .nav-demo-2 ul li {
+  height: 36px;
+}
+.nav-demo-2 ul {
+  list-style: none;
+  -webkit-box-shadow: 0 6px 6px -6px black;
+  -moz-box-shadow: 0 6px 6px -6px black;
+  box-shadow: 0 6px 6px -6px black;
+}
+.nav-demo-2 ul li {
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1164bf), color-stop(100%, #0d4b90));
+  background-image: -webkit-linear-gradient(#1164bf, #0d4b90);
+  background-image: -moz-linear-gradient(#1164bf, #0d4b90);
+  background-image: -o-linear-gradient(#1164bf, #0d4b90);
+  background-image: linear-gradient(#1164bf, #0d4b90);
+  border-left: 1px solid #083c78;
+  border-top: 1px solid #083c78;
+  border-bottom: 1px solid #083c78;
+}
+.nav-demo-2 ul li:hover {
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1164bf), color-stop(100%, #0f58a8));
+  background-image: -webkit-linear-gradient(#1164bf, #0f58a8);
+  background-image: -moz-linear-gradient(#1164bf, #0f58a8);
+  background-image: -o-linear-gradient(#1164bf, #0f58a8);
+  background-image: linear-gradient(#1164bf, #0f58a8);
+}
+.nav-demo-2 ul li:first-child {
+  -moz-border-radius-topleft: 5px;
+  -webkit-border-top-left-radius: 5px;
+  border-top-left-radius: 5px;
+  -moz-border-radius-bottomleft: 5px;
+  -webkit-border-bottom-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+.nav-demo-2 ul li:last-child {
+  -moz-border-radius-topright: 5px;
+  -webkit-border-top-right-radius: 5px;
+  border-top-right-radius: 5px;
+  -moz-border-radius-bottomright: 5px;
+  -webkit-border-bottom-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  border-right: 1px solid #083c78;
+}
+.nav-demo-2 ul li a {
+  font-size: 16px;
+  font-family: sans-serif;
+}
+.nav-demo-2 ul .active {
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0d4b90), color-stop(100%, #1164bf));
+  background-image: -webkit-linear-gradient(#0d4b90, #1164bf);
+  background-image: -moz-linear-gradient(#0d4b90, #1164bf);
+  background-image: -o-linear-gradient(#0d4b90, #1164bf);
+  background-image: linear-gradient(#0d4b90, #1164bf);
+}
+.ie7 .nav-demo-2 ul li, .ie8 .nav-demo-2 ul li, .ie9 .nav-demo-2 ul li {
+  border-left: none;
+  border-top: none;
+  border-bottom: none;
+  background: transparent url('../img/picasso-nav.png') no-repeat center -139px;
+}
+.ie7 .nav-demo-2 ul li a, .ie8 .nav-demo-2 ul li a, .ie9 .nav-demo-2 ul li a {
+  border-left: 1px solid #083c78;
+}
+.ie7 .nav-demo-2 ul li:hover, .ie8 .nav-demo-2 ul li:hover, .ie9 .nav-demo-2 ul li:hover {
+  background: transparent url('../img/picasso-nav.png') center -175px no-repeat;
+}
+.ie7 .nav-demo-2 ul li:first-child, .ie8 .nav-demo-2 ul li:first-child, .ie9 .nav-demo-2 ul li:first-child {
+  background: transparent url('../img/picasso-nav.png') no-repeat left -139px;
+}
+.ie7 .nav-demo-2 ul li:first-child a, .ie8 .nav-demo-2 ul li:first-child a, .ie9 .nav-demo-2 ul li:first-child a {
+  border-left: none;
+}
+.ie7 .nav-demo-2 ul li:first-child:hover, .ie8 .nav-demo-2 ul li:first-child:hover, .ie9 .nav-demo-2 ul li:first-child:hover {
+  background: transparent url('../img/picasso-nav.png') left -175px no-repeat;
+}
+.ie7 .nav-demo-2 ul li:first-child.active, .ie8 .nav-demo-2 ul li:first-child.active, .ie9 .nav-demo-2 ul li:first-child.active {
+  background: transparent url('../img/picasso-nav.png') no-repeat left -175px;
+}
+.ie7 .nav-demo-2 ul .last, .ie8 .nav-demo-2 ul .last, .ie9 .nav-demo-2 ul .last {
+  background: transparent url('../img/picasso-nav.png') no-repeat right -175px;
+}
+.ie7 .nav-demo-2 ul .last:hover, .ie8 .nav-demo-2 ul .last:hover, .ie9 .nav-demo-2 ul .last:hover {
+  background: transparent url('../img/picasso-nav.png') right -175px no-repeat;
+}
+.ie7 .nav-demo-2 ul .active, .ie8 .nav-demo-2 ul .active, .ie9 .nav-demo-2 ul .active {
+  background: transparent url('../img/picasso-nav.png') no-repeat center -175px;
+}
+.ie7 .nav-demo-2 ul .last.active, .ie8 .nav-demo-2 ul .last.active, .ie9 .nav-demo-2 ul .last.active {
+  background: transparent url('../img/picasso-nav.png') no-repeat right -175px;
+}
+.nav-demo-2 a, .nav-demo-2 a:hover {
+  color: white;
+}
+
+.list-grid-demo-1:before, .list-grid-demo-1:after {
+  content: "";
+  display: table;
+}
+.list-grid-demo-1:after {
+  clear: both;
+}
+.ie6 .list-grid-demo-1, .ie7 .list-grid-demo-1 {
+  zoom: 1;
+}
+.list-grid-demo-1 ul {
+  float: left;
+  padding: 0px;
+  margin: 0px;
+  width: 130px;
+}
+.list-grid-demo-1 ul li {
+  height: 30px;
+  line-height: 30px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.list-grid-demo-1 ul {
+  list-style: none outside none;
+  border-top: 1px solid #cccccc;
+  border-bottom: 1px solid #cccccc;
+  border-right: 1px solid #cccccc;
+}
+.list-grid-demo-1 ul:first-child {
+  border-left: 1px solid #cccccc;
+}
+.list-grid-demo-1 ul li {
+  text-align: center;
+  border: 1px solid transparent;
+}
+.list-grid-demo-1 ul li:first-child {
+  border-bottom: 1px solid #cccccc;
+}
+.list-grid-demo-1 ul li:nth-child(odd) {
+  background: none repeat scroll 0 0 #eeeeee;
+}
+.list-grid-demo-1 ul li:nth-child(even) {
+  background: none repeat scroll 0 0 white;
+}
+.list-grid-demo-1 ul li.hover-cell:hover {
+  border: 1px solid #319fda;
+  background: #f4fafd;
+  cursor: pointer;
+}
+.ie7 .list-grid-demo-1 ul li:first-child, .ie8 .list-grid-demo-1 ul li:first-child {
+  background: none repeat scroll 0 0 #eeeeee;
+}
+.ie7 .list-grid-demo-1 ul li.even, .ie8 .list-grid-demo-1 ul li.even {
+  background: none repeat scroll 0 0 white;
+}
+.ie7 .list-grid-demo-1 ul li.odd, .ie8 .list-grid-demo-1 ul li.odd {
+  background: none repeat scroll 0 0 #eeeeee;
+}
+.list-grid-demo-1 .first-column {
+  width: 100px;
+}
+
+.list-grid-demo-2:before, .list-grid-demo-2:after {
+  content: "";
+  display: table;
+}
+.list-grid-demo-2:after {
+  clear: both;
+}
+.ie6 .list-grid-demo-2, .ie7 .list-grid-demo-2 {
+  zoom: 1;
+}
+.list-grid-demo-2 ul {
+  float: left;
+  padding: 0px;
+  margin: 0px;
+  width: 400px;
+}
+.list-grid-demo-2 ul li {
+  height: 30px;
+  line-height: 30px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.list-grid-demo-2 ul {
+  list-style: none outside none;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  border-right: 1px solid transparent;
+}
+.list-grid-demo-2 ul:first-child {
+  border-left: 1px solid transparent;
+}
+.list-grid-demo-2 ul li {
+  text-align: center;
+  border: 1px solid transparent;
+}
+.list-grid-demo-2 ul li:first-child {
+  border-bottom: 1px solid transparent;
+}
+.list-grid-demo-2 ul li:nth-child(odd) {
+  background: none repeat scroll 0 0 white;
+}
+.list-grid-demo-2 ul li:nth-child(even) {
+  background: none repeat scroll 0 0 white;
+}
+.list-grid-demo-2 ul li.hover-cell:hover {
+  border: 1px solid #319fda;
+  background: #f4fafd;
+  cursor: pointer;
+}
+.ie7 .list-grid-demo-2 ul li:first-child, .ie8 .list-grid-demo-2 ul li:first-child {
+  background: none repeat scroll 0 0 white;
+}
+.ie7 .list-grid-demo-2 ul li.even, .ie8 .list-grid-demo-2 ul li.even {
+  background: none repeat scroll 0 0 white;
+}
+.ie7 .list-grid-demo-2 ul li.odd, .ie8 .list-grid-demo-2 ul li.odd {
+  background: none repeat scroll 0 0 white;
+}
+
+.list-grid-demo-3:before, .list-grid-demo-3:after {
+  content: "";
+  display: table;
+}
+.list-grid-demo-3:after {
+  clear: both;
+}
+.ie6 .list-grid-demo-3, .ie7 .list-grid-demo-3 {
+  zoom: 1;
+}
+.list-grid-demo-3 ul {
+  float: left;
+  padding: 0px;
+  margin: 0px;
+  width: 130px;
+}
+.list-grid-demo-3 ul li {
+  height: 40px;
+  line-height: 40px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.list-grid-demo-3 ul {
+  list-style: none outside none;
+  border-top: 1px solid #999999;
+  border-bottom: 1px solid #999999;
+  border-right: 1px solid #999999;
+}
+.list-grid-demo-3 ul:first-child {
+  border-left: 1px solid #999999;
+}
+.list-grid-demo-3 ul li {
+  text-align: center;
+  border: 1px solid transparent;
+}
+.list-grid-demo-3 ul li:first-child {
+  border-bottom: 1px solid #999999;
+}
+.list-grid-demo-3 ul li:nth-child(odd) {
+  background: none repeat scroll 0 0 white;
+}
+.list-grid-demo-3 ul li:nth-child(even) {
+  background: none repeat scroll 0 0 #319fda;
+}
+.list-grid-demo-3 ul li.hover-cell:hover {
+  border: 1px solid #319fda;
+  background: #f4fafd;
+  cursor: pointer;
+}
+.ie7 .list-grid-demo-3 ul li:first-child, .ie8 .list-grid-demo-3 ul li:first-child {
+  background: none repeat scroll 0 0 white;
+}
+.ie7 .list-grid-demo-3 ul li.even, .ie8 .list-grid-demo-3 ul li.even {
+  background: none repeat scroll 0 0 #319fda;
+}
+.ie7 .list-grid-demo-3 ul li.odd, .ie8 .list-grid-demo-3 ul li.odd {
+  background: none repeat scroll 0 0 white;
+}
+
+.list-grid-demo-4:before, .list-grid-demo-4:after {
+  content: "";
+  display: table;
+}
+.list-grid-demo-4:after {
+  clear: both;
+}
+.ie6 .list-grid-demo-4, .ie7 .list-grid-demo-4 {
+  zoom: 1;
+}
+.list-grid-demo-4 ul {
+  float: left;
+  padding: 0px;
+  margin: 0px;
+  width: 130px;
+}
+.list-grid-demo-4 ul li {
+  height: 15px;
+  line-height: 15px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.list-grid-demo-4 ul {
+  list-style: none outside none;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+  border-right: 1px solid black;
+}
+.list-grid-demo-4 ul:first-child {
+  border-left: 1px solid black;
+}
+.list-grid-demo-4 ul li {
+  text-align: center;
+  border: 1px solid transparent;
+}
+.list-grid-demo-4 ul li:first-child {
+  border-bottom: 1px solid black;
+}
+.list-grid-demo-4 ul li:nth-child(odd) {
+  background: none repeat scroll 0 0 #cccccc;
+}
+.list-grid-demo-4 ul li:nth-child(even) {
+  background: none repeat scroll 0 0 #eeeeee;
+}
+.list-grid-demo-4 ul li.hover-cell:hover {
+  border: 1px solid red;
+  background: #ffe5e5;
+  cursor: pointer;
+}
+.ie7 .list-grid-demo-4 ul li:first-child, .ie8 .list-grid-demo-4 ul li:first-child {
+  background: none repeat scroll 0 0 #cccccc;
+}
+.ie7 .list-grid-demo-4 ul li.even, .ie8 .list-grid-demo-4 ul li.even {
+  background: none repeat scroll 0 0 #eeeeee;
+}
+.ie7 .list-grid-demo-4 ul li.odd, .ie8 .list-grid-demo-4 ul li.odd {
+  background: none repeat scroll 0 0 #cccccc;
 }
 
 .arrow-demo-1 {
@@ -558,7 +1272,7 @@
   font-style: normal;
   font-size: 9px;
 }
-.arrow-demo-1:after {
+.arrow-demo-1:after, .ie7 .arrow-demo-1 .after {
   content: "";
   position: absolute;
   top: 0;
@@ -566,7 +1280,10 @@
   width: 0;
   height: 0;
 }
-.arrow-demo-1:after {
+.ie7 .arrow-demo-1 {
+  zoom: expression(this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="after" );
+}
+.arrow-demo-1:after, .ie7 .arrow-demo-1 .after {
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   border-left: 7px solid #888888;
@@ -584,7 +1301,7 @@
   font-style: normal;
   font-size: 9px;
 }
-.arrow-demo-2:after {
+.arrow-demo-2:after, .ie7 .arrow-demo-2 .after {
   content: "";
   position: absolute;
   top: 0;
@@ -592,7 +1309,10 @@
   width: 0;
   height: 0;
 }
-.arrow-demo-2:after {
+.ie7 .arrow-demo-2 {
+  zoom: expression(this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="after" );
+}
+.arrow-demo-2:after, .ie7 .arrow-demo-2 .after {
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   border-left: 7px solid #b94a48;
@@ -610,7 +1330,7 @@
   font-style: normal;
   font-size: 9px;
 }
-.arrow-demo-3:after {
+.arrow-demo-3:after, .ie7 .arrow-demo-3 .after {
   content: "";
   position: absolute;
   top: 0;
@@ -618,7 +1338,10 @@
   width: 0;
   height: 0;
 }
-.arrow-demo-3:after {
+.ie7 .arrow-demo-3 {
+  zoom: expression(this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="after" );
+}
+.arrow-demo-3:after, .ie7 .arrow-demo-3 .after {
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   border-left: 7px solid #f89406;
@@ -636,7 +1359,7 @@
   font-style: normal;
   font-size: 9px;
 }
-.arrow-demo-4:after {
+.arrow-demo-4:after, .ie7 .arrow-demo-4 .after {
   content: "";
   position: absolute;
   top: 0;
@@ -644,12 +1367,157 @@
   width: 0;
   height: 0;
 }
-.arrow-demo-4:after {
+.ie7 .arrow-demo-4 {
+  zoom: expression(this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="after" );
+}
+.arrow-demo-4:after, .ie7 .arrow-demo-4 .after {
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   border-left: 7px solid #468847;
 }
 
+.pagination-demo-1 {
+  text-align: center;
+}
+.pagination-demo-1 ul {
+  display: inline-block;
+}
+.pagination-demo-1 ul li {
+  display: inline-block;
+  height: 27px;
+  text-align: center;
+  float: left;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+.pagination-demo-1 ul li a {
+  display: block;
+  line-height: 27px;
+  min-width: 27px;
+}
+.pagination-demo-1 ul .prev {
+  margin: 0 10px 0 0;
+}
+.pagination-demo-1 ul .next {
+  margin: 0 0 0 10px;
+}
+.pagination-demo-1 ul .disabled {
+  display: none;
+}
+.pagination-demo-1 li {
+  background: #eeeeee;
+  border: 1px solid #cccccc;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+  border-radius: 5px;
+  list-style: none;
+}
+.pagination-demo-1 li a {
+  color: #319fda;
+}
+.pagination-demo-1 li a:hover {
+  color: white;
+  text-decoration: none;
+}
+.pagination-demo-1 li:hover {
+  background: #013d93;
+}
+.pagination-demo-1 .active, .pagination-demo-1 .prev, .pagination-demo-1 .next, .pagination-demo-1 .dots {
+  background: none;
+  border: none;
+}
+.pagination-demo-1 .active a:hover, .pagination-demo-1 .prev a:hover, .pagination-demo-1 .next a:hover, .pagination-demo-1 .dots a:hover {
+  color: #319fda;
+}
+.pagination-demo-1 .active:hover, .pagination-demo-1 .prev:hover, .pagination-demo-1 .next:hover, .pagination-demo-1 .dots:hover {
+  background: none;
+}
+.pagination-demo-1 .prev:hover, .pagination-demo-1 .next:hover {
+  text-decoration: underline;
+}
+.pagination-demo-1 .active a, .pagination-demo-1 .dots a {
+  color: #888888;
+  cursor: default;
+  text-decoration: none;
+}
+.pagination-demo-1 .active a:hover, .pagination-demo-1 .dots a:hover {
+  color: #888888;
+  text-decoration: none;
+}
+
+.pagination-demo-2 {
+  text-align: center;
+}
+.pagination-demo-2 ul {
+  display: inline-block;
+}
+.pagination-demo-2 ul li {
+  display: inline-block;
+  height: 27px;
+  text-align: center;
+  float: left;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+.pagination-demo-2 ul li a {
+  display: block;
+  line-height: 27px;
+  min-width: 27px;
+}
+.pagination-demo-2 ul .prev {
+  margin: 0 10px 0 0;
+}
+.pagination-demo-2 ul .next {
+  margin: 0 0 0 10px;
+}
+.pagination-demo-2 ul .disabled {
+  display: none;
+}
+.pagination-demo-2 li {
+  background: white;
+  border: 1px solid red;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -o-border-radius: 10px;
+  border-radius: 10px;
+  list-style: none;
+}
+.pagination-demo-2 li a {
+  color: black;
+}
+.pagination-demo-2 li a:hover {
+  color: yellow;
+  text-decoration: none;
+}
+.pagination-demo-2 li:hover {
+  background: green;
+}
+.pagination-demo-2 .active, .pagination-demo-2 .prev, .pagination-demo-2 .next, .pagination-demo-2 .dots {
+  background: none;
+  border: none;
+}
+.pagination-demo-2 .active a:hover, .pagination-demo-2 .prev a:hover, .pagination-demo-2 .next a:hover, .pagination-demo-2 .dots a:hover {
+  color: black;
+}
+.pagination-demo-2 .active:hover, .pagination-demo-2 .prev:hover, .pagination-demo-2 .next:hover, .pagination-demo-2 .dots:hover {
+  background: none;
+}
+.pagination-demo-2 .prev:hover, .pagination-demo-2 .next:hover {
+  text-decoration: underline;
+}
+.pagination-demo-2 .active a, .pagination-demo-2 .dots a {
+  color: blue;
+  cursor: default;
+  text-decoration: none;
+}
+.pagination-demo-2 .active a:hover, .pagination-demo-2 .dots a:hover {
+  color: blue;
+  text-decoration: none;
+}
+
 .bubble-demo-1 {
   padding: 10px;
   display: block;
@@ -662,7 +1530,7 @@
   -o-border-radius: 5px;
   border-radius: 5px;
 }
-.bubble-demo-1:after {
+.bubble-demo-1:after, .ie7 .bubble-demo-1 .after {
   content: "";
   position: absolute;
   bottom: -15px;
@@ -670,10 +1538,13 @@
   width: 0;
   height: 0;
 }
+.ie7 .bubble-demo-1 {
+  zoom: expression(this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="after" );
+}
 .bubble-demo-1 blockquote {
   color: #999999;
 }
-.bubble-demo-1:after {
+.bubble-demo-1:after, .ie7 .bubble-demo-1 .after {
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-top: 15px solid #eeeeee;
@@ -691,7 +1562,7 @@
   -o-border-radius: 5px;
   border-radius: 5px;
 }
-.bubble-demo-2:after {
+.bubble-demo-2:after, .ie7 .bubble-demo-2 .after {
   content: "";
   position: absolute;
   bottom: -15px;
@@ -699,6 +1570,9 @@
   width: 0;
   height: 0;
 }
+.ie7 .bubble-demo-2 {
+  zoom: expression(this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="after" );
+}
 .bubble-demo-2 blockquote {
   color: #333333;
   white-space: nowrap;
@@ -714,7 +1588,7 @@
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
 }
-.bubble-demo-2:after {
+.bubble-demo-2:after, .ie7 .bubble-demo-2 .after {
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-top: 15px solid #e6e6e6;
@@ -724,6 +1598,576 @@
   margin: 20px 0;
 }
 
+.popup-demo-1, .popup-demo-2, .popup-demo-3, .popup-demo-4 {
+  padding: 10px;
+  position: absolute;
+}
+.popup-demo-1:after, .ie7 .popup-demo-1 .after, .popup-demo-2:after, .ie7 .popup-demo-2 .after, .popup-demo-3:after, .ie7 .popup-demo-3 .after, .popup-demo-4:after, .ie7 .popup-demo-4 .after {
+  content: "";
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+.popup-demo-1 .popup-header h4, .popup-demo-2 .popup-header h4, .popup-demo-3 .popup-header h4, .popup-demo-4 .popup-header h4 {
+  line-height: 20px;
+  padding: 10px;
+}
+.popup-demo-1 .popup-container, .popup-demo-2 .popup-container, .popup-demo-3 .popup-container, .popup-demo-4 .popup-container {
+  z-index: 1;
+  position: relative;
+}
+.popup-demo-1 .popup-arrow, .popup-demo-2 .popup-arrow, .popup-demo-3 .popup-arrow, .popup-demo-4 .popup-arrow {
+  position: absolute;
+  height: 0px;
+  width: 0px;
+}
+.popup-demo-1 .popup-arrow-bottom, .popup-demo-2 .popup-arrow-bottom, .popup-demo-3 .popup-arrow-bottom, .popup-demo-4 .popup-arrow-bottom {
+  bottom: -10px;
+  left: 10px;
+}
+.popup-demo-1 .popup-arrow-top, .popup-demo-2 .popup-arrow-top, .popup-demo-3 .popup-arrow-top, .popup-demo-4 .popup-arrow-top {
+  top: -10px;
+  left: 10px;
+}
+.popup-demo-1 .popup-arrow-left, .popup-demo-2 .popup-arrow-left, .popup-demo-3 .popup-arrow-left, .popup-demo-4 .popup-arrow-left {
+  left: -10px;
+  top: 10px;
+}
+.popup-demo-1 .popup-arrow-right, .popup-demo-2 .popup-arrow-right, .popup-demo-3 .popup-arrow-right, .popup-demo-4 .popup-arrow-right {
+  right: -10px;
+  top: 10px;
+}
+.popup-demo-1 .popup-close, .popup-demo-2 .popup-close, .popup-demo-3 .popup-close, .popup-demo-4 .popup-close {
+  position: absolute;
+  z-index: 10;
+  text-align: center;
+  line-height: 17px;
+  height: 20px;
+  width: 20px;
+  top: -13px;
+  right: -13px;
+}
+.ie7 .popup-demo-1 .popup-close, .ie8 .popup-demo-1 .popup-close, .ie7 .popup-demo-2 .popup-close, .ie8 .popup-demo-2 .popup-close, .ie7 .popup-demo-3 .popup-close, .ie8 .popup-demo-3 .popup-close, .ie7 .popup-demo-4 .popup-close, .ie8 .popup-demo-4 .popup-close {
+  line-height: 23px;
+  height: 26px;
+  width: 26px;
+  top: -13px;
+  right: -13px;
+}
+.ie7 .popup-demo-1, .ie7 .popup-demo-2, .ie7 .popup-demo-3, .ie7 .popup-demo-4 {
+  zoom: expression(this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="after" );
+}
+.popup-demo-1:after, .ie7 .popup-demo-1 .after, .popup-demo-2:after, .ie7 .popup-demo-2 .after, .popup-demo-3:after, .ie7 .popup-demo-3 .after, .popup-demo-4:after, .ie7 .popup-demo-4 .after {
+  background: rgba(0, 0, 0, 0.7);
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
+  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
+}
+.popup-demo-1 .popup-header, .popup-demo-2 .popup-header, .popup-demo-3 .popup-header, .popup-demo-4 .popup-header {
+  background: none repeat scroll 0 0 #f7f7f7;
+  display: block;
+}
+.popup-demo-1 .popup-header h4, .popup-demo-2 .popup-header h4, .popup-demo-3 .popup-header h4, .popup-demo-4 .popup-header h4 {
+  margin: 0;
+  color: #003770;
+  font-family: sans-serif;
+  font-size: 16px;
+  font-weight: normal;
+}
+.popup-demo-1 .popup-content, .popup-demo-2 .popup-content, .popup-demo-3 .popup-content, .popup-demo-4 .popup-content {
+  background: white;
+  border: 1px solid transparent;
+}
+.popup-demo-1 .popup-arrow-bottom, .popup-demo-2 .popup-arrow-bottom, .popup-demo-3 .popup-arrow-bottom, .popup-demo-4 .popup-arrow-bottom {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px solid rgba(0, 0, 0, 0.7);
+}
+.popup-demo-1 .popup-arrow-top, .popup-demo-2 .popup-arrow-top, .popup-demo-3 .popup-arrow-top, .popup-demo-4 .popup-arrow-top {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid rgba(0, 0, 0, 0.7);
+}
+.popup-demo-1 .popup-arrow-left, .popup-demo-2 .popup-arrow-left, .popup-demo-3 .popup-arrow-left, .popup-demo-4 .popup-arrow-left {
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-right: 10px solid rgba(0, 0, 0, 0.7);
+}
+.popup-demo-1 .popup-arrow-right, .popup-demo-2 .popup-arrow-right, .popup-demo-3 .popup-arrow-right, .popup-demo-4 .popup-arrow-right {
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-left: 10px solid rgba(0, 0, 0, 0.7);
+}
+.popup-demo-1 .popup-close, .popup-demo-2 .popup-close, .popup-demo-3 .popup-close, .popup-demo-4 .popup-close {
+  cursor: pointer;
+  border: 3px solid white;
+  color: white;
+  font-weight: bold;
+  font-family: sans-serif;
+  font-size: 16px;
+  background: #319fda;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  -ms-border-radius: 20px;
+  -o-border-radius: 20px;
+  border-radius: 20px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
+  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
+}
+.ie7 .popup-demo-1:after, .ie7 .popup-demo-1 .after, .ie8 .popup-demo-1:after, .ie8 .popup-demo-1 .after, .ie7 .popup-demo-2:after, .ie7 .popup-demo-2 .after, .ie8 .popup-demo-2:after, .ie8 .popup-demo-2 .after, .ie7 .popup-demo-3:after, .ie7 .popup-demo-3 .after, .ie8 .popup-demo-3:after, .ie8 .popup-demo-3 .after, .ie7 .popup-demo-4:after, .ie7 .popup-demo-4 .after, .ie8 .popup-demo-4:after, .ie8 .popup-demo-4 .after {
+  background: black;
+  filter: alpha(opacity=70);
+}
+.ie7 .popup-demo-1 .popup-arrow, .ie8 .popup-demo-1 .popup-arrow, .ie7 .popup-demo-2 .popup-arrow, .ie8 .popup-demo-2 .popup-arrow, .ie7 .popup-demo-3 .popup-arrow, .ie8 .popup-demo-3 .popup-arrow, .ie7 .popup-demo-4 .popup-arrow, .ie8 .popup-demo-4 .popup-arrow {
+  filter: alpha(opacity=70);
+}
+.ie7 .popup-demo-1 .popup-arrow-bottom, .ie8 .popup-demo-1 .popup-arrow-bottom, .ie7 .popup-demo-2 .popup-arrow-bottom, .ie8 .popup-demo-2 .popup-arrow-bottom, .ie7 .popup-demo-3 .popup-arrow-bottom, .ie8 .popup-demo-3 .popup-arrow-bottom, .ie7 .popup-demo-4 .popup-arrow-bottom, .ie8 .popup-demo-4 .popup-arrow-bottom {
+  border-top: 10px solid black;
+}
+.ie7 .popup-demo-1 .popup-arrow-top, .ie8 .popup-demo-1 .popup-arrow-top, .ie7 .popup-demo-2 .popup-arrow-top, .ie8 .popup-demo-2 .popup-arrow-top, .ie7 .popup-demo-3 .popup-arrow-top, .ie8 .popup-demo-3 .popup-arrow-top, .ie7 .popup-demo-4 .popup-arrow-top, .ie8 .popup-demo-4 .popup-arrow-top {
+  border-bottom: 10px solid black;
+}
+.ie7 .popup-demo-1 .popup-arrow-left, .ie8 .popup-demo-1 .popup-arrow-left, .ie7 .popup-demo-2 .popup-arrow-left, .ie8 .popup-demo-2 .popup-arrow-left, .ie7 .popup-demo-3 .popup-arrow-left, .ie8 .popup-demo-3 .popup-arrow-left, .ie7 .popup-demo-4 .popup-arrow-left, .ie8 .popup-demo-4 .popup-arrow-left {
+  border-right: 10px solid black;
+}
+.ie7 .popup-demo-1 .popup-arrow-right, .ie8 .popup-demo-1 .popup-arrow-right, .ie7 .popup-demo-2 .popup-arrow-right, .ie8 .popup-demo-2 .popup-arrow-right, .ie7 .popup-demo-3 .popup-arrow-right, .ie8 .popup-demo-3 .popup-arrow-right, .ie7 .popup-demo-4 .popup-arrow-right, .ie8 .popup-demo-4 .popup-arrow-right {
+  border-left: 10px solid black;
+}
+.ie7 .popup-demo-1 .popup-close, .ie8 .popup-demo-1 .popup-close, .ie7 .popup-demo-2 .popup-close, .ie8 .popup-demo-2 .popup-close, .ie7 .popup-demo-3 .popup-close, .ie8 .popup-demo-3 .popup-close, .ie7 .popup-demo-4 .popup-close, .ie8 .popup-demo-4 .popup-close {
+  border-width: 0px;
+  background-color: transparent;
+  background-image: url('../img/picasso-popup.png');
+  background-position: 0px -1px;
+}
+
+.popup-demo-5 {
+  padding: 10px;
+  position: absolute;
+}
+.popup-demo-5:after, .ie7 .popup-demo-5 .after {
+  content: "";
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+.popup-demo-5 .popup-header h4 {
+  line-height: 20px;
+  padding: 10px;
+}
+.popup-demo-5 .popup-container {
+  z-index: 1;
+  position: relative;
+}
+.popup-demo-5 .popup-arrow {
+  position: absolute;
+  height: 0px;
+  width: 0px;
+}
+.popup-demo-5 .popup-arrow-bottom {
+  bottom: -10px;
+  left: 10px;
+}
+.popup-demo-5 .popup-arrow-top {
+  top: -10px;
+  left: 10px;
+}
+.popup-demo-5 .popup-arrow-left {
+  left: -10px;
+  top: 10px;
+}
+.popup-demo-5 .popup-arrow-right {
+  right: -10px;
+  top: 10px;
+}
+.popup-demo-5 .popup-close {
+  position: absolute;
+  z-index: 10;
+  text-align: center;
+  line-height: 17px;
+  height: 20px;
+  width: 20px;
+  top: -13px;
+  right: -13px;
+}
+.ie7 .popup-demo-5 .popup-close, .ie8 .popup-demo-5 .popup-close {
+  line-height: 23px;
+  height: 26px;
+  width: 26px;
+  top: -13px;
+  right: -13px;
+}
+.ie7 .popup-demo-5 {
+  zoom: expression(this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="after" );
+}
+.popup-demo-5:after, .ie7 .popup-demo-5 .after {
+  background: rgba(1, 61, 147, 0.7);
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -o-border-radius: 10px;
+  border-radius: 10px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
+  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
+}
+.popup-demo-5 .popup-header {
+  background: rgba(1, 61, 147, 0.7);
+  display: block;
+}
+.popup-demo-5 .popup-header h4 {
+  margin: 0;
+  color: white;
+  font-family: sans-serif;
+  font-size: 16px;
+  font-weight: normal;
+}
+.popup-demo-5 .popup-content {
+  background: black;
+  border: 1px solid transparent;
+}
+.popup-demo-5 .popup-arrow-bottom {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px solid rgba(1, 61, 147, 0.7);
+}
+.popup-demo-5 .popup-arrow-top {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid rgba(1, 61, 147, 0.7);
+}
+.popup-demo-5 .popup-arrow-left {
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-right: 10px solid rgba(1, 61, 147, 0.7);
+}
+.popup-demo-5 .popup-arrow-right {
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-left: 10px solid rgba(1, 61, 147, 0.7);
+}
+.popup-demo-5 .popup-close {
+  cursor: pointer;
+  border: 3px solid black;
+  color: black;
+  font-weight: bold;
+  font-family: sans-serif;
+  font-size: 16px;
+  background: red;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  -ms-border-radius: 20px;
+  -o-border-radius: 20px;
+  border-radius: 20px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
+  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
+}
+.ie7 .popup-demo-5:after, .ie7 .popup-demo-5 .after, .ie8 .popup-demo-5:after, .ie8 .popup-demo-5 .after {
+  background: #013d93;
+  filter: alpha(opacity=70);
+}
+.ie7 .popup-demo-5 .popup-arrow, .ie8 .popup-demo-5 .popup-arrow {
+  filter: alpha(opacity=70);
+}
+.ie7 .popup-demo-5 .popup-arrow-bottom, .ie8 .popup-demo-5 .popup-arrow-bottom {
+  border-top: 10px solid #013d93;
+}
+.ie7 .popup-demo-5 .popup-arrow-top, .ie8 .popup-demo-5 .popup-arrow-top {
+  border-bottom: 10px solid #013d93;
+}
+.ie7 .popup-demo-5 .popup-arrow-left, .ie8 .popup-demo-5 .popup-arrow-left {
+  border-right: 10px solid #013d93;
+}
+.ie7 .popup-demo-5 .popup-arrow-right, .ie8 .popup-demo-5 .popup-arrow-right {
+  border-left: 10px solid #013d93;
+}
+.ie7 .popup-demo-5 .popup-close, .ie8 .popup-demo-5 .popup-close {
+  border-width: 0px;
+  background-color: transparent;
+  background-image: url('../img/picasso-popup.png');
+  background-position: 0px -27px;
+}
+.popup-demo-5 .popup-bottom-arrow:after {
+  left: 132px;
+}
+
+.popup-demo-6 {
+  padding: 10px;
+  position: absolute;
+}
+.popup-demo-6:after, .ie7 .popup-demo-6 .after {
+  content: "";
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+.popup-demo-6 .popup-header h4 {
+  line-height: 20px;
+  padding: 10px;
+}
+.popup-demo-6 .popup-container {
+  z-index: 1;
+  position: relative;
+}
+.popup-demo-6 .popup-arrow {
+  position: absolute;
+  height: 0px;
+  width: 0px;
+}
+.popup-demo-6 .popup-arrow-bottom {
+  bottom: -10px;
+  left: 10px;
+}
+.popup-demo-6 .popup-arrow-top {
+  top: -10px;
+  left: 10px;
+}
+.popup-demo-6 .popup-arrow-left {
+  left: -10px;
+  top: 10px;
+}
+.popup-demo-6 .popup-arrow-right {
+  right: -10px;
+  top: 10px;
+}
+.popup-demo-6 .popup-close {
+  position: absolute;
+  z-index: 10;
+  text-align: center;
+  line-height: 17px;
+  height: 20px;
+  width: 20px;
+  top: -13px;
+  right: -13px;
+}
+.ie7 .popup-demo-6 .popup-close, .ie8 .popup-demo-6 .popup-close {
+  line-height: 23px;
+  height: 26px;
+  width: 26px;
+  top: -13px;
+  right: -13px;
+}
+.ie7 .popup-demo-6 {
+  zoom: expression(this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="after" );
+}
+.popup-demo-6:after, .ie7 .popup-demo-6 .after {
+  background: rgba(68, 137, 81, 0.7);
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  -ms-border-radius: 20px;
+  -o-border-radius: 20px;
+  border-radius: 20px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 10px -10px 10px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.5) 10px -10px 10px;
+  box-shadow: rgba(0, 0, 0, 0.5) 10px -10px 10px;
+}
+.popup-demo-6 .popup-header {
+  background: none repeat scroll 0 0 #f7f7f7;
+  display: block;
+}
+.popup-demo-6 .popup-header h4 {
+  margin: 0;
+  color: #003770;
+  font-family: sans-serif;
+  font-size: 16px;
+  font-weight: normal;
+}
+.popup-demo-6 .popup-content {
+  background: white;
+  border: 1px solid transparent;
+}
+.popup-demo-6 .popup-arrow-bottom {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px solid rgba(68, 137, 81, 0.7);
+}
+.popup-demo-6 .popup-arrow-top {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid rgba(68, 137, 81, 0.7);
+}
+.popup-demo-6 .popup-arrow-left {
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-right: 10px solid rgba(68, 137, 81, 0.7);
+}
+.popup-demo-6 .popup-arrow-right {
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-left: 10px solid rgba(68, 137, 81, 0.7);
+}
+.popup-demo-6 .popup-close {
+  cursor: pointer;
+  border: 3px solid white;
+  color: white;
+  font-weight: bold;
+  font-family: sans-serif;
+  font-size: 16px;
+  background: rgba(68, 137, 81, 0.7);
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  -ms-border-radius: 20px;
+  -o-border-radius: 20px;
+  border-radius: 20px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 10px -10px 10px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.5) 10px -10px 10px;
+  box-shadow: rgba(0, 0, 0, 0.5) 10px -10px 10px;
+}
+.ie7 .popup-demo-6:after, .ie7 .popup-demo-6 .after, .ie8 .popup-demo-6:after, .ie8 .popup-demo-6 .after {
+  background: #448951;
+  filter: alpha(opacity=70);
+}
+.ie7 .popup-demo-6 .popup-arrow, .ie8 .popup-demo-6 .popup-arrow {
+  filter: alpha(opacity=70);
+}
+.ie7 .popup-demo-6 .popup-arrow-bottom, .ie8 .popup-demo-6 .popup-arrow-bottom {
+  border-top: 10px solid #448951;
+}
+.ie7 .popup-demo-6 .popup-arrow-top, .ie8 .popup-demo-6 .popup-arrow-top {
+  border-bottom: 10px solid #448951;
+}
+.ie7 .popup-demo-6 .popup-arrow-left, .ie8 .popup-demo-6 .popup-arrow-left {
+  border-right: 10px solid #448951;
+}
+.ie7 .popup-demo-6 .popup-arrow-right, .ie8 .popup-demo-6 .popup-arrow-right {
+  border-left: 10px solid #448951;
+}
+.ie7 .popup-demo-6 .popup-close, .ie8 .popup-demo-6 .popup-close {
+  border-width: 0px;
+  background-color: transparent;
+  background-image: url('../img/picasso-popup.png');
+  background-position: 0px -53px;
+}
+.popup-demo-6 .popup-bottom-arrow:after {
+  left: 132px;
+}
+
+.popup-demo-container {
+  float: left;
+  width: 330px;
+  height: 180px;
+  positon: relative;
+}
+.ie8 .popup-demo-container, .ie7 .popup-demo-container {
+  width: 240px;
+}
+
+.accordion-demo-1 .accordion-header {
+  position: relative;
+  height: 20px;
+  padding: 0 10px;
+  display: block;
+}
+.accordion-demo-1 .accordion-header h4 {
+  line-height: 20px;
+  margin: 0px;
+}
+.accordion-demo-1 .accordion-header .arrow {
+  height: 0;
+  position: absolute;
+  right: 10px;
+  width: 0;
+}
+.accordion-demo-1 .accordion-header-open .arrow {
+  top: 7.5px;
+}
+.accordion-demo-1 .accordion-header-close .arrow {
+  top: 6px;
+}
+.accordion-demo-1 .accordion-content {
+  position: relative;
+  top: -1px;
+}
+.accordion-demo-1 .accordion-header {
+  cursor: pointer;
+  background: #013d93;
+  border-bottom: 1px solid white;
+}
+.accordion-demo-1 .accordion-header h4 {
+  color: white;
+  font-size: 13px;
+}
+.accordion-demo-1 .accordion-header-open .arrow {
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 8px solid white;
+}
+.accordion-demo-1 .accordion-header-close .arrow {
+  border-left: 8px solid white;
+  border-bottom: 5px solid transparent;
+  border-top: 5px solid transparent;
+}
+.accordion-demo-1 .accordion-content {
+  border: 1px solid #CCCCCC;
+}
+
+.accordion-demo-2 {
+  width: 300px;
+}
+.accordion-demo-2 .accordion-header {
+  position: relative;
+  height: 40px;
+  padding: 0 10px;
+  display: block;
+}
+.accordion-demo-2 .accordion-header h4 {
+  line-height: 40px;
+  margin: 0px;
+}
+.accordion-demo-2 .accordion-header .arrow {
+  height: 0;
+  position: absolute;
+  right: 10px;
+  width: 0;
+}
+.accordion-demo-2 .accordion-header-open .arrow {
+  top: 17.5px;
+}
+.accordion-demo-2 .accordion-header-close .arrow {
+  top: 16px;
+}
+.accordion-demo-2 .accordion-content {
+  position: relative;
+  top: -1px;
+}
+.accordion-demo-2 .accordion-header {
+  cursor: pointer;
+  background: #cccccc;
+  border-bottom: 1px solid white;
+}
+.accordion-demo-2 .accordion-header h4 {
+  color: black;
+  font-size: 13px;
+}
+.accordion-demo-2 .accordion-header-open .arrow {
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 8px solid black;
+}
+.accordion-demo-2 .accordion-header-close .arrow {
+  border-left: 8px solid black;
+  border-bottom: 5px solid transparent;
+  border-top: 5px solid transparent;
+}
+.accordion-demo-2 .accordion-content {
+  border: 1px solid #CCCCCC;
+}
+
 .despegar-size-1-demo {
   font-size: 11px;
 }