picasso 0.4.1 → 0.4.2

data/docs/picasso-despegar-_variables.html

@@ -1314,7 +1314,7 @@ body {
 .list-grid-demo-1:after {
   clear: both;
 }
-.ie6 .list-grid-demo-1, .ie7 .list-grid-demo-1 {
+.ie7 .list-grid-demo-1 {
   zoom: 1;
 }
 .list-grid-demo-1 ul {
@@ -1373,7 +1373,7 @@ body {
 .nav-demo-1:after {
   clear: both;
 }
-.ie6 .nav-demo-1, .ie7 .nav-demo-1 {
+.ie7 .nav-demo-1 {
   zoom: 1;
 }
 .nav-demo-1 ul {
@@ -1389,7 +1389,7 @@ body {
 .nav-demo-1 ul:after {
   clear: both;
 }
-.ie6 .nav-demo-1 ul, .ie7 .nav-demo-1 ul {
+.ie7 .nav-demo-1 ul {
   zoom: 1;
 }
 .nav-demo-1 ul li {
@@ -1947,7 +1947,7 @@ body {
 .accordion-demo-1 .accordion-header:after {
   clear: both;
 }
-.ie6 .accordion-demo-1 .accordion-header, .ie7 .accordion-demo-1 .accordion-header {
+.ie7 .accordion-demo-1 .accordion-header {
   zoom: 1;
 }
 .accordion-demo-1 .accordion-header h4 {
@@ -2259,7 +2259,7 @@ body {
 .row-col:after {
   clear: both;
 }
-.ie6 .row-col, .ie7 .row-col {
+.ie7 .row-col {
   zoom: 1;
 }
 .row-col [class^="col"] {
@@ -2454,7 +2454,7 @@ body {
 .clearfix-demo:after {
   clear: both;
 }
-.ie6 .clearfix-demo, .ie7 .clearfix-demo {
+.ie7 .clearfix-demo {
   zoom: 1;
 }
 .clearfix-demo div {
@@ -2604,6 +2604,11 @@ body {
   background: #66ccff;
 }
 
+.despegar-link-bg-hover-demo {
+  padding: 10px;
+  background: #f1f6fc;
+}
+
 .despegar-error-bg-demo {
   padding: 10px;
   background: #ffe6e6;
@@ -2624,6 +2629,11 @@ body {
   background: #ff9900;
 }
 
+.despegar-fill-bg-demo {
+  padding: 10px;
+  background: #84a8fb;
+}
+
 .clusters-demo-1 .cluster {
   margin-bottom: 15px;
   border: 1px solid #cccccc;
@@ -2641,7 +2651,7 @@ body {
 .clusters-demo-1 .cluster:after {
   clear: both;
 }
-.ie6 .clusters-demo-1 .cluster, .ie7 .clusters-demo-1 .cluster {
+.ie7 .clusters-demo-1 .cluster {
   zoom: 1;
 }
 .clusters-demo-1 .cluster .cluster-items-list {
@@ -2724,73 +2734,77 @@ 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-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>
+<div class="preview"> <p class="despegar-size-10-demo">$despegar-size-10: 10px</p>
+ <p class="despegar-size-11-demo">$despegar-size-11: 11px</p>
+ <p class="despegar-size-13-demo">$despegar-size-13: 13px</p>
+ <p class="despegar-size-16-demo">$despegar-size-16: 16px</p>
+ <p class="despegar-size-20-demo">$despegar-size-20: 20px</p>
+ <p class="despegar-size-24-demo">$despegar-size-24: 24px</p>
+ <p class="despegar-size-28-demo">$despegar-size-28: 28px</p>
+ <p class="despegar-size-30-demo">$despegar-size-30: 30px</p>
+ <p class="despegar-size-32-demo">$despegar-size-32: 32px</p>
+ <p class="despegar-size-36-demo">$despegar-size-36: 36px</p></div><pre><code> &lt;p class=&quot;despegar-size-10-demo&quot;&gt;$despegar-size-10: 10px&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-11-demo&quot;&gt;$despegar-size-11: 11px&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-13-demo&quot;&gt;$despegar-size-13: 13px&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-16-demo&quot;&gt;$despegar-size-16: 16px&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-20-demo&quot;&gt;$despegar-size-20: 20px&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-24-demo&quot;&gt;$despegar-size-24: 24px&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-28-demo&quot;&gt;$despegar-size-28: 28px&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-30-demo&quot;&gt;$despegar-size-30: 30px&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-32-demo&quot;&gt;$despegar-size-32: 32px&lt;/p&gt;
+ &lt;p class=&quot;despegar-size-36-demo&quot;&gt;$despegar-size-36: 36px&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">#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>
- <p class="despegar-gray-3-demo">#666 - Aliquam tincidunt mauris eu risus.</p>
- <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">#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;#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;
- &lt;p class=&quot;despegar-gray-3-demo&quot;&gt;#666 - Aliquam tincidunt mauris eu risus.&lt;/p&gt;
- &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;#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>
+<div class="preview"> <p class="despegar-black-demo">$despegar-black: #000</p>
+ <p class="despegar-white-demo">$despegar-white: #FFF</p>
+ <p class="despegar-yellow-demo">$despegar-yellow: #FFFF33</p>
+ <p class="despegar-red-demo">$despegar-red: #E20A16</p>
+ <p class="despegar-blue-demo">$despegar-blue: #013D93</p>
+ <p class="despegar-gray-1-demo">$despegar-gray-1: #222</p>
+ <p class="despegar-gray-2-demo">$despegar-gray-2: #444</p>
+ <p class="despegar-gray-3-demo">$despegar-gray-3: #666</p>
+ <p class="despegar-gray-4-demo">$despegar-gray-4: #888</p>
+ <p class="despegar-gray-5-demo">$despegar-gray-5: #AAA</p>
+ <p class="despegar-gray-6-demo">$despegar-gray-6: #CCC</p>
+ <p class="despegar-gray-7-demo">$despegar-gray-7: #DDD</p>
+ <p class="despegar-gray-8-demo">$despegar-gray-8: #EEE</p>
+ <p class="despegar-gray-9-demo">$despegar-gray-9: #F5F5F5</p></div><pre><code> &lt;p class=&quot;despegar-black-demo&quot;&gt;$despegar-black: #000&lt;/p&gt;
+ &lt;p class=&quot;despegar-white-demo&quot;&gt;$despegar-white: #FFF&lt;/p&gt;
+ &lt;p class=&quot;despegar-yellow-demo&quot;&gt;$despegar-yellow: #FFFF33&lt;/p&gt;
+ &lt;p class=&quot;despegar-red-demo&quot;&gt;$despegar-red: #E20A16&lt;/p&gt;
+ &lt;p class=&quot;despegar-blue-demo&quot;&gt;$despegar-blue: #013D93&lt;/p&gt;
+ &lt;p class=&quot;despegar-gray-1-demo&quot;&gt;$despegar-gray-1: #222&lt;/p&gt;
+ &lt;p class=&quot;despegar-gray-2-demo&quot;&gt;$despegar-gray-2: #444&lt;/p&gt;
+ &lt;p class=&quot;despegar-gray-3-demo&quot;&gt;$despegar-gray-3: #666&lt;/p&gt;
+ &lt;p class=&quot;despegar-gray-4-demo&quot;&gt;$despegar-gray-4: #888&lt;/p&gt;
+ &lt;p class=&quot;despegar-gray-5-demo&quot;&gt;$despegar-gray-5: #AAA&lt;/p&gt;
+ &lt;p class=&quot;despegar-gray-6-demo&quot;&gt;$despegar-gray-6: #CCC&lt;/p&gt;
+ &lt;p class=&quot;despegar-gray-7-demo&quot;&gt;$despegar-gray-7: #DDD&lt;/p&gt;
+ &lt;p class=&quot;despegar-gray-8-demo&quot;&gt;$despegar-gray-8: #EEE&lt;/p&gt;
+ &lt;p class=&quot;despegar-gray-9-demo&quot;&gt;$despegar-gray-9: #F5F5F5&lt;/p&gt;</code></pre>
 <h4>Elementos</h4>
-<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">#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">#FF9900 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;#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;#FF9900 Color borde mensajes - Aliquam tincidunt mauris eu risus.&lt;/p&gt;</code></pre>
+<div class="preview"> <p class="despegar-searchbox-bg-demo">$despegar-searchbox-bg: #FFFF33 (Background Buscador)</p>
+ <p class="despegar-title-color-demo">$despegar-title-color: #013D93 (Color Titulos)</p>
+ <p class="despegar-titlealt-color-demo">$despegar-titlealt-color: #F90 (Color Titulos alternativos)</p>
+ <p class="despegar-titlelighten-color-demo">$despegar-titlelighten-color: #B4CBFC (Color Titulos con colores mas suaves)</p>
+ <p class="despegar-link-color-demo">$despegar-link-color: #319FDA (Color links)</p>
+ <p class="despegar-link-color-hover-demo">$despegar-link-color-hover: #66CCFF (Color links, hover)</p>
+ <p class="despegar-link-bg-hover-demo">$despegar-link-bg-hover: #F1F6FC (Background links, hover)</p>
+ <p class="despegar-error-bg-demo">$despegar-error-bg: #FFE6E6 (Color Titulos)</p>
+ <p class="despegar-error-border-demo">$despegar-error-border: #E20A16 (Color borde mensajes de error)</p>
+ <p class="despegar-warning-bg-demo">$despegar-warning-bg: #FFFFE1 (Background mensajes)</p>
+ <p class="despegar-warning-border-demo">$despegar-warning-border: #FF9900 (Color borde mensajes)</p>
+ <p class="despegar-fill-bg-demo">$despegar-fill-bg: #84A8FB (Color de relleno)</p></div><pre><code> &lt;p class=&quot;despegar-searchbox-bg-demo&quot;&gt;$despegar-searchbox-bg: #FFFF33 (Background Buscador)&lt;/p&gt;
+ &lt;p class=&quot;despegar-title-color-demo&quot;&gt;$despegar-title-color: #013D93 (Color Titulos)&lt;/p&gt;
+ &lt;p class=&quot;despegar-titlealt-color-demo&quot;&gt;$despegar-titlealt-color: #F90 (Color Titulos alternativos)&lt;/p&gt;
+ &lt;p class=&quot;despegar-titlelighten-color-demo&quot;&gt;$despegar-titlelighten-color: #B4CBFC (Color Titulos con colores mas suaves)&lt;/p&gt;
+ &lt;p class=&quot;despegar-link-color-demo&quot;&gt;$despegar-link-color: #319FDA (Color links)&lt;/p&gt;
+ &lt;p class=&quot;despegar-link-color-hover-demo&quot;&gt;$despegar-link-color-hover: #66CCFF (Color links, hover)&lt;/p&gt;
+ &lt;p class=&quot;despegar-link-bg-hover-demo&quot;&gt;$despegar-link-bg-hover: #F1F6FC (Background links, hover)&lt;/p&gt;
+ &lt;p class=&quot;despegar-error-bg-demo&quot;&gt;$despegar-error-bg: #FFE6E6 (Color Titulos)&lt;/p&gt;
+ &lt;p class=&quot;despegar-error-border-demo&quot;&gt;$despegar-error-border: #E20A16 (Color borde mensajes de error)&lt;/p&gt;
+ &lt;p class=&quot;despegar-warning-bg-demo&quot;&gt;$despegar-warning-bg: #FFFFE1 (Background mensajes)&lt;/p&gt;
+ &lt;p class=&quot;despegar-warning-border-demo&quot;&gt;$despegar-warning-border: #FF9900 (Color borde mensajes)&lt;/p&gt;
+ &lt;p class=&quot;despegar-fill-bg-demo&quot;&gt;$despegar-fill-bg: #84A8FB (Color de relleno)&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;
@@ -2838,6 +2852,7 @@ $despegar-gray-9    : #F5F5F5;
 
 
 
+
  // Buscador
 $despegar-searchbox-bg	: $despegar-yellow;
 
@@ -2853,6 +2868,7 @@ $despegar-titlelighten-color	: #B4CBFC;
  // Links
 $despegar-link-color 		: #319FDA;
 $despegar-link-color-hover 	: #66CCFF;
+$despegar-link-bg-hover 	: #F1F6FC;
 
  // Errores: fondo
 $despegar-error-bg           : #FFE6E6;
@@ -2864,6 +2880,9 @@ $despegar-error-border       : $despegar-red;
 $despegar-warning-bg         : #FFFFE1;
 
  // Warning: borde
-$despegar-warning-border     : #FF9900;</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     : #FF9900;
+
+ // Color de relleno
+$despegar-fill-bg       : #84A8FB;</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). -->

data/docs/picasso-utils-_clearfix.html

@@ -1314,7 +1314,7 @@ body {
 .list-grid-demo-1:after {
   clear: both;
 }
-.ie6 .list-grid-demo-1, .ie7 .list-grid-demo-1 {
+.ie7 .list-grid-demo-1 {
   zoom: 1;
 }
 .list-grid-demo-1 ul {
@@ -1373,7 +1373,7 @@ body {
 .nav-demo-1:after {
   clear: both;
 }
-.ie6 .nav-demo-1, .ie7 .nav-demo-1 {
+.ie7 .nav-demo-1 {
   zoom: 1;
 }
 .nav-demo-1 ul {
@@ -1389,7 +1389,7 @@ body {
 .nav-demo-1 ul:after {
   clear: both;
 }
-.ie6 .nav-demo-1 ul, .ie7 .nav-demo-1 ul {
+.ie7 .nav-demo-1 ul {
   zoom: 1;
 }
 .nav-demo-1 ul li {
@@ -1947,7 +1947,7 @@ body {
 .accordion-demo-1 .accordion-header:after {
   clear: both;
 }
-.ie6 .accordion-demo-1 .accordion-header, .ie7 .accordion-demo-1 .accordion-header {
+.ie7 .accordion-demo-1 .accordion-header {
   zoom: 1;
 }
 .accordion-demo-1 .accordion-header h4 {
@@ -2259,7 +2259,7 @@ body {
 .row-col:after {
   clear: both;
 }
-.ie6 .row-col, .ie7 .row-col {
+.ie7 .row-col {
   zoom: 1;
 }
 .row-col [class^="col"] {
@@ -2454,7 +2454,7 @@ body {
 .clearfix-demo:after {
   clear: both;
 }
-.ie6 .clearfix-demo, .ie7 .clearfix-demo {
+.ie7 .clearfix-demo {
   zoom: 1;
 }
 .clearfix-demo div {
@@ -2604,6 +2604,11 @@ body {
   background: #66ccff;
 }
 
+.despegar-link-bg-hover-demo {
+  padding: 10px;
+  background: #f1f6fc;
+}
+
 .despegar-error-bg-demo {
   padding: 10px;
   background: #ffe6e6;
@@ -2624,6 +2629,11 @@ body {
   background: #ff9900;
 }
 
+.despegar-fill-bg-demo {
+  padding: 10px;
+  background: #84a8fb;
+}
+
 .clusters-demo-1 .cluster {
   margin-bottom: 15px;
   border: 1px solid #cccccc;
@@ -2641,7 +2651,7 @@ body {
 .clusters-demo-1 .cluster:after {
   clear: both;
 }
-.ie6 .clusters-demo-1 .cluster, .ie7 .clusters-demo-1 .cluster {
+.ie7 .clusters-demo-1 .cluster {
   zoom: 1;
 }
 .clusters-demo-1 .cluster .cluster-items-list {
@@ -2749,7 +2759,7 @@ body {
 		clear:both;
 	}
 	
-	.ie6 &, .ie7 & {
+	.ie7 & {
 		zoom:1;
 	}
 

data/docs/picasso-utils-_grid.html

@@ -1314,7 +1314,7 @@ body {
 .list-grid-demo-1:after {
   clear: both;
 }
-.ie6 .list-grid-demo-1, .ie7 .list-grid-demo-1 {
+.ie7 .list-grid-demo-1 {
   zoom: 1;
 }
 .list-grid-demo-1 ul {
@@ -1373,7 +1373,7 @@ body {
 .nav-demo-1:after {
   clear: both;
 }
-.ie6 .nav-demo-1, .ie7 .nav-demo-1 {
+.ie7 .nav-demo-1 {
   zoom: 1;
 }
 .nav-demo-1 ul {
@@ -1389,7 +1389,7 @@ body {
 .nav-demo-1 ul:after {
   clear: both;
 }
-.ie6 .nav-demo-1 ul, .ie7 .nav-demo-1 ul {
+.ie7 .nav-demo-1 ul {
   zoom: 1;
 }
 .nav-demo-1 ul li {
@@ -1947,7 +1947,7 @@ body {
 .accordion-demo-1 .accordion-header:after {
   clear: both;
 }
-.ie6 .accordion-demo-1 .accordion-header, .ie7 .accordion-demo-1 .accordion-header {
+.ie7 .accordion-demo-1 .accordion-header {
   zoom: 1;
 }
 .accordion-demo-1 .accordion-header h4 {
@@ -2259,7 +2259,7 @@ body {
 .row-col:after {
   clear: both;
 }
-.ie6 .row-col, .ie7 .row-col {
+.ie7 .row-col {
   zoom: 1;
 }
 .row-col [class^="col"] {
@@ -2454,7 +2454,7 @@ body {
 .clearfix-demo:after {
   clear: both;
 }
-.ie6 .clearfix-demo, .ie7 .clearfix-demo {
+.ie7 .clearfix-demo {
   zoom: 1;
 }
 .clearfix-demo div {
@@ -2604,6 +2604,11 @@ body {
   background: #66ccff;
 }
 
+.despegar-link-bg-hover-demo {
+  padding: 10px;
+  background: #f1f6fc;
+}
+
 .despegar-error-bg-demo {
   padding: 10px;
   background: #ffe6e6;
@@ -2624,6 +2629,11 @@ body {
   background: #ff9900;
 }
 
+.despegar-fill-bg-demo {
+  padding: 10px;
+  background: #84a8fb;
+}
+
 .clusters-demo-1 .cluster {
   margin-bottom: 15px;
   border: 1px solid #cccccc;
@@ -2641,7 +2651,7 @@ body {
 .clusters-demo-1 .cluster:after {
   clear: both;
 }
-.ie6 .clusters-demo-1 .cluster, .ie7 .clusters-demo-1 .cluster {
+.ie7 .clusters-demo-1 .cluster {
   zoom: 1;
 }
 .clusters-demo-1 .cluster .cluster-items-list {
@@ -2991,22 +3001,30 @@ body {
 <ul>
 <li><code>$grid-default-columns</code>: Cantidad de columnas. Esta variable modifica la cantidad de columnas disponibles en la grilla y 
 resuelve todos los anchos de manera autom&aacute;tica. Valor predeterminado: 12.</li>
-<li><code>$grid-default-column-class</code>: Nombre de la clase para el contenedor (<code>row-col</code>) y las columnas (<code>colX</code>). Valor predeterminado: <code>col</code>.</li>
+<li><code>$grid-default-row-class</code>: Nombre de la clase para el contenedor (<code>row-col</code>). Valor predeterminado: <code>row-col</code>.</li>
+<li><code>$grid-default-column-class</code>: Nombre de la clase para las columnas (<code>colX</code>). Valor predeterminado: <code>col</code>.</li>
 <li><code>$grid-default-offset-class</code>: Nombre de la clase para aplicar offset (<code>offsetX</code>). Valor predeterminado: <code>offset</code>.</li>
+<li><code>$grid-default-container-class</code>: Nombre de la clase para el contenedor principal (<code>container</code>). Valor predeterminado: <code>container</code>.</li>
 <li><code>$grid-default-include-offset</code>: Incluir estilos para aplicar offset. Valor predeterminado: <code>true</code>.</li>
+<li><code>$grid-default-include-container</code>: Incluir estilos para el contenedor. Valor predeterminado: <code>true</code>.</li>
 </ul>
 </div><div class="code"><pre><code>@import "compass/css3/box-sizing";
 @import "clearfix";
 
 $grid-default-columns: 12 !default;
+$grid-default-row-class: "row-col" !default;
 $grid-default-column-class: "col" !default;
 $grid-default-offset-class: "offset" !default;
 $grid-default-container-class: "container" !default;
+$grid-default-include-container: true !default;
 $grid-default-include-offset: true !default;
 
 @mixin grid(){
+	
+	@if $grid-default-include-container == true {
+		@include grid-container();
+	}
 
-	@include grid-container();
 	@include grid-columns();
 
 }
@@ -3031,7 +3049,7 @@ $grid-default-include-offset: true !default;
 	$grid-gutter-unit-width: $grid-space-unit-width + $grid-corrector;
 	$grid-magic-number-ie: 0.092;
 
-	.row-#{$grid-default-column-class} {
+	.#{$grid-default-row-class} {
 		width: 100%;
 		@include clearfix;
 

data/docs/picasso-utils-_ie.html

@@ -1314,7 +1314,7 @@ body {
 .list-grid-demo-1:after {
   clear: both;
 }
-.ie6 .list-grid-demo-1, .ie7 .list-grid-demo-1 {
+.ie7 .list-grid-demo-1 {
   zoom: 1;
 }
 .list-grid-demo-1 ul {
@@ -1373,7 +1373,7 @@ body {
 .nav-demo-1:after {
   clear: both;
 }
-.ie6 .nav-demo-1, .ie7 .nav-demo-1 {
+.ie7 .nav-demo-1 {
   zoom: 1;
 }
 .nav-demo-1 ul {
@@ -1389,7 +1389,7 @@ body {
 .nav-demo-1 ul:after {
   clear: both;
 }
-.ie6 .nav-demo-1 ul, .ie7 .nav-demo-1 ul {
+.ie7 .nav-demo-1 ul {
   zoom: 1;
 }
 .nav-demo-1 ul li {
@@ -1947,7 +1947,7 @@ body {
 .accordion-demo-1 .accordion-header:after {
   clear: both;
 }
-.ie6 .accordion-demo-1 .accordion-header, .ie7 .accordion-demo-1 .accordion-header {
+.ie7 .accordion-demo-1 .accordion-header {
   zoom: 1;
 }
 .accordion-demo-1 .accordion-header h4 {
@@ -2259,7 +2259,7 @@ body {
 .row-col:after {
   clear: both;
 }
-.ie6 .row-col, .ie7 .row-col {
+.ie7 .row-col {
   zoom: 1;
 }
 .row-col [class^="col"] {
@@ -2454,7 +2454,7 @@ body {
 .clearfix-demo:after {
   clear: both;
 }
-.ie6 .clearfix-demo, .ie7 .clearfix-demo {
+.ie7 .clearfix-demo {
   zoom: 1;
 }
 .clearfix-demo div {
@@ -2604,6 +2604,11 @@ body {
   background: #66ccff;
 }
 
+.despegar-link-bg-hover-demo {
+  padding: 10px;
+  background: #f1f6fc;
+}
+
 .despegar-error-bg-demo {
   padding: 10px;
   background: #ffe6e6;
@@ -2624,6 +2629,11 @@ body {
   background: #ff9900;
 }
 
+.despegar-fill-bg-demo {
+  padding: 10px;
+  background: #84a8fb;
+}
+
 .clusters-demo-1 .cluster {
   margin-bottom: 15px;
   border: 1px solid #cccccc;
@@ -2641,7 +2651,7 @@ body {
 .clusters-demo-1 .cluster:after {
   clear: both;
 }
-.ie6 .clusters-demo-1 .cluster, .ie7 .clusters-demo-1 .cluster {
+.ie7 .clusters-demo-1 .cluster {
   zoom: 1;
 }
 .clusters-demo-1 .cluster .cluster-items-list {

data/docs/picasso-utils-_rem.html

@@ -1314,7 +1314,7 @@ body {
 .list-grid-demo-1:after {
   clear: both;
 }
-.ie6 .list-grid-demo-1, .ie7 .list-grid-demo-1 {
+.ie7 .list-grid-demo-1 {
   zoom: 1;
 }
 .list-grid-demo-1 ul {
@@ -1373,7 +1373,7 @@ body {
 .nav-demo-1:after {
   clear: both;
 }
-.ie6 .nav-demo-1, .ie7 .nav-demo-1 {
+.ie7 .nav-demo-1 {
   zoom: 1;
 }
 .nav-demo-1 ul {
@@ -1389,7 +1389,7 @@ body {
 .nav-demo-1 ul:after {
   clear: both;
 }
-.ie6 .nav-demo-1 ul, .ie7 .nav-demo-1 ul {
+.ie7 .nav-demo-1 ul {
   zoom: 1;
 }
 .nav-demo-1 ul li {
@@ -1947,7 +1947,7 @@ body {
 .accordion-demo-1 .accordion-header:after {
   clear: both;
 }
-.ie6 .accordion-demo-1 .accordion-header, .ie7 .accordion-demo-1 .accordion-header {
+.ie7 .accordion-demo-1 .accordion-header {
   zoom: 1;
 }
 .accordion-demo-1 .accordion-header h4 {
@@ -2259,7 +2259,7 @@ body {
 .row-col:after {
   clear: both;
 }
-.ie6 .row-col, .ie7 .row-col {
+.ie7 .row-col {
   zoom: 1;
 }
 .row-col [class^="col"] {
@@ -2454,7 +2454,7 @@ body {
 .clearfix-demo:after {
   clear: both;
 }
-.ie6 .clearfix-demo, .ie7 .clearfix-demo {
+.ie7 .clearfix-demo {
   zoom: 1;
 }
 .clearfix-demo div {
@@ -2604,6 +2604,11 @@ body {
   background: #66ccff;
 }
 
+.despegar-link-bg-hover-demo {
+  padding: 10px;
+  background: #f1f6fc;
+}
+
 .despegar-error-bg-demo {
   padding: 10px;
   background: #ffe6e6;
@@ -2624,6 +2629,11 @@ body {
   background: #ff9900;
 }
 
+.despegar-fill-bg-demo {
+  padding: 10px;
+  background: #84a8fb;
+}
+
 .clusters-demo-1 .cluster {
   margin-bottom: 15px;
   border: 1px solid #cccccc;
@@ -2641,7 +2651,7 @@ body {
 .clusters-demo-1 .cluster:after {
   clear: both;
 }
-.ie6 .clusters-demo-1 .cluster, .ie7 .clusters-demo-1 .cluster {
+.ie7 .clusters-demo-1 .cluster {
   zoom: 1;
 }
 .clusters-demo-1 .cluster .cluster-items-list {