picasso 0.4.2 → 0.5.0

data/docs/config.rb

@@ -1,6 +1,3 @@
-# Dependencias
-require 'magick'
-
 css_dir           = "css"
 sass_dir          = "sass"
 line_comments     = false

data/docs/css/picasso-demos.css

@@ -155,375 +155,6 @@ body {
   font-size: 1.2em;
 }
 
-.button-glossy-demo-1 {
-  width: 90px;
-  height: 30px;
-  display: inline-block;
-  text-align: center;
-  position: relative;
-  z-index: 1;
-  font-family: sans-serif;
-  font-size: 12px;
-  text-decoration: none;
-  cursor: pointer;
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #de1f2a), color-stop(100%, #c81c26)), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b11922), color-stop(100%, #6e0f15));
-  background: -webkit-linear-gradient(#de1f2a, #c81c26), -webkit-linear-gradient(#b11922, #6e0f15);
-  background: -moz-linear-gradient(#de1f2a, #c81c26), -moz-linear-gradient(#b11922, #6e0f15);
-  background: -o-linear-gradient(#de1f2a, #c81c26), -o-linear-gradient(#b11922, #6e0f15);
-  background: linear-gradient(#de1f2a, #c81c26), linear-gradient(#b11922, #6e0f15);
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  -ms-border-radius: 5px;
-  -o-border-radius: 5px;
-  border-radius: 5px;
-  background-position: left top, left 15px;
-}
-.button-glossy-demo-1:after, .button-glossy-demo-1:before {
-  content: "";
-  position: absolute;
-  display: inline-block;
-}
-.button-glossy-demo-1:after {
-  width: 88px;
-  height: 28px;
-  left: 1px;
-  top: 1px;
-  z-index: 2;
-}
-.button-glossy-demo-1:before {
-  width: 86px;
-  height: 26px;
-  left: 2px;
-  top: 2px;
-  z-index: 3;
-}
-.button-glossy-demo-1 span {
-  position: relative;
-  z-index: 4;
-  line-height: 30px;
-}
-.button-glossy-demo-1 span {
-  color: white;
-}
-.button-glossy-demo-1:after, .button-glossy-demo-1:before {
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  -ms-border-radius: 4px;
-  -o-border-radius: 4px;
-  border-radius: 4px;
-}
-.button-glossy-demo-1:after {
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(15%, #f2a4a8), color-stop(100%, #150304)) 50%;
-  background: -webkit-linear-gradient(#f2a4a8 15%, #150304) 50%;
-  background: -moz-linear-gradient(#f2a4a8 15%, #150304) 50%;
-  background: -o-linear-gradient(#f2a4a8 15%, #150304) 50%;
-  background: linear-gradient(#f2a4a8 15%, #150304) 50%;
-}
-.button-glossy-demo-1:before {
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #de1f2a), color-stop(100%, #c81c26)), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b11922), color-stop(100%, #6e0f15));
-  background: -webkit-linear-gradient(#de1f2a, #c81c26), -webkit-linear-gradient(#b11922, #6e0f15);
-  background: -moz-linear-gradient(#de1f2a, #c81c26), -moz-linear-gradient(#b11922, #6e0f15);
-  background: -o-linear-gradient(#de1f2a, #c81c26), -o-linear-gradient(#b11922, #6e0f15);
-  background: linear-gradient(#de1f2a, #c81c26), linear-gradient(#b11922, #6e0f15);
-  background-position: left top, left 13px;
-}
-.button-glossy-demo-1, .button-glossy-demo-1:before {
-  background-size: 100% 50%;
-  background-repeat: no-repeat;
-}
-.button-glossy-demo-1:hover {
-  text-decoration: none;
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e96168), color-stop(50%, #bf1b24), color-stop(100%, #f10c19));
-  background: -webkit-linear-gradient(#e96168, #bf1b24, #f10c19);
-  background: -moz-linear-gradient(#e96168, #bf1b24, #f10c19);
-  background: -o-linear-gradient(#e96168, #bf1b24, #f10c19);
-  background: linear-gradient(#e96168, #bf1b24, #f10c19);
-}
-.button-glossy-demo-1:hover:after {
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4b1b5), color-stop(100%, #d11d27)) 50%;
-  background: -webkit-linear-gradient(#f4b1b5 20%, #d11d27) 50%;
-  background: -moz-linear-gradient(#f4b1b5 20%, #d11d27) 50%;
-  background: -o-linear-gradient(#f4b1b5 20%, #d11d27) 50%;
-  background: linear-gradient(#f4b1b5 20%, #d11d27) 50%;
-}
-.button-glossy-demo-1:hover:before {
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e96168), color-stop(50%, #bf1b24), color-stop(100%, #f10c19));
-  background: -webkit-linear-gradient(#e96168, #bf1b24, #f10c19);
-  background: -moz-linear-gradient(#e96168, #bf1b24, #f10c19);
-  background: -o-linear-gradient(#e96168, #bf1b24, #f10c19);
-  background: linear-gradient(#e96168, #bf1b24, #f10c19);
-}
-.button-glossy-demo-1:hover, .button-glossy-demo-1:hover:before {
-  background-size: 100% 100%;
-  background-position: left top;
-  background-repeat: no-repeat;
-}
-.ie7 .button-glossy-demo-1, .ie8 .button-glossy-demo-1, .ie9 .button-glossy-demo-1 {
-  -webkit-border-radius: none;
-  -moz-border-radius: none;
-  -ms-border-radius: none;
-  -o-border-radius: none;
-  border-radius: none;
-  background: url('../img/picasso-buttons-glossy.png');
-  background-position: 0 -1px;
-}
-.ie7 .button-glossy-demo-1:hover, .ie8 .button-glossy-demo-1:hover, .ie9 .button-glossy-demo-1:hover {
-  background-position: 0 -31px;
-}
-.ie9 .button-glossy-demo-1 {
-  -webkit-border-radius: none;
-  -moz-border-radius: none;
-  -ms-border-radius: none;
-  -o-border-radius: none;
-  border-radius: none;
-}
-
-.button-glossy-demo-2 {
-  width: 70px;
-  height: 30px;
-  display: inline-block;
-  text-align: center;
-  position: relative;
-  z-index: 1;
-  font-family: sans-serif;
-  font-size: 12px;
-  text-decoration: none;
-  cursor: pointer;
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #0077b3)), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #006699), color-stop(100%, #00334d));
-  background: -webkit-linear-gradient(#0088cc, #0077b3), -webkit-linear-gradient(#006699, #00334d);
-  background: -moz-linear-gradient(#0088cc, #0077b3), -moz-linear-gradient(#006699, #00334d);
-  background: -o-linear-gradient(#0088cc, #0077b3), -o-linear-gradient(#006699, #00334d);
-  background: linear-gradient(#0088cc, #0077b3), linear-gradient(#006699, #00334d);
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  -ms-border-radius: 5px;
-  -o-border-radius: 5px;
-  border-radius: 5px;
-  background-position: left top, left 15px;
-}
-.button-glossy-demo-2:after, .button-glossy-demo-2:before {
-  content: "";
-  position: absolute;
-  display: inline-block;
-}
-.button-glossy-demo-2:after {
-  width: 68px;
-  height: 28px;
-  left: 1px;
-  top: 1px;
-  z-index: 2;
-}
-.button-glossy-demo-2:before {
-  width: 66px;
-  height: 26px;
-  left: 2px;
-  top: 2px;
-  z-index: 3;
-}
-.button-glossy-demo-2 span {
-  position: relative;
-  z-index: 4;
-  line-height: 30px;
-}
-.button-glossy-demo-2 span {
-  color: white;
-}
-.button-glossy-demo-2:after, .button-glossy-demo-2:before {
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  -ms-border-radius: 4px;
-  -o-border-radius: 4px;
-  border-radius: 4px;
-}
-.button-glossy-demo-2:after {
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(15%, #66ccff), color-stop(100%, #000000)) 50%;
-  background: -webkit-linear-gradient(#66ccff 15%, #000000) 50%;
-  background: -moz-linear-gradient(#66ccff 15%, #000000) 50%;
-  background: -o-linear-gradient(#66ccff 15%, #000000) 50%;
-  background: linear-gradient(#66ccff 15%, #000000) 50%;
-}
-.button-glossy-demo-2:before {
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #0077b3)), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #006699), color-stop(100%, #00334d));
-  background: -webkit-linear-gradient(#0088cc, #0077b3), -webkit-linear-gradient(#006699, #00334d);
-  background: -moz-linear-gradient(#0088cc, #0077b3), -moz-linear-gradient(#006699, #00334d);
-  background: -o-linear-gradient(#0088cc, #0077b3), -o-linear-gradient(#006699, #00334d);
-  background: linear-gradient(#0088cc, #0077b3), linear-gradient(#006699, #00334d);
-  background-position: left top, left 13px;
-}
-.button-glossy-demo-2, .button-glossy-demo-2:before {
-  background-size: 100% 50%;
-  background-repeat: no-repeat;
-}
-.button-glossy-demo-2:hover {
-  text-decoration: none;
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1ab2ff), color-stop(50%, #0070a8), color-stop(100%, #0088cc));
-  background: -webkit-linear-gradient(#1ab2ff, #0070a8, #0088cc);
-  background: -moz-linear-gradient(#1ab2ff, #0070a8, #0088cc);
-  background: -o-linear-gradient(#1ab2ff, #0070a8, #0088cc);
-  background: linear-gradient(#1ab2ff, #0070a8, #0088cc);
-}
-.button-glossy-demo-2:hover:after {
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #75d1ff), color-stop(100%, #007ebd)) 50%;
-  background: -webkit-linear-gradient(#75d1ff 20%, #007ebd) 50%;
-  background: -moz-linear-gradient(#75d1ff 20%, #007ebd) 50%;
-  background: -o-linear-gradient(#75d1ff 20%, #007ebd) 50%;
-  background: linear-gradient(#75d1ff 20%, #007ebd) 50%;
-}
-.button-glossy-demo-2:hover:before {
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1ab2ff), color-stop(50%, #0070a8), color-stop(100%, #0088cc));
-  background: -webkit-linear-gradient(#1ab2ff, #0070a8, #0088cc);
-  background: -moz-linear-gradient(#1ab2ff, #0070a8, #0088cc);
-  background: -o-linear-gradient(#1ab2ff, #0070a8, #0088cc);
-  background: linear-gradient(#1ab2ff, #0070a8, #0088cc);
-}
-.button-glossy-demo-2:hover, .button-glossy-demo-2:hover:before {
-  background-size: 100% 100%;
-  background-position: left top;
-  background-repeat: no-repeat;
-}
-.ie7 .button-glossy-demo-2, .ie8 .button-glossy-demo-2, .ie9 .button-glossy-demo-2 {
-  -webkit-border-radius: none;
-  -moz-border-radius: none;
-  -ms-border-radius: none;
-  -o-border-radius: none;
-  border-radius: none;
-  background: url('../img/picasso-buttons-glossy.png');
-  background-position: 0 -61px;
-}
-.ie7 .button-glossy-demo-2:hover, .ie8 .button-glossy-demo-2:hover, .ie9 .button-glossy-demo-2:hover {
-  background-position: 0 -91px;
-}
-.ie9 .button-glossy-demo-2 {
-  -webkit-border-radius: none;
-  -moz-border-radius: none;
-  -ms-border-radius: none;
-  -o-border-radius: none;
-  border-radius: none;
-}
-
-.button-glossy-demo-3 {
-  width: 80px;
-  height: 30px;
-  display: inline-block;
-  text-align: center;
-  position: relative;
-  z-index: 1;
-  font-family: sans-serif;
-  font-size: 12px;
-  text-decoration: none;
-  cursor: pointer;
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbb450), color-stop(100%, #faa937)), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fa9f1e), color-stop(100%, #c77605));
-  background: -webkit-linear-gradient(#fbb450, #faa937), -webkit-linear-gradient(#fa9f1e, #c77605);
-  background: -moz-linear-gradient(#fbb450, #faa937), -moz-linear-gradient(#fa9f1e, #c77605);
-  background: -o-linear-gradient(#fbb450, #faa937), -o-linear-gradient(#fa9f1e, #c77605);
-  background: linear-gradient(#fbb450, #faa937), linear-gradient(#fa9f1e, #c77605);
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  -ms-border-radius: 5px;
-  -o-border-radius: 5px;
-  border-radius: 5px;
-  background-position: left top, left 15px;
-}
-.button-glossy-demo-3:after, .button-glossy-demo-3:before {
-  content: "";
-  position: absolute;
-  display: inline-block;
-}
-.button-glossy-demo-3:after {
-  width: 78px;
-  height: 28px;
-  left: 1px;
-  top: 1px;
-  z-index: 2;
-}
-.button-glossy-demo-3:before {
-  width: 76px;
-  height: 26px;
-  left: 2px;
-  top: 2px;
-  z-index: 3;
-}
-.button-glossy-demo-3 span {
-  position: relative;
-  z-index: 4;
-  line-height: 30px;
-}
-.button-glossy-demo-3 span {
-  color: white;
-}
-.button-glossy-demo-3:after, .button-glossy-demo-3:before {
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  -ms-border-radius: 4px;
-  -o-border-radius: 4px;
-  border-radius: 4px;
-}
-.button-glossy-demo-3:after {
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(15%, #fef4e6), color-stop(100%, #633b02)) 50%;
-  background: -webkit-linear-gradient(#fef4e6 15%, #633b02) 50%;
-  background: -moz-linear-gradient(#fef4e6 15%, #633b02) 50%;
-  background: -o-linear-gradient(#fef4e6 15%, #633b02) 50%;
-  background: linear-gradient(#fef4e6 15%, #633b02) 50%;
-}
-.button-glossy-demo-3:before {
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbb450), color-stop(100%, #faa937)), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fa9f1e), color-stop(100%, #c77605));
-  background: -webkit-linear-gradient(#fbb450, #faa937), -webkit-linear-gradient(#fa9f1e, #c77605);
-  background: -moz-linear-gradient(#fbb450, #faa937), -moz-linear-gradient(#fa9f1e, #c77605);
-  background: -o-linear-gradient(#fbb450, #faa937), -o-linear-gradient(#fa9f1e, #c77605);
-  background: linear-gradient(#fbb450, #faa937), linear-gradient(#fa9f1e, #c77605);
-  background-position: left top, left 13px;
-}
-.button-glossy-demo-3, .button-glossy-demo-3:before {
-  background-size: 100% 50%;
-  background-repeat: no-repeat;
-}
-.button-glossy-demo-3:hover {
-  text-decoration: none;
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fdd49b), color-stop(50%, #faa52d), color-stop(100%, #ffb54c));
-  background: -webkit-linear-gradient(#fdd49b, #faa52d, #ffb54c);
-  background: -moz-linear-gradient(#fdd49b, #faa52d, #ffb54c);
-  background: -o-linear-gradient(#fdd49b, #faa52d, #ffb54c);
-  background: linear-gradient(#fdd49b, #faa52d, #ffb54c);
-}
-.button-glossy-demo-3:hover:after {
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #fffbf5), color-stop(100%, #fbae41)) 50%;
-  background: -webkit-linear-gradient(#fffbf5 20%, #fbae41) 50%;
-  background: -moz-linear-gradient(#fffbf5 20%, #fbae41) 50%;
-  background: -o-linear-gradient(#fffbf5 20%, #fbae41) 50%;
-  background: linear-gradient(#fffbf5 20%, #fbae41) 50%;
-}
-.button-glossy-demo-3:hover:before {
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fdd49b), color-stop(50%, #faa52d), color-stop(100%, #ffb54c));
-  background: -webkit-linear-gradient(#fdd49b, #faa52d, #ffb54c);
-  background: -moz-linear-gradient(#fdd49b, #faa52d, #ffb54c);
-  background: -o-linear-gradient(#fdd49b, #faa52d, #ffb54c);
-  background: linear-gradient(#fdd49b, #faa52d, #ffb54c);
-}
-.button-glossy-demo-3:hover, .button-glossy-demo-3:hover:before {
-  background-size: 100% 100%;
-  background-position: left top;
-  background-repeat: no-repeat;
-}
-.ie7 .button-glossy-demo-3, .ie8 .button-glossy-demo-3, .ie9 .button-glossy-demo-3 {
-  -webkit-border-radius: none;
-  -moz-border-radius: none;
-  -ms-border-radius: none;
-  -o-border-radius: none;
-  border-radius: none;
-  background: url('../img/picasso-buttons-glossy.png');
-  background-position: 0 -121px;
-}
-.ie7 .button-glossy-demo-3:hover, .ie8 .button-glossy-demo-3:hover, .ie9 .button-glossy-demo-3:hover {
-  background-position: 0 -151px;
-}
-.ie9 .button-glossy-demo-3 {
-  -webkit-border-radius: none;
-  -moz-border-radius: none;
-  -ms-border-radius: none;
-  -o-border-radius: none;
-  border-radius: none;
-}
-
 .button-3d-demo-1 {
   overflow: hidden;
   display: inline-block;
@@ -631,7 +262,7 @@ body {
   display: inline-block;
   line-height: 2.2em;
   color: white;
-  border: 1px solid #004466;
+  border: 1px solid #00132e;
   font-family: sans-serif;
   font-size: 13px;
   text-decoration: none;
@@ -663,34 +294,34 @@ body {
   color: white;
 }
 .button-3d-demo-2 span {
-  background-color: #0088cc;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #002233));
-  background-image: -webkit-linear-gradient(#0088cc, #002233);
-  background-image: -moz-linear-gradient(#0088cc, #002233);
-  background-image: -o-linear-gradient(#0088cc, #002233);
-  background-image: linear-gradient(#0088cc, #002233);
+  background-color: #013d93;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #013d93), color-stop(100%, #000000));
+  background-image: -webkit-linear-gradient(#013d93, #000000);
+  background-image: -moz-linear-gradient(#013d93, #000000);
+  background-image: -o-linear-gradient(#013d93, #000000);
+  background-image: linear-gradient(#013d93, #000000);
   -webkit-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
   -moz-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
   box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5);
 }
 .button-3d-demo-2 span:hover {
-  background-color: #0088cc;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #004466));
-  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), #004466);
-  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), #004466);
-  background-image: -o-linear-gradient(rgba(255, 255, 255, 0), #004466);
-  background-image: linear-gradient(rgba(255, 255, 255, 0), #004466);
-  -webkit-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #0088cc;
-  -moz-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #0088cc;
-  box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #0088cc;
+  background-color: #003d94;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #00132e));
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), #00132e);
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), #00132e);
+  background-image: -o-linear-gradient(rgba(255, 255, 255, 0), #00132e);
+  background-image: linear-gradient(rgba(255, 255, 255, 0), #00132e);
+  -webkit-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #003d94;
+  -moz-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #003d94;
+  box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(255, 255, 255, 0.5), inset 0 0 1em #003d94;
 }
 .button-3d-demo-2 span:active {
   text-shadow: 0 -1px 0 black;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #002233));
-  background-image: -webkit-linear-gradient(#0088cc, #002233);
-  background-image: -moz-linear-gradient(#0088cc, #002233);
-  background-image: -o-linear-gradient(#0088cc, #002233);
-  background-image: linear-gradient(#0088cc, #002233);
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #013d93), color-stop(100%, #000000));
+  background-image: -webkit-linear-gradient(#013d93, #000000);
+  background-image: -moz-linear-gradient(#013d93, #000000);
+  background-image: -o-linear-gradient(#013d93, #000000);
+  background-image: linear-gradient(#013d93, #000000);
   -webkit-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.1), inset 0 0.1em 0.2em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(0, 0, 0, 0.1), inset 0 0 1em rgba(0, 0, 0, 0.75);
   -moz-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.1), inset 0 0.1em 0.2em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(0, 0, 0, 0.1), inset 0 0 1em rgba(0, 0, 0, 0.75);
   box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.1), inset 0 0.1em 0.2em rgba(0, 0, 0, 0.5), inset 0 0.1em 0 rgba(0, 0, 0, 0.1), inset 0 0 1em rgba(0, 0, 0, 0.75);
@@ -713,15 +344,15 @@ body {
 }
 .ie7 .button-3d-demo-2 span, .ie8 .button-3d-demo-2 span, .ie9 .button-3d-demo-2 span {
   *zoom: 1;
-  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#000088CC', endColorstr='#FF002233');
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00013D93', endColorstr='#FF000000');
 }
 .ie7 .button-3d-demo-2 span:hover, .ie8 .button-3d-demo-2 span:hover, .ie9 .button-3d-demo-2 span:hover {
   *zoom: 1;
-  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FFFFFF', endColorstr='#FF004466');
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00FFFFFF', endColorstr='#FF00132E');
 }
 .ie7 .button-3d-demo-2 span:active, .ie8 .button-3d-demo-2 span:active, .ie9 .button-3d-demo-2 span:active {
   *zoom: 1;
-  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#000088CC', endColorstr='#FF002233');
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00013D93', endColorstr='#FF000000');
 }
 .ie7 .button-3d-demo-2.disabled span, .ie7 .button-3d-demo-2.disabled span:hover, .ie7 .button-3d-demo-2.disabled span:active, .ie8 .button-3d-demo-2.disabled span, .ie8 .button-3d-demo-2.disabled span:hover, .ie8 .button-3d-demo-2.disabled span:active, .ie9 .button-3d-demo-2.disabled span, .ie9 .button-3d-demo-2.disabled span:hover, .ie9 .button-3d-demo-2.disabled span:active {
   *zoom: 1;
@@ -1034,278 +665,6 @@ body {
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF979797', endColorstr='#FF4B4B4B');
 }
 
-.button-mini-demo-1 {
-  display: inline-block;
-  height: 20px;
-  padding-right: 10px;
-  padding-right: 10px;
-  font-family: sans-serif;
-  text-decoration: none;
-  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: linear-gradient(top, #f0f0f0 0%, #e3e3e3 50%, #d6d6d6 51%, #cacaca 100%);
-  -webkit-border-radius: 20px;
-  -moz-border-radius: 20px;
-  -ms-border-radius: 20px;
-  -o-border-radius: 20px;
-  border-radius: 20px;
-  -webkit-box-shadow: #333333 0px 1px 2px 0px;
-  -moz-box-shadow: #333333 0px 1px 2px 0px;
-  box-shadow: #333333 0px 1px 2px 0px;
-}
-.button-mini-demo-1 span {
-  height: 20px;
-  line-height: 20px;
-  padding-left: 10px;
-  display: block;
-}
-.button-mini-demo-1:hover {
-  text-decoration: none;
-  background: #e3e3e3;
-}
-.button-mini-demo-1:active {
-  background: #cacaca;
-  -webkit-box-shadow: #999999 0px 0px 3px 3px inset;
-  -moz-box-shadow: #999999 0px 0px 3px 3px inset;
-  box-shadow: #999999 0px 0px 3px 3px inset;
-}
-.button-mini-demo-1 span {
-  color: #0e6695;
-  font-size: 11px;
-}
-.ie7 .button-mini-demo-1, .ie8 .button-mini-demo-1, .ie9 .button-mini-demo-1 {
-  background: url('../img/picasso-buttons-mini.png');
-  background-position: right -1px;
-}
-.ie7 .button-mini-demo-1:hover, .ie8 .button-mini-demo-1:hover, .ie9 .button-mini-demo-1:hover {
-  background-position: right -21px;
-}
-.ie7 .button-mini-demo-1 span, .ie8 .button-mini-demo-1 span, .ie9 .button-mini-demo-1 span {
-  background-image: url('../img/picasso-buttons-mini.png');
-  background-color: white;
-  background-position: 0 -1px;
-}
-.ie7 .button-mini-demo-1 span:hover, .ie8 .button-mini-demo-1 span:hover, .ie9 .button-mini-demo-1 span:hover {
-  background-position: 0 -21px;
-}
-.ie9 .button-mini-demo-1 {
-  -webkit-border-radius: none;
-  -moz-border-radius: none;
-  -ms-border-radius: none;
-  -o-border-radius: none;
-  border-radius: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-
-.button-mini-demo-2 {
-  display: inline-block;
-  height: 20px;
-  padding-right: 10px;
-  padding-right: 10px;
-  font-family: sans-serif;
-  text-decoration: none;
-  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: linear-gradient(top, #0088cc 0%, #0077b3 50%, #006699 51%, #005580 100%);
-  -webkit-border-radius: 20px;
-  -moz-border-radius: 20px;
-  -ms-border-radius: 20px;
-  -o-border-radius: 20px;
-  border-radius: 20px;
-  -webkit-box-shadow: #333333 0px 1px 2px 0px;
-  -moz-box-shadow: #333333 0px 1px 2px 0px;
-  box-shadow: #333333 0px 1px 2px 0px;
-}
-.button-mini-demo-2 span {
-  height: 20px;
-  line-height: 20px;
-  padding-left: 10px;
-  display: block;
-}
-.button-mini-demo-2:hover {
-  text-decoration: none;
-  background: #0077b3;
-}
-.button-mini-demo-2:active {
-  background: #005580;
-  -webkit-box-shadow: #999999 0px 0px 3px 3px inset;
-  -moz-box-shadow: #999999 0px 0px 3px 3px inset;
-  box-shadow: #999999 0px 0px 3px 3px inset;
-}
-.button-mini-demo-2 span {
-  color: white;
-  font-size: 11px;
-}
-.ie7 .button-mini-demo-2, .ie8 .button-mini-demo-2, .ie9 .button-mini-demo-2 {
-  background: url('../img/picasso-buttons-mini.png');
-  background-position: right -41px;
-}
-.ie7 .button-mini-demo-2:hover, .ie8 .button-mini-demo-2:hover, .ie9 .button-mini-demo-2:hover {
-  background-position: right -61px;
-}
-.ie7 .button-mini-demo-2 span, .ie8 .button-mini-demo-2 span, .ie9 .button-mini-demo-2 span {
-  background-image: url('../img/picasso-buttons-mini.png');
-  background-color: white;
-  background-position: 0 -41px;
-}
-.ie7 .button-mini-demo-2 span:hover, .ie8 .button-mini-demo-2 span:hover, .ie9 .button-mini-demo-2 span:hover {
-  background-position: 0 -61px;
-}
-.ie9 .button-mini-demo-2 {
-  -webkit-border-radius: none;
-  -moz-border-radius: none;
-  -ms-border-radius: none;
-  -o-border-radius: none;
-  border-radius: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-
-.button-mini-demo-3 {
-  display: inline-block;
-  height: 20px;
-  padding-right: 10px;
-  padding-right: 10px;
-  font-family: sans-serif;
-  text-decoration: none;
-  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: linear-gradient(top, #da4f49 0%, #d63b34 50%, #c72f29 51%, #b22a24 100%);
-  -webkit-border-radius: 20px;
-  -moz-border-radius: 20px;
-  -ms-border-radius: 20px;
-  -o-border-radius: 20px;
-  border-radius: 20px;
-  -webkit-box-shadow: #333333 0px 1px 2px 0px;
-  -moz-box-shadow: #333333 0px 1px 2px 0px;
-  box-shadow: #333333 0px 1px 2px 0px;
-}
-.button-mini-demo-3 span {
-  height: 20px;
-  line-height: 20px;
-  padding-left: 10px;
-  display: block;
-}
-.button-mini-demo-3:hover {
-  text-decoration: none;
-  background: #d63b34;
-}
-.button-mini-demo-3:active {
-  background: #b22a24;
-  -webkit-box-shadow: #999999 0px 0px 3px 3px inset;
-  -moz-box-shadow: #999999 0px 0px 3px 3px inset;
-  box-shadow: #999999 0px 0px 3px 3px inset;
-}
-.button-mini-demo-3 span {
-  color: white;
-  font-size: 11px;
-}
-.ie7 .button-mini-demo-3, .ie8 .button-mini-demo-3, .ie9 .button-mini-demo-3 {
-  background: url('../img/picasso-buttons-mini.png');
-  background-position: right -81px;
-}
-.ie7 .button-mini-demo-3:hover, .ie8 .button-mini-demo-3:hover, .ie9 .button-mini-demo-3:hover {
-  background-position: right -101px;
-}
-.ie7 .button-mini-demo-3 span, .ie8 .button-mini-demo-3 span, .ie9 .button-mini-demo-3 span {
-  background-image: url('../img/picasso-buttons-mini.png');
-  background-color: white;
-  background-position: 0 -81px;
-}
-.ie7 .button-mini-demo-3 span:hover, .ie8 .button-mini-demo-3 span:hover, .ie9 .button-mini-demo-3 span:hover {
-  background-position: 0 -101px;
-}
-.ie9 .button-mini-demo-3 {
-  -webkit-border-radius: none;
-  -moz-border-radius: none;
-  -ms-border-radius: none;
-  -o-border-radius: none;
-  border-radius: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-
-.button-mini-demo-4 {
-  display: inline-block;
-  height: 20px;
-  padding-right: 10px;
-  padding-right: 10px;
-  font-family: sans-serif;
-  text-decoration: none;
-  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: linear-gradient(top, #414141 0%, #343434 50%, #272727 51%, #1b1b1b 100%);
-  -webkit-border-radius: 20px;
-  -moz-border-radius: 20px;
-  -ms-border-radius: 20px;
-  -o-border-radius: 20px;
-  border-radius: 20px;
-  -webkit-box-shadow: #333333 0px 1px 2px 0px;
-  -moz-box-shadow: #333333 0px 1px 2px 0px;
-  box-shadow: #333333 0px 1px 2px 0px;
-}
-.button-mini-demo-4 span {
-  height: 20px;
-  line-height: 20px;
-  padding-left: 10px;
-  display: block;
-}
-.button-mini-demo-4:hover {
-  text-decoration: none;
-  background: #343434;
-}
-.button-mini-demo-4:active {
-  background: #1b1b1b;
-  -webkit-box-shadow: #999999 0px 0px 3px 3px inset;
-  -moz-box-shadow: #999999 0px 0px 3px 3px inset;
-  box-shadow: #999999 0px 0px 3px 3px inset;
-}
-.button-mini-demo-4 span {
-  color: white;
-  font-size: 11px;
-}
-.ie7 .button-mini-demo-4, .ie8 .button-mini-demo-4, .ie9 .button-mini-demo-4 {
-  background: url('../img/picasso-buttons-mini.png');
-  background-position: right -121px;
-}
-.ie7 .button-mini-demo-4:hover, .ie8 .button-mini-demo-4:hover, .ie9 .button-mini-demo-4:hover {
-  background-position: right -141px;
-}
-.ie7 .button-mini-demo-4 span, .ie8 .button-mini-demo-4 span, .ie9 .button-mini-demo-4 span {
-  background-image: url('../img/picasso-buttons-mini.png');
-  background-color: white;
-  background-position: 0 -121px;
-}
-.ie7 .button-mini-demo-4 span:hover, .ie8 .button-mini-demo-4 span:hover, .ie9 .button-mini-demo-4 span:hover {
-  background-position: 0 -141px;
-}
-.ie9 .button-mini-demo-4 {
-  -webkit-border-radius: none;
-  -moz-border-radius: none;
-  -ms-border-radius: none;
-  -o-border-radius: none;
-  border-radius: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-
 .list-grid-demo-1:before, .list-grid-demo-1:after {
   content: "";
   display: table;
@@ -1402,7 +761,7 @@ body {
   padding: 0 15px;
 }
 .ie7 .nav-demo-1 ul li, .ie8 .nav-demo-1 ul li, .ie9 .nav-demo-1 ul li {
-  height: 46px;
+  height: 40px;
 }
 .nav-demo-1 ul {
   list-style: none;
@@ -1456,40 +815,21 @@ body {
   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;
+  border-top: 1px solid #acacac;
+  border-bottom: 1px solid #acacac;
+  background-color: white;
 }
 .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;
+  background: #f2f2f2;
 }
 .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;
+  border-left: 1px solid #acacac;
 }
 .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;
+  border-right: 1px solid #acacac;
 }
 .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;
+  background: #e6e6e6;
 }
 .ie9 .nav-demo-1 ul {
   -webkit-box-shadow: none;
@@ -1572,13 +912,6 @@ body {
 .ie7 .popup-demo-1 {
   zoom: expression(this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="after" );
 }
-.ie7 .popup-demo-1 .popup-close, .ie8 .popup-demo-1 .popup-close {
-  line-height: 26px;
-  height: 26px;
-  width: 26px;
-  top: -13px;
-  right: -13px;
-}
 .popup-demo-1:after {
   background: black;
   background: rgba(0, 0, 0, 0.7);
@@ -1648,7 +981,7 @@ body {
   filter: alpha(opacity=70);
 }
 .ie8 .popup-demo-1:after {
-  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAEElEQVR4nGNi2MywmYkBCAAJ8gFrYOfxtwAAAABJRU5ErkJggg==');
+  background: magick-canvas(2px, 2px, magick-fill(black) magick-effect(fade, 0.3));
 }
 .ie7 .popup-demo-1 .popup-arrow, .ie8 .popup-demo-1 .popup-arrow {
   filter: alpha(opacity=70);
@@ -1665,12 +998,6 @@ body {
 .ie7 .popup-demo-1 .popup-arrow-right, .ie8 .popup-demo-1 .popup-arrow-right {
   border-left: 10px solid black;
 }
-.ie7 .popup-demo-1 .popup-close, .ie8 .popup-demo-1 .popup-close {
-  border-width: 0;
-  background-color: transparent;
-  background: url('../img/picasso-popup.png');
-  background-position: 0 -1px;
-}
 
 .popup-demo-2 {
   padding: 10px;
@@ -1731,13 +1058,6 @@ body {
 .ie7 .popup-demo-2 {
   zoom: expression(this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="after" );
 }
-.ie7 .popup-demo-2 .popup-close, .ie8 .popup-demo-2 .popup-close {
-  line-height: 26px;
-  height: 26px;
-  width: 26px;
-  top: -13px;
-  right: -13px;
-}
 .popup-demo-2:after {
   background: gray;
   background: rgba(128, 128, 128, 0.5);
@@ -1807,7 +1127,7 @@ body {
   filter: alpha(opacity=50);
 }
 .ie8 .popup-demo-2:after {
-  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAD0lEQVR4nGNqAAImBiAAAA8oAgWZ/tnVAAAAAElFTkSuQmCC');
+  background: magick-canvas(2px, 2px, magick-fill(gray) magick-effect(fade, 0.5));
 }
 .ie7 .popup-demo-2 .popup-arrow, .ie8 .popup-demo-2 .popup-arrow {
   filter: alpha(opacity=50);
@@ -1824,12 +1144,6 @@ body {
 .ie7 .popup-demo-2 .popup-arrow-right, .ie8 .popup-demo-2 .popup-arrow-right {
   border-left: 10px solid gray;
 }
-.ie7 .popup-demo-2 .popup-close, .ie8 .popup-demo-2 .popup-close {
-  border-width: 0;
-  background-color: transparent;
-  background: url('../img/picasso-popup.png');
-  background-position: 0 -27px;
-}
 
 .bubble-demo-1 {
   margin: 0 0 30px 0;
@@ -2625,7 +1939,7 @@ body {
 
 .despegar-warning-border-demo {
   padding: 10px;
-  background: #ff9900;
+  background: #ffcc33;
 }
 
 .despegar-fill-bg-demo {
@@ -2633,6 +1947,16 @@ body {
   background: #84a8fb;
 }
 
+.despegar-body-bg-demo {
+  padding: 10px;
+  background: #e9eaee;
+}
+
+.despegar-promo-text-demo {
+  padding: 10px;
+  background: #008c23;
+}
+
 .clusters-demo-1 .cluster {
   margin-bottom: 15px;
   border: 1px solid #cccccc;