picasso 0.3.7 → 0.4.0

data/docs/picasso-components-buttons-_mini.html

@@ -2466,30 +2466,46 @@ body {
   background: white;
 }
 
-.despegar-size-1-demo {
+.despegar-size-10-demo {
+  font-size: 10px;
+}
+
+.despegar-size-11-demo {
   font-size: 11px;
 }
 
-.despegar-size-2-demo {
+.despegar-size-13-demo {
   font-size: 13px;
 }
 
-.despegar-size-3-demo {
+.despegar-size-16-demo {
   font-size: 16px;
 }
 
-.despegar-size-4-demo {
+.despegar-size-20-demo {
   font-size: 20px;
 }
 
-.despegar-size-5-demo {
+.despegar-size-24-demo {
   font-size: 24px;
 }
 
-.despegar-size-6-demo {
+.despegar-size-28-demo {
   font-size: 28px;
 }
 
+.despegar-size-30-demo {
+  font-size: 30px;
+}
+
+.despegar-size-32-demo {
+  font-size: 32px;
+}
+
+.despegar-size-36-demo {
+  font-size: 36px;
+}
+
 .despegar-black-demo {
   padding: 10px;
   background: black;
@@ -2508,7 +2524,7 @@ body {
 
 .despegar-red-demo {
   padding: 10px;
-  background: red;
+  background: #e20a16;
 }
 
 .despegar-blue-demo {
@@ -2553,10 +2569,20 @@ body {
 }
 
 .despegar-gray-7-demo {
+  padding: 10px;
+  background: #dddddd;
+}
+
+.despegar-gray-8-demo {
   padding: 10px;
   background: #eeeeee;
 }
 
+.despegar-gray-9-demo {
+  padding: 10px;
+  background: whitesmoke;
+}
+
 .despegar-searchbox-bg-demo {
   padding: 10px;
   background: #ffff33;
@@ -2590,7 +2616,7 @@ body {
 
 .despegar-error-border-demo {
   padding: 10px;
-  background: red;
+  background: #e20a16;
 }
 
 .despegar-warning-bg-demo {
@@ -2640,7 +2666,7 @@ body {
 }
 .clusters-demo-1 .cluster .cluster-items-list .cluster-item {
   border: 1px solid transparent;
-  border-top-color: #eeeeee;
+  border-top-color: #dddddd;
 }
 .clusters-demo-1 .cluster .cluster-items-list .cluster-item:first-child {
   border-top-color: transparent;

data/docs/picasso-despegar-_mixins.html

@@ -2466,30 +2466,46 @@ body {
   background: white;
 }
 
-.despegar-size-1-demo {
+.despegar-size-10-demo {
+  font-size: 10px;
+}
+
+.despegar-size-11-demo {
   font-size: 11px;
 }
 
-.despegar-size-2-demo {
+.despegar-size-13-demo {
   font-size: 13px;
 }
 
-.despegar-size-3-demo {
+.despegar-size-16-demo {
   font-size: 16px;
 }
 
-.despegar-size-4-demo {
+.despegar-size-20-demo {
   font-size: 20px;
 }
 
-.despegar-size-5-demo {
+.despegar-size-24-demo {
   font-size: 24px;
 }
 
-.despegar-size-6-demo {
+.despegar-size-28-demo {
   font-size: 28px;
 }
 
+.despegar-size-30-demo {
+  font-size: 30px;
+}
+
+.despegar-size-32-demo {
+  font-size: 32px;
+}
+
+.despegar-size-36-demo {
+  font-size: 36px;
+}
+
 .despegar-black-demo {
   padding: 10px;
   background: black;
@@ -2508,7 +2524,7 @@ body {
 
 .despegar-red-demo {
   padding: 10px;
-  background: red;
+  background: #e20a16;
 }
 
 .despegar-blue-demo {
@@ -2553,10 +2569,20 @@ body {
 }
 
 .despegar-gray-7-demo {
+  padding: 10px;
+  background: #dddddd;
+}
+
+.despegar-gray-8-demo {
   padding: 10px;
   background: #eeeeee;
 }
 
+.despegar-gray-9-demo {
+  padding: 10px;
+  background: whitesmoke;
+}
+
 .despegar-searchbox-bg-demo {
   padding: 10px;
   background: #ffff33;
@@ -2590,7 +2616,7 @@ body {
 
 .despegar-error-border-demo {
   padding: 10px;
-  background: red;
+  background: #e20a16;
 }
 
 .despegar-warning-bg-demo {
@@ -2640,7 +2666,7 @@ body {
 }
 .clusters-demo-1 .cluster .cluster-items-list .cluster-item {
   border: 1px solid transparent;
-  border-top-color: #eeeeee;
+  border-top-color: #dddddd;
 }
 .clusters-demo-1 .cluster .cluster-items-list .cluster-item:first-child {
   border-top-color: transparent;
@@ -2730,24 +2756,24 @@ body {
 <p> <code>@include font-size-5();</code>
 </p>
 </div><div class="code"><pre><code>@mixin font-size-1() {
-	font-size: $despegar-size-1;
+	font-size: $despegar-size-11;
 }
 
 @mixin font-size-2() {
-	font-size: $despegar-size-2;
+	font-size: $despegar-size-13;
 }
 
 @mixin font-size-3() {
-	font-size: $despegar-size-3;
+	font-size: $despegar-size-16;
 }
 
 @mixin font-size-4() {
-	font-size: $despegar-size-4;
+	font-size: $despegar-size-20;
 	letter-spacing: -1px;
 }
 
 @mixin font-size-5() {
-	font-size: $despegar-size-5;
+	font-size: $despegar-size-24;
 	letter-spacing: -1px;
 }</code></pre></div></article></section></section><div class="bar bottom"><div class="settings container"><button title="Desktop (1280)" data-width='1280' class="desktop ir">Desktop</button><button title="Laptop (1024)" data-width='1024' class="laptop ir">Laptop</button><button title="Tablet (768)" data-width='768' class="tablet ir">Tablet</button><button title="Smart phone (320)" data-width='320' class="smartphone ir">Smart phone</button><button title="Feature phone (240)" data-width='240' class="featurephone ir">Feature phone</button><button title="Auto (100%)" data-width="100%" class="auto is-active">Auto</button></div></div><!--[if !IE]><!-->
 <script src="docs.js"></script><!--<![endif]-->

data/docs/picasso-despegar-_variables.html

@@ -2466,30 +2466,46 @@ body {
   background: white;
 }
 
-.despegar-size-1-demo {
+.despegar-size-10-demo {
+  font-size: 10px;
+}
+
+.despegar-size-11-demo {
   font-size: 11px;
 }
 
-.despegar-size-2-demo {
+.despegar-size-13-demo {
   font-size: 13px;
 }
 
-.despegar-size-3-demo {
+.despegar-size-16-demo {
   font-size: 16px;
 }
 
-.despegar-size-4-demo {
+.despegar-size-20-demo {
   font-size: 20px;
 }
 
-.despegar-size-5-demo {
+.despegar-size-24-demo {
   font-size: 24px;
 }
 
-.despegar-size-6-demo {
+.despegar-size-28-demo {
   font-size: 28px;
 }
 
+.despegar-size-30-demo {
+  font-size: 30px;
+}
+
+.despegar-size-32-demo {
+  font-size: 32px;
+}
+
+.despegar-size-36-demo {
+  font-size: 36px;
+}
+
 .despegar-black-demo {
   padding: 10px;
   background: black;
@@ -2508,7 +2524,7 @@ body {
 
 .despegar-red-demo {
   padding: 10px;
-  background: red;
+  background: #e20a16;
 }
 
 .despegar-blue-demo {
@@ -2553,10 +2569,20 @@ body {
 }
 
 .despegar-gray-7-demo {
+  padding: 10px;
+  background: #dddddd;
+}
+
+.despegar-gray-8-demo {
   padding: 10px;
   background: #eeeeee;
 }
 
+.despegar-gray-9-demo {
+  padding: 10px;
+  background: whitesmoke;
+}
+
 .despegar-searchbox-bg-demo {
   padding: 10px;
   background: #ffff33;
@@ -2590,7 +2616,7 @@ body {
 
 .despegar-error-border-demo {
   padding: 10px;
-  background: red;
+  background: #e20a16;
 }
 
 .despegar-warning-bg-demo {
@@ -2640,7 +2666,7 @@ body {
 }
 .clusters-demo-1 .cluster .cluster-items-list .cluster-item {
   border: 1px solid transparent;
-  border-top-color: #eeeeee;
+  border-top-color: #dddddd;
 }
 .clusters-demo-1 .cluster .cluster-items-list .cluster-item:first-child {
   border-top-color: transparent;
@@ -2703,22 +2729,30 @@ body {
 </a></li></ul></li></ul></nav></aside><section class="content"><article id="" class="section"><div class="docs"><h2>Variables</h2>
 <h3>Ejemplos</h3>
 <h4>Cuerpos tipograficos</h4>
-<div class="preview"> <p class="despegar-size-1-demo">11px - Aliquam tincidunt mauris eu risus.</p>
- <p class="despegar-size-2-demo">13px - Aliquam tincidunt mauris eu risus.</p>
- <p class="despegar-size-3-demo">16px - Aliquam tincidunt mauris eu risus.</p>
- <p class="despegar-size-4-demo">20px - Aliquam tincidunt mauris eu risus.</p>
- <p class="despegar-size-5-demo">24px - Aliquam tincidunt mauris eu risus.</p>
- <p class="despegar-size-6-demo">28px - Aliquam tincidunt mauris eu risus.</p></div><pre><code> &lt;p class=&quot;despegar-size-1-demo&quot;&gt;11px - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
- &lt;p class=&quot;despegar-size-2-demo&quot;&gt;13px - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
- &lt;p class=&quot;despegar-size-3-demo&quot;&gt;16px - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
- &lt;p class=&quot;despegar-size-4-demo&quot;&gt;20px - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
- &lt;p class=&quot;despegar-size-5-demo&quot;&gt;24px - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
- &lt;p class=&quot;despegar-size-6-demo&quot;&gt;28px - Aliquam tincidunt mauris eu risus.&lt;/p&gt;</code></pre>
+<div class="preview"> <p class="despegar-size-10-demo">10px - Aliquam tincidunt mauris eu risus.</p>
+ <p class="despegar-size-11-demo">11px - Aliquam tincidunt mauris eu risus.</p>
+ <p class="despegar-size-13-demo">13px - Aliquam tincidunt mauris eu risus.</p>
+ <p class="despegar-size-16-demo">16px - Aliquam tincidunt mauris eu risus.</p>
+ <p class="despegar-size-20-demo">20px - Aliquam tincidunt mauris eu risus.</p>
+ <p class="despegar-size-24-demo">24px - Aliquam tincidunt mauris eu risus.</p>
+ <p class="despegar-size-28-demo">28px - Aliquam tincidunt mauris eu risus.</p>
+ <p class="despegar-size-30-demo">30px - Aliquam tincidunt mauris eu risus.</p>
+ <p class="despegar-size-32-demo">32px - Aliquam tincidunt mauris eu risus.</p>
+ <p class="despegar-size-36-demo">36px - Aliquam tincidunt mauris eu risus.</p></div><pre><code> &lt;p class=&quot;despegar-size-10-demo&quot;&gt;10px - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-11-demo&quot;&gt;11px - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-13-demo&quot;&gt;13px - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-16-demo&quot;&gt;16px - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-20-demo&quot;&gt;20px - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-24-demo&quot;&gt;24px - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-28-demo&quot;&gt;28px - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-30-demo&quot;&gt;30px - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-32-demo&quot;&gt;32px - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-36-demo&quot;&gt;36px - Aliquam tincidunt mauris eu risus.&lt;/p&gt;</code></pre>
 <h4>Colores base</h4>
 <div class="preview"> <p class="despegar-black-demo">#000 - Aliquam tincidunt mauris eu risus.</p>
  <p class="despegar-white-demo">#FFF - Aliquam tincidunt mauris eu risus.</p>
- <p class="despegar-yellow-demo">#FF3 - Aliquam tincidunt mauris eu risus.</p>
- <p class="despegar-red-demo">#F00 - Aliquam tincidunt mauris eu risus.</p>
+ <p class="despegar-yellow-demo">#FFFF33 - Aliquam tincidunt mauris eu risus.</p>
+ <p class="despegar-red-demo">#E20A16 - Aliquam tincidunt mauris eu risus.</p>
  <p class="despegar-blue-demo">#013D93 - Aliquam tincidunt mauris eu risus.</p>
  <p class="despegar-gray-1-demo">#222 - Aliquam tincidunt mauris eu risus.</p>
  <p class="despegar-gray-2-demo">#444 - Aliquam tincidunt mauris eu risus.</p>
@@ -2726,10 +2760,12 @@ body {
  <p class="despegar-gray-4-demo">#888 - Aliquam tincidunt mauris eu risus.</p>
  <p class="despegar-gray-5-demo">#AAA - Aliquam tincidunt mauris eu risus.</p>
  <p class="despegar-gray-6-demo">#CCC - Aliquam tincidunt mauris eu risus.</p>
- <p class="despegar-gray-7-demo">#EEE - Aliquam tincidunt mauris eu risus.</p></div><pre><code> &lt;p class=&quot;despegar-black-demo&quot;&gt;#000 - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
+ <p class="despegar-gray-7-demo">#DDD - Aliquam tincidunt mauris eu risus.</p>
+ <p class="despegar-gray-8-demo">#EEE - Aliquam tincidunt mauris eu risus.</p>
+ <p class="despegar-gray-9-demo">#F5F5F5 - Aliquam tincidunt mauris eu risus.</p></div><pre><code> &lt;p class=&quot;despegar-black-demo&quot;&gt;#000 - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
  &lt;p class=&quot;despegar-white-demo&quot;&gt;#FFF - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
- &lt;p class=&quot;despegar-yellow-demo&quot;&gt;#FF3 - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
- &lt;p class=&quot;despegar-red-demo&quot;&gt;#F00 - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
+ &lt;p class=&quot;despegar-yellow-demo&quot;&gt;#FFFF33 - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
+ &lt;p class=&quot;despegar-red-demo&quot;&gt;#E20A16 - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
  &lt;p class=&quot;despegar-blue-demo&quot;&gt;#013D93 - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
  &lt;p class=&quot;despegar-gray-1-demo&quot;&gt;#222 - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
  &lt;p class=&quot;despegar-gray-2-demo&quot;&gt;#444 - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
@@ -2737,25 +2773,29 @@ body {
  &lt;p class=&quot;despegar-gray-4-demo&quot;&gt;#888 - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
  &lt;p class=&quot;despegar-gray-5-demo&quot;&gt;#AAA - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
  &lt;p class=&quot;despegar-gray-6-demo&quot;&gt;#CCC - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
- &lt;p class=&quot;despegar-gray-7-demo&quot;&gt;#EEE - Aliquam tincidunt mauris eu risus.&lt;/p&gt;</code></pre>
+ &lt;p class=&quot;despegar-gray-7-demo&quot;&gt;#DDD - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
+ &lt;p class=&quot;despegar-gray-8-demo&quot;&gt;#EEE - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
+ &lt;p class=&quot;despegar-gray-9-demo&quot;&gt;#F5F5F5 - Aliquam tincidunt mauris eu risus.&lt;/p&gt;</code></pre>
 <h4>Elementos</h4>
-<div class="preview"> <p class="despegar-searchbox-bg-demo">#FF3 Background Buscador - Aliquam tincidunt mauris eu risus.</p>
+<div class="preview"> <p class="despegar-searchbox-bg-demo">#FFFF33 Background Buscador - Aliquam tincidunt mauris eu risus.</p>
  <p class="despegar-title-color-demo">#013D93 Color Titulos - Aliquam tincidunt mauris eu risus.</p>
  <p class="despegar-titlealt-color-demo">#F90 Color Titulos alternativos - Aliquam tincidunt mauris eu risus.</p>
+ <p class="despegar-titlelighten-color-demo">#B4CBFC Color Titulos con colores mas suaves - Aliquam tincidunt mauris eu risus.</p>
  <p class="despegar-link-color-demo">#319FDA Color links - Aliquam tincidunt mauris eu risus.</p>
  <p class="despegar-link-color-hover-demo">#66CCFF Color links (hover) - Aliquam tincidunt mauris eu risus.</p>
  <p class="despegar-error-bg-demo">#FFE6E6 Color Titulos - Aliquam tincidunt mauris eu risus.</p>
- <p class="despegar-error-border-demo">#F00 Color borde mensajes de error - Aliquam tincidunt mauris eu risus.</p>
+ <p class="despegar-error-border-demo">#E20A16 Color borde mensajes de error - Aliquam tincidunt mauris eu risus.</p>
  <p class="despegar-warning-bg-demo">#FFFFE1 Background mensajes - Aliquam tincidunt mauris eu risus.</p>
- <p class="despegar-warning-border-demo">#FC3 Color borde mensajes - Aliquam tincidunt mauris eu risus.</p></div><pre><code> &lt;p class=&quot;despegar-searchbox-bg-demo&quot;&gt;#FF3 Background Buscador - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
+ <p class="despegar-warning-border-demo">#FFCC33 Color borde mensajes - Aliquam tincidunt mauris eu risus.</p></div><pre><code> &lt;p class=&quot;despegar-searchbox-bg-demo&quot;&gt;#FFFF33 Background Buscador - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
  &lt;p class=&quot;despegar-title-color-demo&quot;&gt;#013D93 Color Titulos - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
  &lt;p class=&quot;despegar-titlealt-color-demo&quot;&gt;#F90 Color Titulos alternativos - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
+ &lt;p class=&quot;despegar-titlelighten-color-demo&quot;&gt;#B4CBFC Color Titulos con colores mas suaves - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
  &lt;p class=&quot;despegar-link-color-demo&quot;&gt;#319FDA Color links - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
  &lt;p class=&quot;despegar-link-color-hover-demo&quot;&gt;#66CCFF Color links (hover) - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
  &lt;p class=&quot;despegar-error-bg-demo&quot;&gt;#FFE6E6 Color Titulos - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
- &lt;p class=&quot;despegar-error-border-demo&quot;&gt;#F00 Color borde mensajes de error - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
+ &lt;p class=&quot;despegar-error-border-demo&quot;&gt;#E20A16 Color borde mensajes de error - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
  &lt;p class=&quot;despegar-warning-bg-demo&quot;&gt;#FFFFE1 Background mensajes - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
- &lt;p class=&quot;despegar-warning-border-demo&quot;&gt;#FC3 Color borde mensajes - Aliquam tincidunt mauris eu risus.&lt;/p&gt;</code></pre>
+ &lt;p class=&quot;despegar-warning-border-demo&quot;&gt;#FFCC33 Color borde mensajes - Aliquam tincidunt mauris eu risus.&lt;/p&gt;</code></pre>
 </div><div class="code"><pre><code> // Variables de la marca Despegar
  // Formato de variables: 
  // * Atajos: ${marca}-{atajo}. Ejemplo: $despegar-black;
@@ -2769,21 +2809,24 @@ $brand : "despegar";
 
 
  // Cuerpos tipograficos
-$despegar-size-1 	: 11px;
-$despegar-size-2 	: 13px;
-$despegar-size-3 	: 16px;
-$despegar-size-4 	: 20px;
-$despegar-size-5 	: 24px;
-$despegar-size-6 	: 28px;
-
+$despegar-size-10   : 10px;
+$despegar-size-11   : 11px;
+$despegar-size-13   : 13px;
+$despegar-size-16   : 16px;
+$despegar-size-20   : 20px;
+$despegar-size-24   : 24px;
+$despegar-size-28   : 28px;
+$despegar-size-30   : 30px;
+$despegar-size-32   : 32px;
+$despegar-size-36   : 36px;
 
 
 
  // Colores base: Comunes
 $despegar-black		: #000;
 $despegar-white		: #FFF;
-$despegar-yellow	: #FF3;
-$despegar-red		: #F00;
+$despegar-yellow	: #FFFF33;
+$despegar-red		: #E20A16;
 $despegar-blue		: #013D93;
 
  // Colores base: Escala de grises 
@@ -2793,7 +2836,9 @@ $despegar-gray-3	: #666;
 $despegar-gray-4	: #888;
 $despegar-gray-5	: #AAA;
 $despegar-gray-6	: #CCC;
-$despegar-gray-7	: #EEE;
+$despegar-gray-7    : #DDD;
+$despegar-gray-8    : #EEE;
+$despegar-gray-9    : #F5F5F5;
 
 
 
@@ -2805,7 +2850,10 @@ $despegar-searchbox-bg	: $despegar-yellow;
 $despegar-title-color 	: $despegar-blue;
 
  // Titulos y destacados (alt)
-$despegar-titlealt-color	: #F90;
+$despegar-titlealt-color	: #FF9900;
+
+ // Titulos y destacados (alt)
+$despegar-titlelighten-color	: #B4CBFC;
 
  // Links
 $despegar-link-color 		: #319FDA;
@@ -2821,6 +2869,6 @@ $despegar-error-border       : $despegar-red;
 $despegar-warning-bg         : #FFFFE1;
 
  // Warning: borde
-$despegar-warning-border     : #FC3;</code></pre></div></article></section></section><div class="bar bottom"><div class="settings container"><button title="Desktop (1280)" data-width='1280' class="desktop ir">Desktop</button><button title="Laptop (1024)" data-width='1024' class="laptop ir">Laptop</button><button title="Tablet (768)" data-width='768' class="tablet ir">Tablet</button><button title="Smart phone (320)" data-width='320' class="smartphone ir">Smart phone</button><button title="Feature phone (240)" data-width='240' class="featurephone ir">Feature phone</button><button title="Auto (100%)" data-width="100%" class="auto is-active">Auto</button></div></div><!--[if !IE]><!-->
+$despegar-warning-border     : #FFCC33;</code></pre></div></article></section></section><div class="bar bottom"><div class="settings container"><button title="Desktop (1280)" data-width='1280' class="desktop ir">Desktop</button><button title="Laptop (1024)" data-width='1024' class="laptop ir">Laptop</button><button title="Tablet (768)" data-width='768' class="tablet ir">Tablet</button><button title="Smart phone (320)" data-width='320' class="smartphone ir">Smart phone</button><button title="Feature phone (240)" data-width='240' class="featurephone ir">Feature phone</button><button title="Auto (100%)" data-width="100%" class="auto is-active">Auto</button></div></div><!--[if !IE]><!-->
 <script src="docs.js"></script><!--<![endif]-->
 </body></html><!-- Generated with StyleDocco (http://jacobrask.github.com/styledocco). -->