picasso 0.2.3 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +1 -0
- data/README.md +216 -3
- data/docs/_picasso.html +38 -0
- data/docs/config.rb +1 -1
- data/docs/css/{style.css → picasso-docs.css} +797 -1331
- data/docs/img/picasso-buttons-glossy.png +0 -0
- data/docs/img/picasso-nav.png +0 -0
- data/docs/img/picasso-popup.png +0 -0
- data/docs/index.html +201 -198
- data/docs/picasso-_components.html +83 -0
- data/docs/picasso-_despegar.html +34 -0
- data/docs/picasso-_utils.html +40 -0
- data/docs/picasso-components-_accordions.html +183 -0
- data/docs/picasso-components-_arrows.html +124 -0
- data/docs/picasso-components-_bubbles.html +142 -0
- data/docs/picasso-components-_buttons.html +38 -0
- data/docs/picasso-components-_inputs.html +122 -0
- data/docs/picasso-components-_list-grids.html +253 -0
- data/docs/picasso-components-_mini-tooltips.html +152 -0
- data/docs/picasso-components-_navs.html +360 -0
- data/docs/picasso-components-_pagination.html +258 -0
- data/docs/picasso-components-_popups.html +359 -0
- data/docs/picasso-components-buttons-_3d.html +284 -0
- data/docs/picasso-components-buttons-_glossy.html +290 -0
- data/docs/picasso-components-buttons-_mini.html +224 -0
- data/docs/picasso-despegar-_variables.html +145 -0
- data/docs/picasso-utils-_clearfix.html +56 -0
- data/docs/picasso-utils-_grid.html +390 -0
- data/docs/picasso-utils-_ie.html +50 -0
- data/docs/picasso-utils-_sprite.html +62 -0
- data/docs/resources/docs.jade +46 -0
- data/docs/resources/docs.js +52 -0
- data/docs/sass/{style.scss → picasso-docs.scss} +71 -96
- data/lib/picasso/version.rb +1 -1
- data/picasso.gemspec +1 -1
- data/stylesheets/_picasso.scss +14 -0
- data/stylesheets/picasso/_components.scss +54 -0
- data/stylesheets/picasso/_despegar.scss +12 -0
- data/stylesheets/picasso/_utils.scss +17 -1
- data/stylesheets/picasso/components/_accordions.scss +52 -2
- data/stylesheets/picasso/components/_arrows.scss +39 -2
- data/stylesheets/picasso/components/_bubbles.scss +36 -2
- data/stylesheets/picasso/components/_buttons.scss +14 -0
- data/stylesheets/picasso/components/_inputs.scss +41 -2
- data/stylesheets/picasso/components/_list-grids.scss +84 -3
- data/stylesheets/picasso/components/_mini-tooltips.scss +128 -0
- data/stylesheets/picasso/components/_navs.scss +52 -2
- data/stylesheets/picasso/components/_pagination.scss +63 -2
- data/stylesheets/picasso/components/_popups.scss +73 -2
- data/stylesheets/picasso/components/buttons/_3d.scss +75 -2
- data/stylesheets/picasso/components/buttons/_glossy.scss +41 -2
- data/stylesheets/picasso/components/buttons/_mini.scss +44 -2
- data/stylesheets/picasso/despegar/_variables.scss +61 -60
- data/stylesheets/picasso/utils/_clearfix.scss +24 -16
- data/stylesheets/picasso/utils/_grid.scss +269 -0
- data/stylesheets/picasso/utils/_ie.scss +23 -28
- data/stylesheets/picasso/utils/_sprite.scss +15 -3
- metadata +34 -50
- data/docs/accordions.html +0 -276
- data/docs/all.html +0 -1588
- data/docs/arrows.html +0 -233
- data/docs/bubbles.html +0 -231
- data/docs/build/manifest.json +0 -21
- data/docs/build/md/changelog.md +0 -53
- data/docs/build/md/components/accordions.md +0 -97
- data/docs/build/md/components/arrows.md +0 -53
- data/docs/build/md/components/bubbles.md +0 -57
- data/docs/build/md/components/buttons.md +0 -205
- data/docs/build/md/components/components.md +0 -37
- data/docs/build/md/components/inputs.md +0 -73
- data/docs/build/md/components/list-grids.md +0 -180
- data/docs/build/md/components/navs.md +0 -107
- data/docs/build/md/components/pagination.md +0 -112
- data/docs/build/md/components/popups.md +0 -162
- data/docs/build/md/despegar/despegar.md +0 -200
- data/docs/build/md/intro.md +0 -59
- data/docs/build/md/mejoras.md +0 -69
- data/docs/build/md/todo.md +0 -14
- data/docs/build/md/utils/utils.md +0 -62
- data/docs/build/templates/index.html +0 -37
- data/docs/build/templates/layout.html +0 -68
- data/docs/build/templates/page.html +0 -3
- data/docs/buttons.html +0 -357
- data/docs/changelog.html +0 -264
- data/docs/components.html +0 -220
- data/docs/css/github.css +0 -88
- data/docs/css/markdown.css +0 -108
- data/docs/despegar.html +0 -377
- data/docs/inputs.html +0 -248
- data/docs/intro.html +0 -233
- data/docs/js/docs.js +0 -32
- data/docs/js/rainbow-custom.min.js +0 -13
- data/docs/js/viewer.js +0 -12
- data/docs/list-grids.html +0 -350
- data/docs/mejoras.html +0 -250
- data/docs/navs.html +0 -281
- data/docs/pagination.html +0 -286
- data/docs/popups.html +0 -337
- data/docs/todo.html +0 -204
- data/docs/utils.html +0 -233
Binary file
|
data/docs/img/picasso-nav.png
CHANGED
Binary file
|
data/docs/img/picasso-popup.png
CHANGED
Binary file
|
data/docs/index.html
CHANGED
@@ -1,233 +1,236 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<!--[if IE 7]> <html class="ie7"> <![endif]-->
|
3
|
-
|
4
|
-
|
5
|
-
|
1
|
+
<!DOCTYPE html><!--[if IE 7]><html class="ie7"></html><![endif]--><!--[if IE 8]><html class="ie8"></html><![endif]--><!--[if IE 9]><html class="ie9"></html><![endif]--><!-- [if gt IE 9] <!--><html><head><title>Picasso. Framework CSS/Sass.
|
2
|
+
</title><meta charset="utf-8"><style>.styledocco-docs img{width:100%}.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,#08c),color-stop(100%,#0077b3)),-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#069),color-stop(100%,#00334d));background:-webkit-linear-gradient(#08c,#0077b3),-webkit-linear-gradient(#069,#00334d);background:-moz-linear-gradient(#08c,#0077b3),-moz-linear-gradient(#069,#00334d);background:-o-linear-gradient(#08c,#0077b3),-o-linear-gradient(#069,#00334d);background:linear-gradient(#08c,#0077b3),linear-gradient(#069,#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%,#6cf),color-stop(100%,#000)) 50%;background:-webkit-linear-gradient(#6cf 15%,#000) 50%;background:-moz-linear-gradient(#6cf 15%,#000) 50%;background:-o-linear-gradient(#6cf 15%,#000) 50%;background:linear-gradient(#6cf 15%,#000) 50%}.button-glossy-demo-2:before{background:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#08c),color-stop(100%,#0077b3)),-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#069),color-stop(100%,#00334d));background:-webkit-linear-gradient(#08c,#0077b3),-webkit-linear-gradient(#069,#00334d);background:-moz-linear-gradient(#08c,#0077b3),-moz-linear-gradient(#069,#00334d);background:-o-linear-gradient(#08c,#0077b3),-o-linear-gradient(#069,#00334d);background:linear-gradient(#08c,#0077b3),linear-gradient(#069,#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%,#08c));background:-webkit-linear-gradient(#1ab2ff,#0070a8,#08c);background:-moz-linear-gradient(#1ab2ff,#0070a8,#08c);background:-o-linear-gradient(#1ab2ff,#0070a8,#08c);background:linear-gradient(#1ab2ff,#0070a8,#08c)}.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%,#08c));background:-webkit-linear-gradient(#1ab2ff,#0070a8,#08c);background:-moz-linear-gradient(#1ab2ff,#0070a8,#08c);background:-o-linear-gradient(#1ab2ff,#0070a8,#08c);background:linear-gradient(#1ab2ff,#0070a8,#08c)}.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;line-height:2.2em;color:white;border:1px solid #c00811;font-family:sans-serif;font-size:13px;text-decoration:none;text-align:center;cursor:pointer;text-shadow:0 1px 0 black;-webkit-border-radius:.4em;-moz-border-radius:.4em;-ms-border-radius:.4em;-o-border-radius:.4em;border-radius:.4em}.button-3d-demo-1:active{position:relative;top:1px}.button-3d-demo-1.disabled:active{position:static}.button-3d-demo-1 span{display:block;padding:0 13px}.button-3d-demo-1:visited{color:white}.button-3d-demo-1:hover{text-decoration:none;color:white}.button-3d-demo-1 span{background-color:#f73741;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#f73741),color-stop(100%,#8f060d));background-image:-webkit-linear-gradient(#f73741,#8f060d);background-image:-moz-linear-gradient(#f73741,#8f060d);background-image:-o-linear-gradient(#f73741,#8f060d);background-image:linear-gradient(#f73741,#8f060d);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5)}.button-3d-demo-1 span:hover{background-color:#ff2f3a;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,rgba(255,255,255,0)),color-stop(100%,#c00811));background-image:-webkit-linear-gradient(rgba(255,255,255,0),#c00811);background-image:-moz-linear-gradient(rgba(255,255,255,0),#c00811);background-image:-o-linear-gradient(rgba(255,255,255,0),#c00811);background-image:linear-gradient(rgba(255,255,255,0),#c00811);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #ff2f3a;-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #ff2f3a;box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #ff2f3a}.button-3d-demo-1 span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#f73741),color-stop(100%,#8f060d));background-image:-webkit-linear-gradient(#f73741,#8f060d);background-image:-moz-linear-gradient(#f73741,#8f060d);background-image:-o-linear-gradient(#f73741,#8f060d);background-image:linear-gradient(#f73741,#8f060d);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75)}.button-3d-demo-1.disabled{border:1px solid #755354;cursor:not-allowed;color:white}.button-3d-demo-1.disabled span,.button-3d-demo-1.disabled span:hover,.button-3d-demo-1.disabled span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#979797),color-stop(100%,#4b4b4b));background-image:-webkit-linear-gradient(#979797,#4b4b4b);background-image:-moz-linear-gradient(#979797,#4b4b4b);background-image:-o-linear-gradient(#979797,#4b4b4b);background-image:linear-gradient(#979797,#4b4b4b);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75)}.ie7 .button-3d-demo-1 span,.ie8 .button-3d-demo-1 span,.ie9 .button-3d-demo-1 span{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00F73741',endColorstr='#FF8F060D')}.ie7 .button-3d-demo-1 span:hover,.ie8 .button-3d-demo-1 span:hover,.ie9 .button-3d-demo-1 span:hover{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00FFFFFF',endColorstr='#FFC00811')}.ie7 .button-3d-demo-1 span:active,.ie8 .button-3d-demo-1 span:active,.ie9 .button-3d-demo-1 span:active{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00F73741',endColorstr='#FF8F060D')}.ie7 .button-3d-demo-1.disabled span,.ie7 .button-3d-demo-1.disabled span:hover,.ie7 .button-3d-demo-1.disabled span:active,.ie8 .button-3d-demo-1.disabled span,.ie8 .button-3d-demo-1.disabled span:hover,.ie8 .button-3d-demo-1.disabled span:active,.ie9 .button-3d-demo-1.disabled span,.ie9 .button-3d-demo-1.disabled span:hover,.ie9 .button-3d-demo-1.disabled span:active{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FF979797',endColorstr='#FF4B4B4B')}.button-3d-demo-2{overflow:hidden;display:inline-block;line-height:2.2em;color:white;border:1px solid #046;font-family:sans-serif;font-size:13px;text-decoration:none;text-align:center;cursor:pointer;text-shadow:0 1px 0 black;-webkit-border-radius:.4em;-moz-border-radius:.4em;-ms-border-radius:.4em;-o-border-radius:.4em;border-radius:.4em}.button-3d-demo-2:active{position:relative;top:1px}.button-3d-demo-2.disabled:active{position:static}.button-3d-demo-2 span{display:block;padding:0 13px}.button-3d-demo-2:visited{color:white}.button-3d-demo-2:hover{text-decoration:none;color:white}.button-3d-demo-2 span{background-color:#08c;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#08c),color-stop(100%,#023));background-image:-webkit-linear-gradient(#08c,#023);background-image:-moz-linear-gradient(#08c,#023);background-image:-o-linear-gradient(#08c,#023);background-image:linear-gradient(#08c,#023);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5)}.button-3d-demo-2 span:hover{background-color:#08c;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,rgba(255,255,255,0)),color-stop(100%,#046));background-image:-webkit-linear-gradient(rgba(255,255,255,0),#046);background-image:-moz-linear-gradient(rgba(255,255,255,0),#046);background-image:-o-linear-gradient(rgba(255,255,255,0),#046);background-image:linear-gradient(rgba(255,255,255,0),#046);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #08c;-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #08c;box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #08c}.button-3d-demo-2 span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#08c),color-stop(100%,#023));background-image:-webkit-linear-gradient(#08c,#023);background-image:-moz-linear-gradient(#08c,#023);background-image:-o-linear-gradient(#08c,#023);background-image:linear-gradient(#08c,#023);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75)}.button-3d-demo-2.disabled{border:1px solid #755354;cursor:not-allowed;color:white}.button-3d-demo-2.disabled span,.button-3d-demo-2.disabled span:hover,.button-3d-demo-2.disabled span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#979797),color-stop(100%,#4b4b4b));background-image:-webkit-linear-gradient(#979797,#4b4b4b);background-image:-moz-linear-gradient(#979797,#4b4b4b);background-image:-o-linear-gradient(#979797,#4b4b4b);background-image:linear-gradient(#979797,#4b4b4b);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75)}.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')}.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')}.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')}.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;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FF979797',endColorstr='#FF4B4B4B')}.button-3d-demo-3{overflow:hidden;display:inline-block;line-height:2.2em;color:white;border:1px solid #e08505;font-family:sans-serif;font-size:13px;text-decoration:none;text-align:center;cursor:pointer;text-shadow:0 1px 0 black;-webkit-border-radius:.4em;-moz-border-radius:.4em;-ms-border-radius:.4em;-o-border-radius:.4em;border-radius:.4em}.button-3d-demo-3:active{position:relative;top:1px}.button-3d-demo-3.disabled:active{position:static}.button-3d-demo-3 span{display:block;padding:0 13px}.button-3d-demo-3:visited{color:white}.button-3d-demo-3:hover{text-decoration:none;color:white}.button-3d-demo-3 span{background-color:#fbb450;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#fbb450),color-stop(100%,#ae6704));background-image:-webkit-linear-gradient(#fbb450,#ae6704);background-image:-moz-linear-gradient(#fbb450,#ae6704);background-image:-o-linear-gradient(#fbb450,#ae6704);background-image:linear-gradient(#fbb450,#ae6704);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5)}.button-3d-demo-3 span:hover{background-color:#ffb54c;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,rgba(255,255,255,0)),color-stop(100%,#e08505));background-image:-webkit-linear-gradient(rgba(255,255,255,0),#e08505);background-image:-moz-linear-gradient(rgba(255,255,255,0),#e08505);background-image:-o-linear-gradient(rgba(255,255,255,0),#e08505);background-image:linear-gradient(rgba(255,255,255,0),#e08505);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #ffb54c;-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #ffb54c;box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #ffb54c}.button-3d-demo-3 span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#fbb450),color-stop(100%,#ae6704));background-image:-webkit-linear-gradient(#fbb450,#ae6704);background-image:-moz-linear-gradient(#fbb450,#ae6704);background-image:-o-linear-gradient(#fbb450,#ae6704);background-image:linear-gradient(#fbb450,#ae6704);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75)}.button-3d-demo-3.disabled{border:1px solid #755354;cursor:not-allowed;color:white}.button-3d-demo-3.disabled span,.button-3d-demo-3.disabled span:hover,.button-3d-demo-3.disabled span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#979797),color-stop(100%,#4b4b4b));background-image:-webkit-linear-gradient(#979797,#4b4b4b);background-image:-moz-linear-gradient(#979797,#4b4b4b);background-image:-o-linear-gradient(#979797,#4b4b4b);background-image:linear-gradient(#979797,#4b4b4b);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75)}.ie7 .button-3d-demo-3 span,.ie8 .button-3d-demo-3 span,.ie9 .button-3d-demo-3 span{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00FBB450',endColorstr='#FFAE6704')}.ie7 .button-3d-demo-3 span:hover,.ie8 .button-3d-demo-3 span:hover,.ie9 .button-3d-demo-3 span:hover{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00FFFFFF',endColorstr='#FFE08505')}.ie7 .button-3d-demo-3 span:active,.ie8 .button-3d-demo-3 span:active,.ie9 .button-3d-demo-3 span:active{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00FBB450',endColorstr='#FFAE6704')}.ie7 .button-3d-demo-3.disabled span,.ie7 .button-3d-demo-3.disabled span:hover,.ie7 .button-3d-demo-3.disabled span:active,.ie8 .button-3d-demo-3.disabled span,.ie8 .button-3d-demo-3.disabled span:hover,.ie8 .button-3d-demo-3.disabled span:active,.ie9 .button-3d-demo-3.disabled span,.ie9 .button-3d-demo-3.disabled span:hover,.ie9 .button-3d-demo-3.disabled span:active{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FF979797',endColorstr='#FF4B4B4B')}.button-3d-demo-4{overflow:hidden;display:block;line-height:2.2em;color:white;border:1px solid #00132e;font-family:sans-serif;font-size:24px;text-decoration:none;text-align:center;cursor:pointer;text-shadow:0 1px 0 black;-webkit-border-radius:.4em;-moz-border-radius:.4em;-ms-border-radius:.4em;-o-border-radius:.4em;border-radius:.4em}.button-3d-demo-4:active{position:relative;top:1px}.button-3d-demo-4.disabled:active{position:static}.button-3d-demo-4 span{display:block;padding:0 24px}.button-3d-demo-4:visited{color:white}.button-3d-demo-4:hover{text-decoration:none;color:white}.button-3d-demo-4 span{background-color:#013d93;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#013d93),color-stop(100%,#000));background-image:-webkit-linear-gradient(#013d93,#000);background-image:-moz-linear-gradient(#013d93,#000);background-image:-o-linear-gradient(#013d93,#000);background-image:linear-gradient(#013d93,#000);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5)}.button-3d-demo-4 span:hover{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 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #003d94;-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #003d94;box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #003d94}.button-3d-demo-4 span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#013d93),color-stop(100%,#000));background-image:-webkit-linear-gradient(#013d93,#000);background-image:-moz-linear-gradient(#013d93,#000);background-image:-o-linear-gradient(#013d93,#000);background-image:linear-gradient(#013d93,#000);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75)}.button-3d-demo-4.disabled{border:1px solid #755354;cursor:not-allowed;color:white}.button-3d-demo-4.disabled span,.button-3d-demo-4.disabled span:hover,.button-3d-demo-4.disabled span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#979797),color-stop(100%,#4b4b4b));background-image:-webkit-linear-gradient(#979797,#4b4b4b);background-image:-moz-linear-gradient(#979797,#4b4b4b);background-image:-o-linear-gradient(#979797,#4b4b4b);background-image:linear-gradient(#979797,#4b4b4b);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75)}.ie7 .button-3d-demo-4 span,.ie8 .button-3d-demo-4 span,.ie9 .button-3d-demo-4 span{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00013D93',endColorstr='#FF000000')}.ie7 .button-3d-demo-4 span:hover,.ie8 .button-3d-demo-4 span:hover,.ie9 .button-3d-demo-4 span:hover{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00FFFFFF',endColorstr='#FF00132E')}.ie7 .button-3d-demo-4 span:active,.ie8 .button-3d-demo-4 span:active,.ie9 .button-3d-demo-4 span:active{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00013D93',endColorstr='#FF000000')}.ie7 .button-3d-demo-4.disabled span,.ie7 .button-3d-demo-4.disabled span:hover,.ie7 .button-3d-demo-4.disabled span:active,.ie8 .button-3d-demo-4.disabled span,.ie8 .button-3d-demo-4.disabled span:hover,.ie8 .button-3d-demo-4.disabled span:active,.ie9 .button-3d-demo-4.disabled span,.ie9 .button-3d-demo-4.disabled span:hover,.ie9 .button-3d-demo-4.disabled span:active{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FF979797',endColorstr='#FF4B4B4B')}.button-3d-demo-5{overflow:hidden;display:inline-block;line-height:1.75em;color:#013d93;border:1px solid #bbb;font-family:sans-serif;font-size:11px;text-decoration:none;text-align:center;cursor:pointer;text-shadow:0 1px 0 #b5b5b5;-webkit-border-radius:1.1em;-moz-border-radius:1.1em;-ms-border-radius:1.1em;-o-border-radius:1.1em;border-radius:1.1em}.button-3d-demo-5:active{position:relative;top:1px}.button-3d-demo-5.disabled:active{position:static}.button-3d-demo-5 span{display:block;padding:0 11px}.button-3d-demo-5:visited{color:#013d93}.button-3d-demo-5:hover{text-decoration:none;color:#013d93}.button-3d-demo-5 span{background-color:#eee;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#eee),color-stop(100%,#a2a2a2));background-image:-webkit-linear-gradient(#eee,#a2a2a2);background-image:-moz-linear-gradient(#eee,#a2a2a2);background-image:-o-linear-gradient(#eee,#a2a2a2);background-image:linear-gradient(#eee,#a2a2a2);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5)}.button-3d-demo-5 span:hover{background-color:#f0ecec;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,rgba(255,255,255,0)),color-stop(100%,#bbb));background-image:-webkit-linear-gradient(rgba(255,255,255,0),#bbb);background-image:-moz-linear-gradient(rgba(255,255,255,0),#bbb);background-image:-o-linear-gradient(rgba(255,255,255,0),#bbb);background-image:linear-gradient(rgba(255,255,255,0),#bbb);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #f0ecec;-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #f0ecec;box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #f0ecec}.button-3d-demo-5 span:active{text-shadow:0 -1px 0 #b5b5b5;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#eee),color-stop(100%,#a2a2a2));background-image:-webkit-linear-gradient(#eee,#a2a2a2);background-image:-moz-linear-gradient(#eee,#a2a2a2);background-image:-o-linear-gradient(#eee,#a2a2a2);background-image:linear-gradient(#eee,#a2a2a2);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75)}.button-3d-demo-5.disabled{border:1px solid #755354;cursor:not-allowed;color:white}.button-3d-demo-5.disabled span,.button-3d-demo-5.disabled span:hover,.button-3d-demo-5.disabled span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#979797),color-stop(100%,#4b4b4b));background-image:-webkit-linear-gradient(#979797,#4b4b4b);background-image:-moz-linear-gradient(#979797,#4b4b4b);background-image:-o-linear-gradient(#979797,#4b4b4b);background-image:linear-gradient(#979797,#4b4b4b);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75)}.ie7 .button-3d-demo-5 span,.ie8 .button-3d-demo-5 span,.ie9 .button-3d-demo-5 span{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00EEEEEE',endColorstr='#FFA2A2A2')}.ie7 .button-3d-demo-5 span:hover,.ie8 .button-3d-demo-5 span:hover,.ie9 .button-3d-demo-5 span:hover{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00FFFFFF',endColorstr='#FFBBBBBB')}.ie7 .button-3d-demo-5 span:active,.ie8 .button-3d-demo-5 span:active,.ie9 .button-3d-demo-5 span:active{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00EEEEEE',endColorstr='#FFA2A2A2')}.ie7 .button-3d-demo-5.disabled span,.ie7 .button-3d-demo-5.disabled span:hover,.ie7 .button-3d-demo-5.disabled span:active,.ie8 .button-3d-demo-5.disabled span,.ie8 .button-3d-demo-5.disabled span:hover,.ie8 .button-3d-demo-5.disabled span:active,.ie9 .button-3d-demo-5.disabled span,.ie9 .button-3d-demo-5.disabled span:hover,.ie9 .button-3d-demo-5.disabled span:active{*zoom:1;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:#333 0 1px 2px 0;-moz-box-shadow:#333 0 1px 2px 0;box-shadow:#333 0 1px 2px 0}.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:#999 0 0 3px 3px inset;-moz-box-shadow:#999 0 0 3px 3px inset;box-shadow:#999 0 0 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,#08c),color-stop(50%,#0077b3),color-stop(51%,#069),color-stop(100%,#005580));background:-webkit-linear-gradient(top,#08c 0,#0077b3 50%,#069 51%,#005580 100%);background:-moz-linear-gradient(top,#08c 0,#0077b3 50%,#069 51%,#005580 100%);background:-o-linear-gradient(top,#08c 0,#0077b3 50%,#069 51%,#005580 100%);background:linear-gradient(top,#08c 0,#0077b3 50%,#069 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:#333 0 1px 2px 0;-moz-box-shadow:#333 0 1px 2px 0;box-shadow:#333 0 1px 2px 0}.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:#999 0 0 3px 3px inset;-moz-box-shadow:#999 0 0 3px 3px inset;box-shadow:#999 0 0 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:#333 0 1px 2px 0;-moz-box-shadow:#333 0 1px 2px 0;box-shadow:#333 0 1px 2px 0}.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:#999 0 0 3px 3px inset;-moz-box-shadow:#999 0 0 3px 3px inset;box-shadow:#999 0 0 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:#333 0 1px 2px 0;-moz-box-shadow:#333 0 1px 2px 0;box-shadow:#333 0 1px 2px 0}.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:#999 0 0 3px 3px inset;-moz-box-shadow:#999 0 0 3px 3px inset;box-shadow:#999 0 0 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}.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:0;margin:0;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 #ccc;border-bottom:1px solid #ccc;border-right:1px solid #ccc}.list-grid-demo-1 ul:first-child{border-left:1px solid #ccc}.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 #ccc}.list-grid-demo-1 ul li:nth-child(odd){background:none repeat scroll 0 0 #eee}.list-grid-demo-1 ul li:nth-child(even){background:none repeat scroll 0 0 white}.list-grid-demo-1 ul li.cell-hover: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 #eee}.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 #eee}.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,#fff),color-stop(100%,#e6e6e6));background-image:-webkit-linear-gradient(#fff,#e6e6e6);background-image:-moz-linear-gradient(#fff,#e6e6e6);background-image:-o-linear-gradient(#fff,#e6e6e6);background-image:linear-gradient(#fff,#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,#fff),color-stop(100%,#f2f2f2));background-image:-webkit-linear-gradient(#fff,#f2f2f2);background-image:-moz-linear-gradient(#fff,#f2f2f2);background-image:-o-linear-gradient(#fff,#f2f2f2);background-image:linear-gradient(#fff,#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%,#fff));background-image:-webkit-linear-gradient(#e6e6e6,#fff);background-image:-moz-linear-gradient(#e6e6e6,#fff);background-image:-o-linear-gradient(#e6e6e6,#fff);background-image:linear-gradient(#e6e6e6,#fff)}.ie7 .nav-demo-1 ul li,.ie8 .nav-demo-1 ul li,.ie9 .nav-demo-1 ul li{border-left:0;border-top:0;border-bottom:0;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:0}.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}.ie9 .nav-demo-1 ul{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ie9 .nav-demo-1 ul li:first-child{-moz-border-radius-topleft:none;-webkit-border-top-left-radius:none;border-top-left-radius:none;-moz-border-radius-bottomleft:none;-webkit-border-bottom-left-radius:none;border-bottom-left-radius:none}.ie9 .nav-demo-1 ul li:last-child{-moz-border-radius-topright:none;-webkit-border-top-right-radius:none;border-top-right-radius:none;-moz-border-radius-bottomright:none;-webkit-border-bottom-right-radius:none;border-bottom-right-radius:none;border:0}.picasso-_popups .styledocco-example{position:relative;height:150px}.popup-demo-1{padding:10px;position:absolute}.popup-demo-1:after,.ie7 .popup-demo-1 .after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.popup-demo-1 .popup-header h4{line-height:20px;padding:10px}.popup-demo-1 .popup-container{z-index:1;position:relative}.popup-demo-1 .popup-arrow{position:absolute;height:0;width:0}.popup-demo-1 .popup-arrow-bottom{bottom:-10px;left:10px}.popup-demo-1 .popup-arrow-top{top:-10px;left:10px}.popup-demo-1 .popup-arrow-left{left:-10px;top:10px}.popup-demo-1 .popup-arrow-right{right:-10px;top:10px}.popup-demo-1 .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{line-height:23px;height:26px;width:26px;top:-13px;right:-13px}.ie7 .popup-demo-1{zoom:expression(this.runtimeStyle.zoom="1",this.appendChild(document.createElement("i")).className="after")}.popup-demo-1:after,.ie7 .popup-demo-1 .after{background:rgba(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,.5) 0 0 10px;-moz-box-shadow:rgba(0,0,0,.5) 0 0 10px;box-shadow:rgba(0,0,0,.5) 0 0 10px}.popup-demo-1 .popup-header{background:none repeat scroll 0 0 #f7f7f7;display:block}.popup-demo-1 .popup-header h4{margin:0;color:#003770;font-family:sans-serif;font-size:16px;font-weight:normal}.popup-demo-1 .popup-content{background:white;border:1px solid transparent}.popup-demo-1 .popup-arrow-bottom{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(0,0,0,.7)}.popup-demo-1 .popup-arrow-top{border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid rgba(0,0,0,.7)}.popup-demo-1 .popup-arrow-left{border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid rgba(0,0,0,.7)}.popup-demo-1 .popup-arrow-right{border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid rgba(0,0,0,.7)}.popup-demo-1 .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,.5) 0 0 10px;-moz-box-shadow:rgba(0,0,0,.5) 0 0 10px;box-shadow:rgba(0,0,0,.5) 0 0 10px}.ie7 .popup-demo-1:after,.ie7 .popup-demo-1 .after,.ie8 .popup-demo-1:after,.ie8 .popup-demo-1 .after{background:black;filter:alpha(opacity=70)}.ie7 .popup-demo-1 .popup-arrow,.ie8 .popup-demo-1 .popup-arrow{filter:alpha(opacity=70)}.ie7 .popup-demo-1 .popup-arrow-bottom,.ie8 .popup-demo-1 .popup-arrow-bottom{border-top:10px solid black}.ie7 .popup-demo-1 .popup-arrow-top,.ie8 .popup-demo-1 .popup-arrow-top{border-bottom:10px solid black}.ie7 .popup-demo-1 .popup-arrow-left,.ie8 .popup-demo-1 .popup-arrow-left{border-right:10px solid black}.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-image:url('../img/picasso-popup.png');background-position:0 -1px}.popup-demo-2{padding:10px;position:absolute}.popup-demo-2:after,.ie7 .popup-demo-2 .after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.popup-demo-2 .popup-header h4{line-height:20px;padding:10px}.popup-demo-2 .popup-container{z-index:1;position:relative}.popup-demo-2 .popup-arrow{position:absolute;height:0;width:0}.popup-demo-2 .popup-arrow-bottom{bottom:-10px;left:10px}.popup-demo-2 .popup-arrow-top{top:-10px;left:10px}.popup-demo-2 .popup-arrow-left{left:-10px;top:10px}.popup-demo-2 .popup-arrow-right{right:-10px;top:10px}.popup-demo-2 .popup-close{position:absolute;z-index:10;text-align:center;line-height:17px;height:20px;width:20px;top:-13px;right:-13px}.ie7 .popup-demo-2 .popup-close,.ie8 .popup-demo-2 .popup-close{line-height:23px;height:26px;width:26px;top:-13px;right:-13px}.ie7 .popup-demo-2{zoom:expression(this.runtimeStyle.zoom="1",this.appendChild(document.createElement("i")).className="after")}.popup-demo-2:after,.ie7 .popup-demo-2 .after{background:rgba(1,61,147,.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,.5) 0 0 20px;-moz-box-shadow:rgba(0,0,0,.5) 0 0 20px;box-shadow:rgba(0,0,0,.5) 0 0 20px}.popup-demo-2 .popup-header{background:rgba(1,61,147,.7);display:block}.popup-demo-2 .popup-header h4{margin:0;color:white;font-family:sans-serif;font-size:16px;font-weight:normal}.popup-demo-2 .popup-content{background:black;border:1px solid transparent}.popup-demo-2 .popup-arrow-bottom{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(1,61,147,.7)}.popup-demo-2 .popup-arrow-top{border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid rgba(1,61,147,.7)}.popup-demo-2 .popup-arrow-left{border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid rgba(1,61,147,.7)}.popup-demo-2 .popup-arrow-right{border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid rgba(1,61,147,.7)}.popup-demo-2 .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,.5) 0 0 20px;-moz-box-shadow:rgba(0,0,0,.5) 0 0 20px;box-shadow:rgba(0,0,0,.5) 0 0 20px}.ie7 .popup-demo-2:after,.ie7 .popup-demo-2 .after,.ie8 .popup-demo-2:after,.ie8 .popup-demo-2 .after{background:#013d93;filter:alpha(opacity=70)}.ie7 .popup-demo-2 .popup-arrow,.ie8 .popup-demo-2 .popup-arrow{filter:alpha(opacity=70)}.ie7 .popup-demo-2 .popup-arrow-bottom,.ie8 .popup-demo-2 .popup-arrow-bottom{border-top:10px solid #013d93}.ie7 .popup-demo-2 .popup-arrow-top,.ie8 .popup-demo-2 .popup-arrow-top{border-bottom:10px solid #013d93}.ie7 .popup-demo-2 .popup-arrow-left,.ie8 .popup-demo-2 .popup-arrow-left{border-right:10px solid #013d93}.ie7 .popup-demo-2 .popup-arrow-right,.ie8 .popup-demo-2 .popup-arrow-right{border-left:10px solid #013d93}.ie7 .popup-demo-2 .popup-close,.ie8 .popup-demo-2 .popup-close{border-width:0;background-color:transparent;background-image:url('../img/picasso-popup.png');background-position:0 -27px}.bubble-demo-1{padding:10px;display:block;width:auto;position:relative;background:#eee;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}.bubble-demo-1:after,.ie7 .bubble-demo-1 .after{content:"";position:absolute;bottom:-15px;right:20px;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:#999}.bubble-demo-1:after,.ie7 .bubble-demo-1 .after{border-left:10px solid transparent;border-right:10px solid transparent;border-top:15px solid #eee}.accordion-demo-1 .accordion-header{position:relative;height:20px;padding:0 10px;display:block}.accordion-demo-1 .accordion-header h4{line-height:20px;margin:0}.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 #ccc}.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:#eee;border:1px solid #ccc;-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:0;border:0}.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:0}.pagination-demo-1 .prev:hover,.pagination-demo-1 .next:hover{text-decoration:underline}.pagination-demo-1 .active a,.pagination-demo-1 .dots a{color:#888;cursor:default;text-decoration:none}.pagination-demo-1 .active a:hover,.pagination-demo-1 .dots a:hover{color:#888;text-decoration:none}.text-input-demo-1{width:200px;height:20px;line-height:20px;padding:1px;border:1px solid #ddd;border-top:1px solid #919191;color:#333;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,.2) inset;-moz-box-shadow:0 1px 2px 0 rgba(0,0,0,.2) inset;box-shadow:0 1px 2px 0 rgba(0,0,0,.2) inset}.text-input-demo-1:focus{outline:0;border:1px solid #319fda;-webkit-box-shadow:rgba(0,0,0,.2) 0 1px 2px 0 inset,#01a9db 0 0 2px 0;-moz-box-shadow:rgba(0,0,0,.2) 0 1px 2px 0 inset,#01a9db 0 0 2px 0;box-shadow:rgba(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 #ddd;border-top:1px solid #919191;color:#333;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,.2) inset;-moz-box-shadow:0 1px 2px 0 rgba(0,0,0,.2) inset;box-shadow:0 1px 2px 0 rgba(0,0,0,.2) inset}.select-demo-1:focus{outline:0;border:1px solid #319fda;-webkit-box-shadow:rgba(0,0,0,.2) 0 1px 2px 0 inset,#01a9db 0 0 2px 0;-moz-box-shadow:rgba(0,0,0,.2) 0 1px 2px 0 inset,#01a9db 0 0 2px 0;box-shadow:rgba(0,0,0,.2) 0 1px 2px 0 inset,#01a9db 0 0 2px 0}.arrow-demo-1,.arrow-demo-2,.arrow-demo-3,.arrow-demo-4{margin:0 10px 0 0}.arrow-demo-1{padding:0 5px;display:inline-block;height:14px;line-height:16px;position:relative;background:#888;color:white;font-family:sans-serif;font-style:normal;font-size:9px}.arrow-demo-1:after,.ie7 .arrow-demo-1 .after{content:"";position:absolute;top:0;right:-7px;width:0;height:0}.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 #888}.arrow-demo-2{padding:0 5px;display:inline-block;height:14px;line-height:16px;position:relative;background:#b94a48;color:white;font-family:sans-serif;font-style:normal;font-size:9px}.arrow-demo-2:after,.ie7 .arrow-demo-2 .after{content:"";position:absolute;top:0;right:-7px;width:0;height:0}.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}.arrow-demo-3{padding:0 5px;display:inline-block;height:14px;line-height:16px;position:relative;background:#f89406;color:white;font-family:sans-serif;font-style:normal;font-size:9px}.arrow-demo-3:after,.ie7 .arrow-demo-3 .after{content:"";position:absolute;top:0;right:-7px;width:0;height:0}.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}.arrow-demo-4{padding:0 5px;display:inline-block;height:14px;line-height:16px;position:relative;background:#468847;color:white;font-family:sans-serif;font-style:normal;font-size:9px}.arrow-demo-4:after,.ie7 .arrow-demo-4 .after{content:"";position:absolute;top:0;right:-7px;width:0;height:0}.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}.mini-tooltip-demo-1{color:white;font-size:11px;float:left;position:relative;padding:0 10px;margin-left:10px;z-index:0;line-height:20px}.mini-tooltip-demo-1:after,.ie7 .mini-tooltip-demo-1 .after{opacity:.5;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid black}.mini-tooltip-demo-1:before,.ie7 .mini-tooltip-demo-1 .before{background:black;opacity:.5}.ie7 .mini-tooltip-demo-1:before,.ie7 .mini-tooltip-demo-1 .before,.ie8 .mini-tooltip-demo-1:before,.ie8 .mini-tooltip-demo-1 .before{filter:alpha(opacity=50);opacity:.5}.mini-tooltip-demo-1:after,.ie7 .mini-tooltip-demo-1 .after{content:"";position:absolute;width:0;height:0;left:-7px;top:3px}.mini-tooltip-demo-1:before,.ie7 .mini-tooltip-demo-1 .before{content:"";position:absolute;width:100%;height:20px;top:0;left:0;z-index:-1}.ie7 .mini-tooltip-demo-1{zoom:expression(this.runtimeStyle.zoom="1",this.insertBefore(document.createElement("i"),this.firstChild).className="before")}.ie7 .mini-tooltip-demo-1 .before{zoom:expression(this.runtimeStyle.zoom="1",this.appendChild(document.createElement("i")).className="after")}.mini-tooltip-demo-2{color:black;font-size:11px;float:left;position:relative;padding:0 10px;margin-left:10px;z-index:0;line-height:30px}.mini-tooltip-demo-2:after,.ie7 .mini-tooltip-demo-2 .after{opacity:.4;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid red}.mini-tooltip-demo-2:before,.ie7 .mini-tooltip-demo-2 .before{background:red;opacity:.4}.ie7 .mini-tooltip-demo-2:before,.ie7 .mini-tooltip-demo-2 .before,.ie8 .mini-tooltip-demo-2:before,.ie8 .mini-tooltip-demo-2 .before{filter:alpha(opacity=40);opacity:.4}.mini-tooltip-demo-2:after,.ie7 .mini-tooltip-demo-2 .after{content:"";position:absolute;width:0;height:0;left:-7px;top:8px}.mini-tooltip-demo-2:before,.ie7 .mini-tooltip-demo-2 .before{content:"";position:absolute;width:100%;height:30px;top:0;left:0;z-index:-1}.ie7 .mini-tooltip-demo-2{zoom:expression(this.runtimeStyle.zoom="1",this.insertBefore(document.createElement("i"),this.firstChild).className="before")}.ie7 .mini-tooltip-demo-2 .before{zoom:expression(this.runtimeStyle.zoom="1",this.appendChild(document.createElement("i")).className="after")}.mini-tooltip-demo-3{color:white;font-size:11px;float:left;position:relative;padding:0 10px;margin-left:10px;z-index:0;line-height:20px}.mini-tooltip-demo-3:after,.ie7 .mini-tooltip-demo-3 .after{opacity:1;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid #013d93}.mini-tooltip-demo-3:before,.ie7 .mini-tooltip-demo-3 .before{background:#013d93;opacity:1}.ie7 .mini-tooltip-demo-3:before,.ie7 .mini-tooltip-demo-3 .before,.ie8 .mini-tooltip-demo-3:before,.ie8 .mini-tooltip-demo-3 .before{filter:alpha(opacity=100);opacity:1}.mini-tooltip-demo-3:after,.ie7 .mini-tooltip-demo-3 .after{content:"";position:absolute;width:0;height:0;left:-7px;top:3px}.mini-tooltip-demo-3:before,.ie7 .mini-tooltip-demo-3 .before{content:"";position:absolute;width:100%;height:20px;top:0;left:0;z-index:-1}.ie7 .mini-tooltip-demo-3{zoom:expression(this.runtimeStyle.zoom="1",this.insertBefore(document.createElement("i"),this.firstChild).className="before")}.ie7 .mini-tooltip-demo-3 .before{zoom:expression(this.runtimeStyle.zoom="1",this.appendChild(document.createElement("i")).className="after")}.container{width:90%;max-width:1200px;min-width:950px}.row-col{width:100%}.row-col:before,.row-col:after{content:"";display:table}.row-col:after{clear:both}.ie6 .row-col,.ie7 .row-col{zoom:1}.row-col [class^="col"]{width:100%;min-height:25px;display:block;float:left;margin-left:2.174%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-col [class^="col"]:first-child{margin-left:0}.row-col [class^="col"] img{max-width:100%}.row-col .col1{width:6.341%}.ie7 .row-col .col1{width:6.249%}.row-col [class^="col"].offset1{margin-left:10.507%}.row-col [class^="col"].offset1:first-child{margin-left:8.424%}.row-col .col2{width:14.855%}.ie7 .row-col .col2{width:14.763%}.row-col [class^="col"].offset2{margin-left:19.022%}.row-col [class^="col"].offset2:first-child{margin-left:16.938%}.row-col .col3{width:23.37%}.ie7 .row-col .col3{width:23.278%}.row-col [class^="col"].offset3{margin-left:27.536%}.row-col [class^="col"].offset3:first-child{margin-left:25.453%}.row-col .col4{width:31.884%}.ie7 .row-col .col4{width:31.792%}.row-col [class^="col"].offset4{margin-left:36.051%}.row-col [class^="col"].offset4:first-child{margin-left:33.967%}.row-col .col5{width:40.399%}.ie7 .row-col .col5{width:40.307%}.row-col [class^="col"].offset5{margin-left:44.565%}.row-col [class^="col"].offset5:first-child{margin-left:42.482%}.row-col .col6{width:48.913%}.ie7 .row-col .col6{width:48.821%}.row-col [class^="col"].offset6{margin-left:53.08%}.row-col [class^="col"].offset6:first-child{margin-left:50.996%}.row-col .col7{width:57.428%}.ie7 .row-col .col7{width:57.336%}.row-col [class^="col"].offset7{margin-left:61.594%}.row-col [class^="col"].offset7:first-child{margin-left:59.511%}.row-col .col8{width:65.942%}.ie7 .row-col .col8{width:65.85%}.row-col [class^="col"].offset8{margin-left:70.109%}.row-col [class^="col"].offset8:first-child{margin-left:68.025%}.row-col .col9{width:74.457%}.ie7 .row-col .col9{width:74.365%}.row-col [class^="col"].offset9{margin-left:78.623%}.row-col [class^="col"].offset9:first-child{margin-left:76.54%}.row-col .col10{width:82.971%}.ie7 .row-col .col10{width:82.879%}.row-col [class^="col"].offset10{margin-left:87.138%}.row-col [class^="col"].offset10:first-child{margin-left:85.054%}.row-col .col11{width:91.486%}.ie7 .row-col .col11{width:91.394%}.row-col [class^="col"].offset11{margin-left:95.652%}.row-col [class^="col"].offset11:first-child{margin-left:93.569%}.row-col .col12{width:100%}.row-col [class^="col"].offset12{margin-left:104.167%}.row-col [class^="col"].offset12:first-child{margin-left:102.083%}.row-col{margin:10px 0}[class^="col"]{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;background:#ccc}[class^="col"] [class^="col"]{background:#aaa}[class^="col"] [class^="col"] [class^="col"]{background:#696969;color:#c0c0c0}.clearfix-demo{background:#58608d;width:100%;padding:10px}.clearfix-demo:before,.clearfix-demo:after{content:"";display:table}.clearfix-demo:after{clear:both}.ie6 .clearfix-demo,.ie7 .clearfix-demo{zoom:1}.clearfix-demo div{background:white}.despegar-size-1-demo{font-size:11px}.despegar-size-2-demo{font-size:13px}.despegar-size-3-demo{font-size:16px}.despegar-size-4-demo{font-size:20px}.despegar-size-5-demo{font-size:24px}.despegar-size-6-demo{font-size:28px}.despegar-black-demo{padding:10px;background:black;color:white}.despegar-white-demo{padding:10px;background:white}.despegar-yellow-demo{padding:10px;background:#ff3}.despegar-red-demo{padding:10px;background:red}.despegar-blue-demo{padding:10px;background:#013d93;color:white}.despegar-gray-1-demo{padding:10px;background:#222;color:white}.despegar-gray-2-demo{padding:10px;background:#444;color:white}.despegar-gray-3-demo{padding:10px;background:#666;color:white}.despegar-gray-4-demo{padding:10px;background:#888;color:white}.despegar-gray-5-demo{padding:10px;background:#aaa;color:white}.despegar-gray-6-demo{padding:10px;background:#ccc}.despegar-gray-7-demo{padding:10px;background:#eee}.despegar-searchbox-bg-demo{padding:10px;background:#ff3}.despegar-title-color-demo{padding:10px;background:#013d93;color:white}.despegar-titlealt-color-demo{padding:10px;background:#f90}.despegar-link-color-demo{padding:10px;background:#319fda}.despegar-link-color-hover-demo{padding:10px;background:#6cf}.despegar-error-bg-demo{padding:10px;background:#ffe6e6}.despegar-error-border-demo{padding:10px;background:red}.despegar-warning-bg-demo{padding:10px;background:#ffffe1}.despegar-warning-border-demo{padding:10px;background:#fc3}body{width:100%;max-width:100%;margin:0;padding:0;background-color:#f6f7f9}.styledocco-sidebar,.styledocco-docs>:not(.styledocco-example){box-sizing:content-box;margin:15px 20px;color:#334;line-height:1.618;font-family:sans-serif;-webkit-font-smoothing:subpixel-antialiased}.styledocco-sidebar,.styledocco-docs>p,.styledocco-docs>ul,.styledocco-docs>ol,.styledocco-docs>a{font-size:12px}.styledocco-docs>h1,.styledocco-docs>h2,.styledocco-docs>h3,.styledocco-docs>h4,.styledocco-docs>h5,.styledocco-docs>h6{font-weight:bold;margin:25px 20px 0!important;line-height:1.2!important;color:#555f6a!important}.styledocco-docs>:not(.styledocco-example) a{color:#27a;text-decoration:none}.styledocco-docs>:not(.styledocco-example) a:hover{color:#157;text-decoration:underline}.styledocco-docs>:not(.styledocco-example) a:visited{color:#146}.styledocco-docs>:not(.styledocco-example):not(pre) var,.styledocco-docs>:not(.styledocco-example):not(pre) code{padding:.1em 3px;background:rgba(0,0,0,.025);border:1px solid rgba(0,0,0,.05);border-radius:3px;font-style:normal;font-family:"Ubuntu Mono","Andale Mono","DejaVu Sans Mono","Monaco","Bitstream Vera Sans Mono","Consolas","Lucida Console",monospace}.styledocco-code pre code,.styledocco-docs>pre samp,.styledocco-docs>pre code{padding:0;background:transparent;border:0;font-family:"Ubuntu Mono","Andale Mono","DejaVu Sans Mono","Monaco","Bitstream Vera Sans Mono","Consolas","Lucida Console",monospace;font-size:12px}.styledocco-code code::selection,.styledocco-docs>pre code::selection{background:#248;color:#fff}.styledocco-container{width:95%;max-width:1500px;margin:0 auto}.styledocco-main{float:right;width:83%}.styledocco-sidebar{position:fixed;width:9%;padding:1%}.styledocco-section{position:relative;min-height:200px}.styledocco-sidebar{max-height:90%;overflow-y:auto;margin-top:20px;word-wrap:break-word;background-color:#777f88;border-radius:5px;box-shadow:0 0 5px rgba(0,0,0,.25);opacity:.75;-webkit-transition:opacity 2.5s;-moz-transition:opacity 2.5s;-o-transition:opacity 2.5s}.styledocco-sidebar:hover{opacity:1;-webkit-transition:opacity .5s;-moz-transition:opacity .5s;-o-transition:opacity .5s}.styledocco-sidebar a{text-decoration:none}.styledocco-brand{display:block;margin:0 0 10px;text-align:center;color:#eee;font-size:16px;font-weight:bold;text-shadow:rgba(0,0,0,.5) 0 0 1px}.styledocco-brand:hover{color:#fff;text-decoration:none}.styledocco-nav{margin:0;padding:0}.styledocco-nav-heading{display:block;padding:.3em 0;margin:.5em 0 0;color:#ddd;font-size:13px;text-shadow:rgba(0,0,0,.25) 0 0 1px}.styledocco-nav li{margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.1)}.styledocco-nav li:active,.styledocco-nav li:focus,.styledocco-nav li:hover{background:rgba(255,255,255,.2);border-color:transparent;border-radius:3px;text-decoration:none}.styledocco-nav li:active + li,.styledocco-nav li:focus + li,.styledocco-nav li:hover + li{border-color:transparent}.styledocco-nav a{display:block;padding:.2em 5%;color:#f7f7f7}.styledocco-docs{position:relative;width:58%;min-height:200px;margin:20px 0 40px;background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.1);border-radius:5px;box-shadow:0 0 3px rgba(0,0,0,.1)}.styledocco-code{position:absolute;top:5px;bottom:5px;right:0;width:42%;overflow:auto;padding:10px;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:0 5px 5px 0;border:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.75);opacity:.75;-webkit-transition:opacity .25s;-moz-transition:opacity .25s;-o-transition:opacity .25s}.styledocco-code:hover{opacity:1}.styledocco-example{margin-top:10px;padding:15px;overflow:auto;background:url(data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqaqmaaaalpw0iaaaaaxnsr0iars4c6qaaaazqtfrf+vr6////+o8bnqaaabbjrefucb1jypjpgbxheayafr8p8bm+jeoaaaaasuvork5cyii=);border-top:1px dotted #dcdce1}pre + .styledocco-example{margin-top:0;border-top:0}.styledocco-example:before,.styledocco-example:after{display:table;content:""}.styledocco-example:after{clear:both}.styledocco-docs>pre,.styledocco-code pre{white-space:pre-wrap;word-wrap:break-word;color:#445;margin:0!important;line-height:1.1!important}.styledocco-docs>.pilcrow{position:absolute;right:0;top:0;text-decoration:none;font-weight:bold;opacity:.5}.styledocco-docs>.pilcrow:hover{opacity:1}.styledocco-docs>pre{max-height:200px;overflow-y:auto;padding:10px 20px;background:#f8f9fb;border:1px solid rgba(220,220,225,.8);border-left:0;border-right:0}.styledocco-example + pre{border-top:1px dotted #dcdce1}.styledocco-docs>pre:first-child{border-top:0}.styledocco-docs>pre:last-child{border-bottom:0}.styledocco-code pre{padding:0;background:transparent;border:0}</style></head><body class="picasso-"><div class="styledocco-container"><div class="styledocco-sidebar"><a href="index.html" class="styledocco-brand">Picasso</a><ul class="styledocco-nav"><li><a href="_picasso.html">_picasso
|
3
|
+
</a></li></ul><strong class="styledocco-nav-heading">picasso</strong><ul class="styledocco-nav"><li><a href="picasso-_components.html">_components
|
4
|
+
</a></li><li><a href="picasso-_despegar.html">_despegar
|
5
|
+
</a></li><li><a href="picasso-_utils.html">_utils
|
6
|
+
</a></li></ul><strong class="styledocco-nav-heading">components</strong><ul class="styledocco-nav"><li><a href="picasso-components-_accordions.html">_accordions
|
7
|
+
</a></li><li><a href="picasso-components-_arrows.html">_arrows
|
8
|
+
</a></li><li><a href="picasso-components-_bubbles.html">_bubbles
|
9
|
+
</a></li><li><a href="picasso-components-_buttons.html">_buttons
|
10
|
+
</a></li><li><a href="picasso-components-_inputs.html">_inputs
|
11
|
+
</a></li><li><a href="picasso-components-_list-grids.html">_list-grids
|
12
|
+
</a></li><li><a href="picasso-components-_mini-tooltips.html">_mini-tooltips
|
13
|
+
</a></li><li><a href="picasso-components-_navs.html">_navs
|
14
|
+
</a></li><li><a href="picasso-components-_pagination.html">_pagination
|
15
|
+
</a></li><li><a href="picasso-components-_popups.html">_popups
|
16
|
+
</a></li></ul><strong class="styledocco-nav-heading">buttons</strong><ul class="styledocco-nav"><li><a href="picasso-components-buttons-_3d.html">_3d
|
17
|
+
</a></li><li><a href="picasso-components-buttons-_glossy.html">_glossy
|
18
|
+
</a></li><li><a href="picasso-components-buttons-_mini.html">_mini
|
19
|
+
</a></li></ul><strong class="styledocco-nav-heading">despegar</strong><ul class="styledocco-nav"><li><a href="picasso-despegar-_variables.html">_variables
|
20
|
+
</a></li></ul><strong class="styledocco-nav-heading">utils</strong><ul class="styledocco-nav"><li><a href="picasso-utils-_clearfix.html">_clearfix
|
21
|
+
</a></li><li><a href="picasso-utils-_grid.html">_grid
|
22
|
+
</a></li><li><a href="picasso-utils-_ie.html">_ie
|
23
|
+
</a></li><li><a href="picasso-utils-_sprite.html">_sprite
|
24
|
+
</a></li></ul></div><div class="styledocco-main"><div id="section-1" class="styledocco-section"><div class="styledocco-docs"><a href="#section-1" class="pilcrow">¶</a><p><img src="img/picasso.png" alt="Picasso. Framework CSS/Sass." title="Picasso. Framework CSS/Sass.">
|
6
25
|
|
7
|
-
|
8
|
-
|
9
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
10
|
-
<title>Picasso. Framework CSS/Sass.</title>
|
11
|
-
|
12
|
-
<link type="text/css" rel="stylesheet" href="./css/markdown.css">
|
13
|
-
<link type="text/css" rel="stylesheet" href="./css/github.css">
|
14
|
-
<link type="text/css" rel="stylesheet" href="./css/style.css">
|
15
|
-
</head>
|
16
|
-
|
17
|
-
<body>
|
18
|
-
|
19
|
-
|
20
|
-
<header>
|
21
|
-
<img src="img/picasso.png" />
|
22
|
-
<h1 class="title">Framework CSS/Sass.</h1>
|
23
|
-
</header>
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
<hr>
|
29
|
-
|
30
|
-
<h2>Contenidos</h2>
|
31
|
-
|
32
|
-
<aside>
|
33
|
-
<nav>
|
34
|
-
<ol>
|
35
|
-
|
36
|
-
<li>
|
37
|
-
<a href="./intro.html#introduccioacuten">Introducci&oacute;n</a>
|
38
|
-
|
39
|
-
<ol>
|
40
|
-
|
41
|
-
<li><a href="./intro.html#repositorio">Repositorio</a></li>
|
42
|
-
|
43
|
-
<li><a href="./intro.html#instalacioacuten">Instalaci&oacute;n</a></li>
|
44
|
-
|
45
|
-
<li><a href="./intro.html#actualizacioacuten">Actualizaci&oacute;n</a></li>
|
46
|
-
|
47
|
-
<li><a href="./intro.html#opcional-instalacioacuten-de-oily-png">Opcional: Instalaci&oacute;n de oily_png</a></li>
|
48
|
-
|
49
|
-
</ol>
|
50
|
-
|
51
|
-
</li>
|
52
|
-
|
53
|
-
<li>
|
54
|
-
<a href="./changelog.html#changelog">Changelog</a>
|
55
|
-
|
56
|
-
<ol>
|
57
|
-
|
58
|
-
<li><a href="./changelog.html#023">0.2.3</a></li>
|
59
|
-
|
60
|
-
<li><a href="./changelog.html#022">0.2.2</a></li>
|
61
|
-
|
62
|
-
<li><a href="./changelog.html#021">0.2.1</a></li>
|
63
|
-
|
64
|
-
<li><a href="./changelog.html#020">0.2.0</a></li>
|
65
|
-
|
66
|
-
<li><a href="./changelog.html#010">0.1.0</a></li>
|
67
|
-
|
68
|
-
<li><a href="./changelog.html#003">0.0.3</a></li>
|
69
|
-
|
70
|
-
<li><a href="./changelog.html#002">0.0.2</a></li>
|
71
|
-
|
72
|
-
<li><a href="./changelog.html#001">0.0.1</a></li>
|
73
|
-
|
74
|
-
</ol>
|
75
|
-
|
76
|
-
</li>
|
77
|
-
|
78
|
-
<li>
|
79
|
-
<a href="./todo.html#todo">Todo</a>
|
80
|
-
|
81
|
-
<ol>
|
82
|
-
|
83
|
-
<li><a href="./todo.html#componentes">Componentes</a></li>
|
84
|
-
|
85
|
-
<li><a href="./todo.html#utilidades">Utilidades</a></li>
|
86
|
-
|
87
|
-
<li><a href="./todo.html#otros">Otros</a></li>
|
88
|
-
|
89
|
-
</ol>
|
90
|
-
|
91
|
-
</li>
|
92
|
-
|
93
|
-
<li>
|
94
|
-
<a href="./mejoras.html#mejoras-antildeadidos">Mejoras / A&ntilde;adidos</a>
|
95
|
-
|
96
|
-
<ol>
|
97
|
-
|
98
|
-
<li><a href="./mejoras.html#utilizar-el-coacutedigo-fuente">Utilizar el c&oacute;digo fuente</a></li>
|
99
|
-
|
100
|
-
<li><a href="./mejoras.html#pruebas-locales-de-nuevos-antildeadidos-cambios">Pruebas locales de nuevos a&ntilde;adidos/cambios:</a></li>
|
101
|
-
|
102
|
-
<li><a href="./mejoras.html#subidas-en-el-repositorio">Subidas en el repositorio</a></li>
|
103
|
-
|
104
|
-
<li><a href="./mejoras.html#generar-la-documentacioacuten">Generar la documentaci&oacute;n</a></li>
|
105
|
-
|
106
|
-
</ol>
|
107
|
-
|
108
|
-
</li>
|
109
|
-
|
110
|
-
<li>
|
111
|
-
<a href="./components.html#components">Components</a>
|
112
|
-
|
113
|
-
<ol>
|
114
|
-
|
115
|
-
<li><a href="./components.html#componentes-disponibles">Componentes disponibles</a></li>
|
116
|
-
|
117
|
-
<li><a href="./buttons.html#buttons">Buttons</a></li>
|
118
|
-
|
119
|
-
<li><a href="./inputs.html#inputs">Inputs</a></li>
|
120
|
-
|
121
|
-
<li><a href="./navs.html#navs">Navs</a></li>
|
122
|
-
|
123
|
-
<li><a href="./list-grids.html#list-grid">List Grid</a></li>
|
124
|
-
|
125
|
-
<li><a href="./arrows.html#arrows">Arrows</a></li>
|
126
|
-
|
127
|
-
<li><a href="./pagination.html#pagination">Pagination</a></li>
|
128
|
-
|
129
|
-
<li><a href="./bubbles.html#bubbles">Bubbles</a></li>
|
130
|
-
|
131
|
-
<li><a href="./popups.html#popups">Popups</a></li>
|
132
|
-
|
133
|
-
<li><a href="./accordions.html#accordions">Accordions</a></li>
|
134
|
-
|
135
|
-
</ol>
|
136
|
-
|
137
|
-
</li>
|
138
|
-
|
139
|
-
<li>
|
140
|
-
<a href="./utils.html#utils">Utils</a>
|
141
|
-
|
142
|
-
<ol>
|
143
|
-
|
144
|
-
<li><a href="./utils.html#clearfix">Clearfix</a></li>
|
145
|
-
|
146
|
-
<li><a href="./utils.html#ie">IE</a></li>
|
147
|
-
|
148
|
-
<li><a href="./utils.html#sprite">Sprite</a></li>
|
149
|
-
|
150
|
-
</ol>
|
151
|
-
|
152
|
-
</li>
|
153
|
-
|
154
|
-
<li>
|
155
|
-
<a href="./despegar.html#despegar">Despegar</a>
|
156
|
-
|
157
|
-
<ol>
|
158
|
-
|
159
|
-
<li><a href="./despegar.html#variables">Variables</a></li>
|
160
|
-
|
161
|
-
</ol>
|
162
|
-
|
163
|
-
</li>
|
164
|
-
|
165
|
-
</ol>
|
166
|
-
</nav>
|
167
|
-
</aside>
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
<hr>
|
172
|
-
|
173
|
-
<article>
|
174
|
-
<a name="introduccioacuten"></a><h1>Introducción</h1>
|
175
|
-
<a name="repositorio"></a><h2>Repositorio</h2>
|
26
|
+
</p>
|
27
|
+
<h3>Framework CSS/Sass.</h3>
|
176
28
|
<p><a href="http://gitorious.despegar.it/picasso/picasso">http://gitorious.despegar.it/picasso/picasso</a>
|
177
29
|
|
30
|
+
|
178
31
|
</p>
|
179
|
-
<
|
32
|
+
<hr>
|
33
|
+
<h1>Instalación</h1>
|
180
34
|
<p>Ejecutar:
|
181
35
|
|
182
36
|
</p>
|
183
|
-
<pre><code
|
37
|
+
<pre><code>$ (sudo) gem install picasso</code></pre>
|
184
38
|
<blockquote>
|
185
|
-
<p>Opcional: <a href="#
|
39
|
+
<p>Opcional: <a href="#oily-png">Instalación de oily_png</a>.
|
186
40
|
|
187
41
|
</p>
|
188
42
|
</blockquote>
|
189
43
|
<p>En el <code>config.rb</code> agregar:
|
190
44
|
|
191
45
|
</p>
|
192
|
-
<pre><code
|
46
|
+
<pre><code>require 'picasso'
|
193
47
|
require 'magick'
|
194
|
-
gem 'picasso', '~> 0.
|
48
|
+
gem 'picasso', '~> 0.3.0'</code></pre>
|
195
49
|
<p>Modificar el número de versión a medida que se quiere usar nuevas versiones del framework.
|
196
50
|
|
197
51
|
</p>
|
198
52
|
<p>Finalmente, en el archivo Sass importar el framework completo:
|
199
53
|
|
200
54
|
</p>
|
201
|
-
<pre><code
|
55
|
+
<pre><code>@import "picasso";</code></pre>
|
202
56
|
<p>o sólo lo necesario:
|
203
57
|
|
204
58
|
</p>
|
205
|
-
<pre><code
|
59
|
+
<pre><code>@import "picasso/components/buttons";
|
206
60
|
@import "picasso/despegar/variables";</code></pre>
|
207
|
-
<
|
208
|
-
<pre><code
|
209
|
-
<a
|
61
|
+
<h1>Actualización</h1>
|
62
|
+
<pre><code>$ (sudo) gem update picasso</code></pre>
|
63
|
+
<h1><a id="oily-png"></a>Opcional: Instalación de oily_png</h1>
|
210
64
|
<p><a href="https://github.com/wvanbergen/oily_png/">oily_png</a> es una gema que permite acelerar la creación de imágenes dinámicas. Se recomienda su instalación en caso de utilizar Picasso para la creación de sprites.
|
211
65
|
|
212
66
|
</p>
|
213
|
-
<
|
67
|
+
<h2>Windows</h2>
|
214
68
|
<p>Bajar el paquete <a href="http://rubyinstaller.org/downloads/">Development Kit</a>. Extraer dicho paquete en una ruta conocida (por ejemplo <code>C:\DevKit</code>). Abrir una consola, ir a la ruta en donde se pusieron los archivos del <em>Development Kit</em> y ejecutar <code>ruby dk.rb init</code> y luego <code>ruby dk.rb install</code>.
|
215
69
|
|
216
70
|
</p>
|
217
|
-
<
|
218
|
-
<pre><code
|
71
|
+
<h2>Linux</h2>
|
72
|
+
<pre><code>$ (sudo) apt-get update
|
219
73
|
$ (sudo) apt-get install ruby-oily-png</code></pre>
|
74
|
+
<hr>
|
75
|
+
<h1><a id="changelog"></a>Changelog</h1>
|
76
|
+
<h2>0.3.0</h2>
|
77
|
+
<ul>
|
78
|
+
<li>Nueva utilidad: Grillas;</li>
|
79
|
+
<li>Nuevo componente: mini-tooltips;</li>
|
80
|
+
<li>Nuevo sistema para documentar (styledocco);</li>
|
81
|
+
</ul>
|
82
|
+
<h2>0.2.3</h2>
|
83
|
+
<ul>
|
84
|
+
<li>Fix estado estado <code>disabled</code> para IE;</li>
|
85
|
+
</ul>
|
86
|
+
<h2>0.2.2</h2>
|
87
|
+
<ul>
|
88
|
+
<li>Se agrega estado <code>disabled</code> para los botones 3D;</li>
|
89
|
+
</ul>
|
90
|
+
<h2>0.2.1</h2>
|
91
|
+
<ul>
|
92
|
+
<li>Fix sombras, gradientes y bordes de botones y nav de IE9;</li>
|
93
|
+
</ul>
|
94
|
+
<h2>0.2.0</h2>
|
95
|
+
<ul>
|
96
|
+
<li>Fix degradados de botones en Chrome;</li>
|
97
|
+
<li>Separación de botones por tipo;</li>
|
98
|
+
<li>Nuevos botones 3D;</li>
|
99
|
+
<li>Se quita a oily_png como dependencia;</li>
|
100
|
+
</ul>
|
101
|
+
<h2>0.1.0</h2>
|
102
|
+
<ul>
|
103
|
+
<li>Agregados nuevos componentes:</li>
|
104
|
+
<li><ul>
|
105
|
+
<li>Popups</li>
|
106
|
+
</ul>
|
107
|
+
</li>
|
108
|
+
<li><ul>
|
109
|
+
<li>Pagination</li>
|
110
|
+
</ul>
|
111
|
+
</li>
|
112
|
+
<li><ul>
|
113
|
+
<li>Navs</li>
|
114
|
+
</ul>
|
115
|
+
</li>
|
116
|
+
<li><ul>
|
117
|
+
<li>List Grids</li>
|
118
|
+
</ul>
|
119
|
+
</li>
|
120
|
+
<li><ul>
|
121
|
+
<li>Inputs</li>
|
122
|
+
</ul>
|
123
|
+
</li>
|
124
|
+
<li><ul>
|
125
|
+
<li>Accordions</li>
|
126
|
+
</ul>
|
127
|
+
</li>
|
128
|
+
<li>Agregadas nuevas utilidades:</li>
|
129
|
+
<li><ul>
|
130
|
+
<li>Sprite: <code>insert-in-sprite()</code></li>
|
131
|
+
</ul>
|
132
|
+
</li>
|
133
|
+
<li><ul>
|
134
|
+
<li>IE: <code>after()</code> / <code>before()</code></li>
|
135
|
+
</ul>
|
136
|
+
</li>
|
137
|
+
<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>
|
138
|
+
<li>Se elimina el soporte para CSS3 Pie, siendo reemplazado por fallback de sprites.</li>
|
139
|
+
<li>Reorganización interna de la documentación.</li>
|
140
|
+
</ul>
|
141
|
+
<h2>0.0.3</h2>
|
142
|
+
<ul>
|
143
|
+
<li>Agregados estilos de fallback para Internet Explorer.</li>
|
144
|
+
<li>Soporte para CSS3 Pie (de manera predeterminado apagado).</li>
|
145
|
+
<li>Agregada la documentación sobre la generación de docs.</li>
|
146
|
+
</ul>
|
147
|
+
<h2>0.0.2</h2>
|
148
|
+
<ul>
|
149
|
+
<li>Modularización del componente.</li>
|
150
|
+
<li>Agregados: buttons, mini-buttons, bubbles y arrows.</li>
|
151
|
+
<li>Creación de la documentación.</li>
|
152
|
+
</ul>
|
153
|
+
<h2>0.0.1</h2>
|
154
|
+
<ul>
|
155
|
+
<li>Versión inicial.</li>
|
156
|
+
<li>Agregadas las variables de la marca Despegar y clearfix.</li>
|
157
|
+
</ul>
|
158
|
+
<hr>
|
159
|
+
<h1>Todo</h1>
|
160
|
+
<h2>Componentes</h2>
|
161
|
+
<ul>
|
162
|
+
<li>Tabs;</li>
|
163
|
+
<li>Tooltips;</li>
|
164
|
+
<li>Breadcrumbs;</li>
|
165
|
+
</ul>
|
166
|
+
<h2>Utilidades</h2>
|
167
|
+
<ul>
|
168
|
+
<li>Grillas responsivas;</li>
|
169
|
+
<li>Tipografias con pictogramas comunes;</li>
|
170
|
+
</ul>
|
171
|
+
<h2>Otros</h2>
|
172
|
+
<ul>
|
173
|
+
<li>Creación de sprites: Implementar API para poder detectar si un archivo ya existe.</li>
|
174
|
+
<li>Mejoras en la documentación especificando variables por defecto de cada componente y mejor descripción de sus parámetros.</li>
|
175
|
+
</ul>
|
176
|
+
<hr>
|
177
|
+
<h1>Mejoras / Añadidos</h1>
|
178
|
+
<h2>Utilizar el código fuente</h2>
|
179
|
+
<ul>
|
180
|
+
<li>Clonar el repositorio de Picasso:</li>
|
181
|
+
</ul>
|
182
|
+
<pre><code>$ git clone git@gitorious.despegar.it:picasso/picasso.git</code></pre>
|
183
|
+
<ul>
|
184
|
+
<li>Pasarse al branch <code>development</code>:</li>
|
185
|
+
</ul>
|
186
|
+
<pre><code>$ cd picasso
|
187
|
+
$ git checkout --track origin/development</code></pre>
|
188
|
+
<ul>
|
189
|
+
<li>Verificar que se esta parado en dicho branch:</li>
|
190
|
+
</ul>
|
191
|
+
<pre><code>$ git branch</code></pre>
|
192
|
+
<h2>Pruebas locales de nuevos añadidos/cambios:</h2>
|
193
|
+
<ul>
|
194
|
+
<li>En la carpeta del proyecto donde se encuentra el archivo <code>config.rb</code>, crear una carpeta <code>extensions</code>.</li>
|
195
|
+
<li>En dicha lugar copiar la carpeta <code>picasso</code> tal cual se la clonó del repositorio, de manera tal que quede <code>extensiones\picasso\<archivos de picasso></code>.</li>
|
196
|
+
<li>En caso que el proyecto este configurado para usar Picasso, comentar dichas lineas en el <code>config.rb</code>.</li>
|
197
|
+
<li>Compass de manera predeterminada detecta las extensiones que sean guardadas en la carpeta <code>extensions</code>, por lo tanto, las directivas <code>@import "picasso";</code> deberían funcionar sin problemas.</li>
|
198
|
+
</ul>
|
199
|
+
<p>El núcleo de Picasso se encuentra en la carpeta <code>stylesheets</code>. Allí mismo existen tres carpetas <code>components</code>, <code>utils</code> y <code>despegar</code> en donde se alojan, de manera modularizada, los mixins y variables de cada sección.
|
200
|
+
En caso de agregar alguna funcionalidad nueva, tomar de ejemplo algún componente ya existente para entender su lógica interna.
|
220
201
|
|
221
|
-
</
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
202
|
+
</p>
|
203
|
+
<h2>Subidas en el repositorio</h2>
|
204
|
+
<ul>
|
205
|
+
<li>Una vez realizados los cambios o añadidos, subirlos al repositorio:</li>
|
206
|
+
</ul>
|
207
|
+
<pre><code>$ git status
|
208
|
+
$ git add <archivos a subir>;
|
209
|
+
$ git commit -m "<un mensaje descriptivo del commit>"
|
210
|
+
$ git push</code></pre>
|
211
|
+
<blockquote>
|
212
|
+
<p><strong>Nota</strong>: Toda mejora o cambio debe tener su documentación pertinente, caso contrario, no se incorporarán en Picasso.
|
230
213
|
|
231
|
-
</body>
|
232
214
|
|
233
|
-
</
|
215
|
+
</p>
|
216
|
+
</blockquote>
|
217
|
+
<h2>Generar la documentación</h2>
|
218
|
+
<ul>
|
219
|
+
<li><p>Para generar una nueva versión de la documentación es necesario tener instalado node.js: <a href="http://nodejs.org/#download">http://nodejs.org/#download</a></p>
|
220
|
+
</li>
|
221
|
+
<li><p>Abrir una terminal e instalar <a href="https://github.com/jacobrask/styledocco">Styledocco</a>:</p>
|
222
|
+
</li>
|
223
|
+
</ul>
|
224
|
+
<pre><code>$ npm install -g styledocco</code></pre>
|
225
|
+
<ul>
|
226
|
+
<li><p>Dentro de la carpeta <code>stylesheets</code>, existen archivos <code>.scss</code> que componen a Picasso. Cada archivo posee la documentación pertinente que se utiliza para generar el documento final. La anotación de la documentación utiliza la sintaxis <a href="http://daringfireball.net/projects/markdown/basics">markdown</a>. </p>
|
227
|
+
</li>
|
228
|
+
<li><p>Pararse sobre la carpeta raiz del proyecto y ejecutar:</p>
|
229
|
+
</li>
|
230
|
+
</ul>
|
231
|
+
<pre><code>$ compass compile docs/ && styledocco --name "Picasso" --preprocessor "--compass" --resources docs/resources/ --include docs/css/picasso-docs.css stylesheets/</code></pre>
|
232
|
+
<ul>
|
233
|
+
<li>Revisar que la documentación se haya generado correctamente abriendo el archivo <code>docs/index.html</code>.</li>
|
234
|
+
</ul>
|
235
|
+
|
236
|
+
</div></div></div></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>(function(){"use strict";var a=function(a){return Array.prototype.slice.call(a,0)},b=function(a,b){return a+b},c=["link","visited","hover","active","focus","target","enabled","disabled","checked"],d=new RegExp(":(("+c.join(")|(")+"))","gi"),e=a(document.styleSheets).filter(function(a){return a.href==null}).map(function(c){return a(c.cssRules).filter(function(a){return a.selectorText&&a.selectorText.match(d)}).map(function(a){return a.cssText.replace(d,".\\3A $1")}).reduce(b)}).reduce(b,"");if(e.length){var f=document.createElement("style");return f.innerText=e,document.querySelectorAll("head")[0].appendChild(f)}})(),$(document).ready(function(){$(".accordion-header").click(function(){var a=$(this),b=a.parent().find(".accordion-content");b.slideToggle("fast"),a.hasClass("accordion-header-open")?(a.removeClass("accordion-header-open"),a.addClass("accordion-header-close")):(a.removeClass("accordion-header-close"),a.addClass("accordion-header-open"))})})</script></body></html><!-- Generated with StyleDocco (http://jacobrask.github.com/styledocco). -->
|
@@ -0,0 +1,83 @@
|
|
1
|
+
<!DOCTYPE html><!--[if IE 7]><html class="ie7"></html><![endif]--><!--[if IE 8]><html class="ie8"></html><![endif]--><!--[if IE 9]><html class="ie9"></html><![endif]--><!-- [if gt IE 9] <!--><html><head><title>_components | Picasso. Framework CSS/Sass.
|
2
|
+
</title><meta charset="utf-8"><style>.styledocco-docs img{width:100%}.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,#08c),color-stop(100%,#0077b3)),-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#069),color-stop(100%,#00334d));background:-webkit-linear-gradient(#08c,#0077b3),-webkit-linear-gradient(#069,#00334d);background:-moz-linear-gradient(#08c,#0077b3),-moz-linear-gradient(#069,#00334d);background:-o-linear-gradient(#08c,#0077b3),-o-linear-gradient(#069,#00334d);background:linear-gradient(#08c,#0077b3),linear-gradient(#069,#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%,#6cf),color-stop(100%,#000)) 50%;background:-webkit-linear-gradient(#6cf 15%,#000) 50%;background:-moz-linear-gradient(#6cf 15%,#000) 50%;background:-o-linear-gradient(#6cf 15%,#000) 50%;background:linear-gradient(#6cf 15%,#000) 50%}.button-glossy-demo-2:before{background:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#08c),color-stop(100%,#0077b3)),-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#069),color-stop(100%,#00334d));background:-webkit-linear-gradient(#08c,#0077b3),-webkit-linear-gradient(#069,#00334d);background:-moz-linear-gradient(#08c,#0077b3),-moz-linear-gradient(#069,#00334d);background:-o-linear-gradient(#08c,#0077b3),-o-linear-gradient(#069,#00334d);background:linear-gradient(#08c,#0077b3),linear-gradient(#069,#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%,#08c));background:-webkit-linear-gradient(#1ab2ff,#0070a8,#08c);background:-moz-linear-gradient(#1ab2ff,#0070a8,#08c);background:-o-linear-gradient(#1ab2ff,#0070a8,#08c);background:linear-gradient(#1ab2ff,#0070a8,#08c)}.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%,#08c));background:-webkit-linear-gradient(#1ab2ff,#0070a8,#08c);background:-moz-linear-gradient(#1ab2ff,#0070a8,#08c);background:-o-linear-gradient(#1ab2ff,#0070a8,#08c);background:linear-gradient(#1ab2ff,#0070a8,#08c)}.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;line-height:2.2em;color:white;border:1px solid #c00811;font-family:sans-serif;font-size:13px;text-decoration:none;text-align:center;cursor:pointer;text-shadow:0 1px 0 black;-webkit-border-radius:.4em;-moz-border-radius:.4em;-ms-border-radius:.4em;-o-border-radius:.4em;border-radius:.4em}.button-3d-demo-1:active{position:relative;top:1px}.button-3d-demo-1.disabled:active{position:static}.button-3d-demo-1 span{display:block;padding:0 13px}.button-3d-demo-1:visited{color:white}.button-3d-demo-1:hover{text-decoration:none;color:white}.button-3d-demo-1 span{background-color:#f73741;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#f73741),color-stop(100%,#8f060d));background-image:-webkit-linear-gradient(#f73741,#8f060d);background-image:-moz-linear-gradient(#f73741,#8f060d);background-image:-o-linear-gradient(#f73741,#8f060d);background-image:linear-gradient(#f73741,#8f060d);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5)}.button-3d-demo-1 span:hover{background-color:#ff2f3a;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,rgba(255,255,255,0)),color-stop(100%,#c00811));background-image:-webkit-linear-gradient(rgba(255,255,255,0),#c00811);background-image:-moz-linear-gradient(rgba(255,255,255,0),#c00811);background-image:-o-linear-gradient(rgba(255,255,255,0),#c00811);background-image:linear-gradient(rgba(255,255,255,0),#c00811);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #ff2f3a;-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #ff2f3a;box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #ff2f3a}.button-3d-demo-1 span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#f73741),color-stop(100%,#8f060d));background-image:-webkit-linear-gradient(#f73741,#8f060d);background-image:-moz-linear-gradient(#f73741,#8f060d);background-image:-o-linear-gradient(#f73741,#8f060d);background-image:linear-gradient(#f73741,#8f060d);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75)}.button-3d-demo-1.disabled{border:1px solid #755354;cursor:not-allowed;color:white}.button-3d-demo-1.disabled span,.button-3d-demo-1.disabled span:hover,.button-3d-demo-1.disabled span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#979797),color-stop(100%,#4b4b4b));background-image:-webkit-linear-gradient(#979797,#4b4b4b);background-image:-moz-linear-gradient(#979797,#4b4b4b);background-image:-o-linear-gradient(#979797,#4b4b4b);background-image:linear-gradient(#979797,#4b4b4b);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75)}.ie7 .button-3d-demo-1 span,.ie8 .button-3d-demo-1 span,.ie9 .button-3d-demo-1 span{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00F73741',endColorstr='#FF8F060D')}.ie7 .button-3d-demo-1 span:hover,.ie8 .button-3d-demo-1 span:hover,.ie9 .button-3d-demo-1 span:hover{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00FFFFFF',endColorstr='#FFC00811')}.ie7 .button-3d-demo-1 span:active,.ie8 .button-3d-demo-1 span:active,.ie9 .button-3d-demo-1 span:active{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00F73741',endColorstr='#FF8F060D')}.ie7 .button-3d-demo-1.disabled span,.ie7 .button-3d-demo-1.disabled span:hover,.ie7 .button-3d-demo-1.disabled span:active,.ie8 .button-3d-demo-1.disabled span,.ie8 .button-3d-demo-1.disabled span:hover,.ie8 .button-3d-demo-1.disabled span:active,.ie9 .button-3d-demo-1.disabled span,.ie9 .button-3d-demo-1.disabled span:hover,.ie9 .button-3d-demo-1.disabled span:active{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FF979797',endColorstr='#FF4B4B4B')}.button-3d-demo-2{overflow:hidden;display:inline-block;line-height:2.2em;color:white;border:1px solid #046;font-family:sans-serif;font-size:13px;text-decoration:none;text-align:center;cursor:pointer;text-shadow:0 1px 0 black;-webkit-border-radius:.4em;-moz-border-radius:.4em;-ms-border-radius:.4em;-o-border-radius:.4em;border-radius:.4em}.button-3d-demo-2:active{position:relative;top:1px}.button-3d-demo-2.disabled:active{position:static}.button-3d-demo-2 span{display:block;padding:0 13px}.button-3d-demo-2:visited{color:white}.button-3d-demo-2:hover{text-decoration:none;color:white}.button-3d-demo-2 span{background-color:#08c;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#08c),color-stop(100%,#023));background-image:-webkit-linear-gradient(#08c,#023);background-image:-moz-linear-gradient(#08c,#023);background-image:-o-linear-gradient(#08c,#023);background-image:linear-gradient(#08c,#023);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5)}.button-3d-demo-2 span:hover{background-color:#08c;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,rgba(255,255,255,0)),color-stop(100%,#046));background-image:-webkit-linear-gradient(rgba(255,255,255,0),#046);background-image:-moz-linear-gradient(rgba(255,255,255,0),#046);background-image:-o-linear-gradient(rgba(255,255,255,0),#046);background-image:linear-gradient(rgba(255,255,255,0),#046);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #08c;-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #08c;box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #08c}.button-3d-demo-2 span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#08c),color-stop(100%,#023));background-image:-webkit-linear-gradient(#08c,#023);background-image:-moz-linear-gradient(#08c,#023);background-image:-o-linear-gradient(#08c,#023);background-image:linear-gradient(#08c,#023);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75)}.button-3d-demo-2.disabled{border:1px solid #755354;cursor:not-allowed;color:white}.button-3d-demo-2.disabled span,.button-3d-demo-2.disabled span:hover,.button-3d-demo-2.disabled span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#979797),color-stop(100%,#4b4b4b));background-image:-webkit-linear-gradient(#979797,#4b4b4b);background-image:-moz-linear-gradient(#979797,#4b4b4b);background-image:-o-linear-gradient(#979797,#4b4b4b);background-image:linear-gradient(#979797,#4b4b4b);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75)}.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')}.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')}.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')}.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;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FF979797',endColorstr='#FF4B4B4B')}.button-3d-demo-3{overflow:hidden;display:inline-block;line-height:2.2em;color:white;border:1px solid #e08505;font-family:sans-serif;font-size:13px;text-decoration:none;text-align:center;cursor:pointer;text-shadow:0 1px 0 black;-webkit-border-radius:.4em;-moz-border-radius:.4em;-ms-border-radius:.4em;-o-border-radius:.4em;border-radius:.4em}.button-3d-demo-3:active{position:relative;top:1px}.button-3d-demo-3.disabled:active{position:static}.button-3d-demo-3 span{display:block;padding:0 13px}.button-3d-demo-3:visited{color:white}.button-3d-demo-3:hover{text-decoration:none;color:white}.button-3d-demo-3 span{background-color:#fbb450;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#fbb450),color-stop(100%,#ae6704));background-image:-webkit-linear-gradient(#fbb450,#ae6704);background-image:-moz-linear-gradient(#fbb450,#ae6704);background-image:-o-linear-gradient(#fbb450,#ae6704);background-image:linear-gradient(#fbb450,#ae6704);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5)}.button-3d-demo-3 span:hover{background-color:#ffb54c;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,rgba(255,255,255,0)),color-stop(100%,#e08505));background-image:-webkit-linear-gradient(rgba(255,255,255,0),#e08505);background-image:-moz-linear-gradient(rgba(255,255,255,0),#e08505);background-image:-o-linear-gradient(rgba(255,255,255,0),#e08505);background-image:linear-gradient(rgba(255,255,255,0),#e08505);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #ffb54c;-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #ffb54c;box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #ffb54c}.button-3d-demo-3 span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#fbb450),color-stop(100%,#ae6704));background-image:-webkit-linear-gradient(#fbb450,#ae6704);background-image:-moz-linear-gradient(#fbb450,#ae6704);background-image:-o-linear-gradient(#fbb450,#ae6704);background-image:linear-gradient(#fbb450,#ae6704);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75)}.button-3d-demo-3.disabled{border:1px solid #755354;cursor:not-allowed;color:white}.button-3d-demo-3.disabled span,.button-3d-demo-3.disabled span:hover,.button-3d-demo-3.disabled span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#979797),color-stop(100%,#4b4b4b));background-image:-webkit-linear-gradient(#979797,#4b4b4b);background-image:-moz-linear-gradient(#979797,#4b4b4b);background-image:-o-linear-gradient(#979797,#4b4b4b);background-image:linear-gradient(#979797,#4b4b4b);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75)}.ie7 .button-3d-demo-3 span,.ie8 .button-3d-demo-3 span,.ie9 .button-3d-demo-3 span{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00FBB450',endColorstr='#FFAE6704')}.ie7 .button-3d-demo-3 span:hover,.ie8 .button-3d-demo-3 span:hover,.ie9 .button-3d-demo-3 span:hover{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00FFFFFF',endColorstr='#FFE08505')}.ie7 .button-3d-demo-3 span:active,.ie8 .button-3d-demo-3 span:active,.ie9 .button-3d-demo-3 span:active{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00FBB450',endColorstr='#FFAE6704')}.ie7 .button-3d-demo-3.disabled span,.ie7 .button-3d-demo-3.disabled span:hover,.ie7 .button-3d-demo-3.disabled span:active,.ie8 .button-3d-demo-3.disabled span,.ie8 .button-3d-demo-3.disabled span:hover,.ie8 .button-3d-demo-3.disabled span:active,.ie9 .button-3d-demo-3.disabled span,.ie9 .button-3d-demo-3.disabled span:hover,.ie9 .button-3d-demo-3.disabled span:active{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FF979797',endColorstr='#FF4B4B4B')}.button-3d-demo-4{overflow:hidden;display:block;line-height:2.2em;color:white;border:1px solid #00132e;font-family:sans-serif;font-size:24px;text-decoration:none;text-align:center;cursor:pointer;text-shadow:0 1px 0 black;-webkit-border-radius:.4em;-moz-border-radius:.4em;-ms-border-radius:.4em;-o-border-radius:.4em;border-radius:.4em}.button-3d-demo-4:active{position:relative;top:1px}.button-3d-demo-4.disabled:active{position:static}.button-3d-demo-4 span{display:block;padding:0 24px}.button-3d-demo-4:visited{color:white}.button-3d-demo-4:hover{text-decoration:none;color:white}.button-3d-demo-4 span{background-color:#013d93;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#013d93),color-stop(100%,#000));background-image:-webkit-linear-gradient(#013d93,#000);background-image:-moz-linear-gradient(#013d93,#000);background-image:-o-linear-gradient(#013d93,#000);background-image:linear-gradient(#013d93,#000);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5)}.button-3d-demo-4 span:hover{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 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #003d94;-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #003d94;box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #003d94}.button-3d-demo-4 span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#013d93),color-stop(100%,#000));background-image:-webkit-linear-gradient(#013d93,#000);background-image:-moz-linear-gradient(#013d93,#000);background-image:-o-linear-gradient(#013d93,#000);background-image:linear-gradient(#013d93,#000);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75)}.button-3d-demo-4.disabled{border:1px solid #755354;cursor:not-allowed;color:white}.button-3d-demo-4.disabled span,.button-3d-demo-4.disabled span:hover,.button-3d-demo-4.disabled span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#979797),color-stop(100%,#4b4b4b));background-image:-webkit-linear-gradient(#979797,#4b4b4b);background-image:-moz-linear-gradient(#979797,#4b4b4b);background-image:-o-linear-gradient(#979797,#4b4b4b);background-image:linear-gradient(#979797,#4b4b4b);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75)}.ie7 .button-3d-demo-4 span,.ie8 .button-3d-demo-4 span,.ie9 .button-3d-demo-4 span{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00013D93',endColorstr='#FF000000')}.ie7 .button-3d-demo-4 span:hover,.ie8 .button-3d-demo-4 span:hover,.ie9 .button-3d-demo-4 span:hover{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00FFFFFF',endColorstr='#FF00132E')}.ie7 .button-3d-demo-4 span:active,.ie8 .button-3d-demo-4 span:active,.ie9 .button-3d-demo-4 span:active{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00013D93',endColorstr='#FF000000')}.ie7 .button-3d-demo-4.disabled span,.ie7 .button-3d-demo-4.disabled span:hover,.ie7 .button-3d-demo-4.disabled span:active,.ie8 .button-3d-demo-4.disabled span,.ie8 .button-3d-demo-4.disabled span:hover,.ie8 .button-3d-demo-4.disabled span:active,.ie9 .button-3d-demo-4.disabled span,.ie9 .button-3d-demo-4.disabled span:hover,.ie9 .button-3d-demo-4.disabled span:active{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FF979797',endColorstr='#FF4B4B4B')}.button-3d-demo-5{overflow:hidden;display:inline-block;line-height:1.75em;color:#013d93;border:1px solid #bbb;font-family:sans-serif;font-size:11px;text-decoration:none;text-align:center;cursor:pointer;text-shadow:0 1px 0 #b5b5b5;-webkit-border-radius:1.1em;-moz-border-radius:1.1em;-ms-border-radius:1.1em;-o-border-radius:1.1em;border-radius:1.1em}.button-3d-demo-5:active{position:relative;top:1px}.button-3d-demo-5.disabled:active{position:static}.button-3d-demo-5 span{display:block;padding:0 11px}.button-3d-demo-5:visited{color:#013d93}.button-3d-demo-5:hover{text-decoration:none;color:#013d93}.button-3d-demo-5 span{background-color:#eee;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#eee),color-stop(100%,#a2a2a2));background-image:-webkit-linear-gradient(#eee,#a2a2a2);background-image:-moz-linear-gradient(#eee,#a2a2a2);background-image:-o-linear-gradient(#eee,#a2a2a2);background-image:linear-gradient(#eee,#a2a2a2);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5)}.button-3d-demo-5 span:hover{background-color:#f0ecec;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,rgba(255,255,255,0)),color-stop(100%,#bbb));background-image:-webkit-linear-gradient(rgba(255,255,255,0),#bbb);background-image:-moz-linear-gradient(rgba(255,255,255,0),#bbb);background-image:-o-linear-gradient(rgba(255,255,255,0),#bbb);background-image:linear-gradient(rgba(255,255,255,0),#bbb);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #f0ecec;-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #f0ecec;box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.5),inset 0 0 1em #f0ecec}.button-3d-demo-5 span:active{text-shadow:0 -1px 0 #b5b5b5;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#eee),color-stop(100%,#a2a2a2));background-image:-webkit-linear-gradient(#eee,#a2a2a2);background-image:-moz-linear-gradient(#eee,#a2a2a2);background-image:-o-linear-gradient(#eee,#a2a2a2);background-image:linear-gradient(#eee,#a2a2a2);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.1),inset 0 .1em .2em rgba(0,0,0,.5),inset 0 .1em 0 rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.75)}.button-3d-demo-5.disabled{border:1px solid #755354;cursor:not-allowed;color:white}.button-3d-demo-5.disabled span,.button-3d-demo-5.disabled span:hover,.button-3d-demo-5.disabled span:active{text-shadow:0 -1px 0 black;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#979797),color-stop(100%,#4b4b4b));background-image:-webkit-linear-gradient(#979797,#4b4b4b);background-image:-moz-linear-gradient(#979797,#4b4b4b);background-image:-o-linear-gradient(#979797,#4b4b4b);background-image:linear-gradient(#979797,#4b4b4b);-webkit-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);-moz-box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75);box-shadow:0 .1em .1em rgba(0,0,0,.5),inset 0 .1em 0 rgba(255,255,255,.25),inset 0 0 1em rgba(0,0,0,.75)}.ie7 .button-3d-demo-5 span,.ie8 .button-3d-demo-5 span,.ie9 .button-3d-demo-5 span{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00EEEEEE',endColorstr='#FFA2A2A2')}.ie7 .button-3d-demo-5 span:hover,.ie8 .button-3d-demo-5 span:hover,.ie9 .button-3d-demo-5 span:hover{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00FFFFFF',endColorstr='#FFBBBBBB')}.ie7 .button-3d-demo-5 span:active,.ie8 .button-3d-demo-5 span:active,.ie9 .button-3d-demo-5 span:active{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00EEEEEE',endColorstr='#FFA2A2A2')}.ie7 .button-3d-demo-5.disabled span,.ie7 .button-3d-demo-5.disabled span:hover,.ie7 .button-3d-demo-5.disabled span:active,.ie8 .button-3d-demo-5.disabled span,.ie8 .button-3d-demo-5.disabled span:hover,.ie8 .button-3d-demo-5.disabled span:active,.ie9 .button-3d-demo-5.disabled span,.ie9 .button-3d-demo-5.disabled span:hover,.ie9 .button-3d-demo-5.disabled span:active{*zoom:1;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:#333 0 1px 2px 0;-moz-box-shadow:#333 0 1px 2px 0;box-shadow:#333 0 1px 2px 0}.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:#999 0 0 3px 3px inset;-moz-box-shadow:#999 0 0 3px 3px inset;box-shadow:#999 0 0 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,#08c),color-stop(50%,#0077b3),color-stop(51%,#069),color-stop(100%,#005580));background:-webkit-linear-gradient(top,#08c 0,#0077b3 50%,#069 51%,#005580 100%);background:-moz-linear-gradient(top,#08c 0,#0077b3 50%,#069 51%,#005580 100%);background:-o-linear-gradient(top,#08c 0,#0077b3 50%,#069 51%,#005580 100%);background:linear-gradient(top,#08c 0,#0077b3 50%,#069 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:#333 0 1px 2px 0;-moz-box-shadow:#333 0 1px 2px 0;box-shadow:#333 0 1px 2px 0}.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:#999 0 0 3px 3px inset;-moz-box-shadow:#999 0 0 3px 3px inset;box-shadow:#999 0 0 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:#333 0 1px 2px 0;-moz-box-shadow:#333 0 1px 2px 0;box-shadow:#333 0 1px 2px 0}.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:#999 0 0 3px 3px inset;-moz-box-shadow:#999 0 0 3px 3px inset;box-shadow:#999 0 0 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:#333 0 1px 2px 0;-moz-box-shadow:#333 0 1px 2px 0;box-shadow:#333 0 1px 2px 0}.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:#999 0 0 3px 3px inset;-moz-box-shadow:#999 0 0 3px 3px inset;box-shadow:#999 0 0 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}.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:0;margin:0;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 #ccc;border-bottom:1px solid #ccc;border-right:1px solid #ccc}.list-grid-demo-1 ul:first-child{border-left:1px solid #ccc}.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 #ccc}.list-grid-demo-1 ul li:nth-child(odd){background:none repeat scroll 0 0 #eee}.list-grid-demo-1 ul li:nth-child(even){background:none repeat scroll 0 0 white}.list-grid-demo-1 ul li.cell-hover: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 #eee}.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 #eee}.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,#fff),color-stop(100%,#e6e6e6));background-image:-webkit-linear-gradient(#fff,#e6e6e6);background-image:-moz-linear-gradient(#fff,#e6e6e6);background-image:-o-linear-gradient(#fff,#e6e6e6);background-image:linear-gradient(#fff,#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,#fff),color-stop(100%,#f2f2f2));background-image:-webkit-linear-gradient(#fff,#f2f2f2);background-image:-moz-linear-gradient(#fff,#f2f2f2);background-image:-o-linear-gradient(#fff,#f2f2f2);background-image:linear-gradient(#fff,#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%,#fff));background-image:-webkit-linear-gradient(#e6e6e6,#fff);background-image:-moz-linear-gradient(#e6e6e6,#fff);background-image:-o-linear-gradient(#e6e6e6,#fff);background-image:linear-gradient(#e6e6e6,#fff)}.ie7 .nav-demo-1 ul li,.ie8 .nav-demo-1 ul li,.ie9 .nav-demo-1 ul li{border-left:0;border-top:0;border-bottom:0;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:0}.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}.ie9 .nav-demo-1 ul{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ie9 .nav-demo-1 ul li:first-child{-moz-border-radius-topleft:none;-webkit-border-top-left-radius:none;border-top-left-radius:none;-moz-border-radius-bottomleft:none;-webkit-border-bottom-left-radius:none;border-bottom-left-radius:none}.ie9 .nav-demo-1 ul li:last-child{-moz-border-radius-topright:none;-webkit-border-top-right-radius:none;border-top-right-radius:none;-moz-border-radius-bottomright:none;-webkit-border-bottom-right-radius:none;border-bottom-right-radius:none;border:0}.picasso-_popups .styledocco-example{position:relative;height:150px}.popup-demo-1{padding:10px;position:absolute}.popup-demo-1:after,.ie7 .popup-demo-1 .after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.popup-demo-1 .popup-header h4{line-height:20px;padding:10px}.popup-demo-1 .popup-container{z-index:1;position:relative}.popup-demo-1 .popup-arrow{position:absolute;height:0;width:0}.popup-demo-1 .popup-arrow-bottom{bottom:-10px;left:10px}.popup-demo-1 .popup-arrow-top{top:-10px;left:10px}.popup-demo-1 .popup-arrow-left{left:-10px;top:10px}.popup-demo-1 .popup-arrow-right{right:-10px;top:10px}.popup-demo-1 .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{line-height:23px;height:26px;width:26px;top:-13px;right:-13px}.ie7 .popup-demo-1{zoom:expression(this.runtimeStyle.zoom="1",this.appendChild(document.createElement("i")).className="after")}.popup-demo-1:after,.ie7 .popup-demo-1 .after{background:rgba(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,.5) 0 0 10px;-moz-box-shadow:rgba(0,0,0,.5) 0 0 10px;box-shadow:rgba(0,0,0,.5) 0 0 10px}.popup-demo-1 .popup-header{background:none repeat scroll 0 0 #f7f7f7;display:block}.popup-demo-1 .popup-header h4{margin:0;color:#003770;font-family:sans-serif;font-size:16px;font-weight:normal}.popup-demo-1 .popup-content{background:white;border:1px solid transparent}.popup-demo-1 .popup-arrow-bottom{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(0,0,0,.7)}.popup-demo-1 .popup-arrow-top{border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid rgba(0,0,0,.7)}.popup-demo-1 .popup-arrow-left{border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid rgba(0,0,0,.7)}.popup-demo-1 .popup-arrow-right{border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid rgba(0,0,0,.7)}.popup-demo-1 .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,.5) 0 0 10px;-moz-box-shadow:rgba(0,0,0,.5) 0 0 10px;box-shadow:rgba(0,0,0,.5) 0 0 10px}.ie7 .popup-demo-1:after,.ie7 .popup-demo-1 .after,.ie8 .popup-demo-1:after,.ie8 .popup-demo-1 .after{background:black;filter:alpha(opacity=70)}.ie7 .popup-demo-1 .popup-arrow,.ie8 .popup-demo-1 .popup-arrow{filter:alpha(opacity=70)}.ie7 .popup-demo-1 .popup-arrow-bottom,.ie8 .popup-demo-1 .popup-arrow-bottom{border-top:10px solid black}.ie7 .popup-demo-1 .popup-arrow-top,.ie8 .popup-demo-1 .popup-arrow-top{border-bottom:10px solid black}.ie7 .popup-demo-1 .popup-arrow-left,.ie8 .popup-demo-1 .popup-arrow-left{border-right:10px solid black}.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-image:url('../img/picasso-popup.png');background-position:0 -1px}.popup-demo-2{padding:10px;position:absolute}.popup-demo-2:after,.ie7 .popup-demo-2 .after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.popup-demo-2 .popup-header h4{line-height:20px;padding:10px}.popup-demo-2 .popup-container{z-index:1;position:relative}.popup-demo-2 .popup-arrow{position:absolute;height:0;width:0}.popup-demo-2 .popup-arrow-bottom{bottom:-10px;left:10px}.popup-demo-2 .popup-arrow-top{top:-10px;left:10px}.popup-demo-2 .popup-arrow-left{left:-10px;top:10px}.popup-demo-2 .popup-arrow-right{right:-10px;top:10px}.popup-demo-2 .popup-close{position:absolute;z-index:10;text-align:center;line-height:17px;height:20px;width:20px;top:-13px;right:-13px}.ie7 .popup-demo-2 .popup-close,.ie8 .popup-demo-2 .popup-close{line-height:23px;height:26px;width:26px;top:-13px;right:-13px}.ie7 .popup-demo-2{zoom:expression(this.runtimeStyle.zoom="1",this.appendChild(document.createElement("i")).className="after")}.popup-demo-2:after,.ie7 .popup-demo-2 .after{background:rgba(1,61,147,.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,.5) 0 0 20px;-moz-box-shadow:rgba(0,0,0,.5) 0 0 20px;box-shadow:rgba(0,0,0,.5) 0 0 20px}.popup-demo-2 .popup-header{background:rgba(1,61,147,.7);display:block}.popup-demo-2 .popup-header h4{margin:0;color:white;font-family:sans-serif;font-size:16px;font-weight:normal}.popup-demo-2 .popup-content{background:black;border:1px solid transparent}.popup-demo-2 .popup-arrow-bottom{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(1,61,147,.7)}.popup-demo-2 .popup-arrow-top{border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid rgba(1,61,147,.7)}.popup-demo-2 .popup-arrow-left{border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid rgba(1,61,147,.7)}.popup-demo-2 .popup-arrow-right{border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid rgba(1,61,147,.7)}.popup-demo-2 .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,.5) 0 0 20px;-moz-box-shadow:rgba(0,0,0,.5) 0 0 20px;box-shadow:rgba(0,0,0,.5) 0 0 20px}.ie7 .popup-demo-2:after,.ie7 .popup-demo-2 .after,.ie8 .popup-demo-2:after,.ie8 .popup-demo-2 .after{background:#013d93;filter:alpha(opacity=70)}.ie7 .popup-demo-2 .popup-arrow,.ie8 .popup-demo-2 .popup-arrow{filter:alpha(opacity=70)}.ie7 .popup-demo-2 .popup-arrow-bottom,.ie8 .popup-demo-2 .popup-arrow-bottom{border-top:10px solid #013d93}.ie7 .popup-demo-2 .popup-arrow-top,.ie8 .popup-demo-2 .popup-arrow-top{border-bottom:10px solid #013d93}.ie7 .popup-demo-2 .popup-arrow-left,.ie8 .popup-demo-2 .popup-arrow-left{border-right:10px solid #013d93}.ie7 .popup-demo-2 .popup-arrow-right,.ie8 .popup-demo-2 .popup-arrow-right{border-left:10px solid #013d93}.ie7 .popup-demo-2 .popup-close,.ie8 .popup-demo-2 .popup-close{border-width:0;background-color:transparent;background-image:url('../img/picasso-popup.png');background-position:0 -27px}.bubble-demo-1{padding:10px;display:block;width:auto;position:relative;background:#eee;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}.bubble-demo-1:after,.ie7 .bubble-demo-1 .after{content:"";position:absolute;bottom:-15px;right:20px;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:#999}.bubble-demo-1:after,.ie7 .bubble-demo-1 .after{border-left:10px solid transparent;border-right:10px solid transparent;border-top:15px solid #eee}.accordion-demo-1 .accordion-header{position:relative;height:20px;padding:0 10px;display:block}.accordion-demo-1 .accordion-header h4{line-height:20px;margin:0}.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 #ccc}.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:#eee;border:1px solid #ccc;-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:0;border:0}.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:0}.pagination-demo-1 .prev:hover,.pagination-demo-1 .next:hover{text-decoration:underline}.pagination-demo-1 .active a,.pagination-demo-1 .dots a{color:#888;cursor:default;text-decoration:none}.pagination-demo-1 .active a:hover,.pagination-demo-1 .dots a:hover{color:#888;text-decoration:none}.text-input-demo-1{width:200px;height:20px;line-height:20px;padding:1px;border:1px solid #ddd;border-top:1px solid #919191;color:#333;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,.2) inset;-moz-box-shadow:0 1px 2px 0 rgba(0,0,0,.2) inset;box-shadow:0 1px 2px 0 rgba(0,0,0,.2) inset}.text-input-demo-1:focus{outline:0;border:1px solid #319fda;-webkit-box-shadow:rgba(0,0,0,.2) 0 1px 2px 0 inset,#01a9db 0 0 2px 0;-moz-box-shadow:rgba(0,0,0,.2) 0 1px 2px 0 inset,#01a9db 0 0 2px 0;box-shadow:rgba(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 #ddd;border-top:1px solid #919191;color:#333;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,.2) inset;-moz-box-shadow:0 1px 2px 0 rgba(0,0,0,.2) inset;box-shadow:0 1px 2px 0 rgba(0,0,0,.2) inset}.select-demo-1:focus{outline:0;border:1px solid #319fda;-webkit-box-shadow:rgba(0,0,0,.2) 0 1px 2px 0 inset,#01a9db 0 0 2px 0;-moz-box-shadow:rgba(0,0,0,.2) 0 1px 2px 0 inset,#01a9db 0 0 2px 0;box-shadow:rgba(0,0,0,.2) 0 1px 2px 0 inset,#01a9db 0 0 2px 0}.arrow-demo-1,.arrow-demo-2,.arrow-demo-3,.arrow-demo-4{margin:0 10px 0 0}.arrow-demo-1{padding:0 5px;display:inline-block;height:14px;line-height:16px;position:relative;background:#888;color:white;font-family:sans-serif;font-style:normal;font-size:9px}.arrow-demo-1:after,.ie7 .arrow-demo-1 .after{content:"";position:absolute;top:0;right:-7px;width:0;height:0}.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 #888}.arrow-demo-2{padding:0 5px;display:inline-block;height:14px;line-height:16px;position:relative;background:#b94a48;color:white;font-family:sans-serif;font-style:normal;font-size:9px}.arrow-demo-2:after,.ie7 .arrow-demo-2 .after{content:"";position:absolute;top:0;right:-7px;width:0;height:0}.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}.arrow-demo-3{padding:0 5px;display:inline-block;height:14px;line-height:16px;position:relative;background:#f89406;color:white;font-family:sans-serif;font-style:normal;font-size:9px}.arrow-demo-3:after,.ie7 .arrow-demo-3 .after{content:"";position:absolute;top:0;right:-7px;width:0;height:0}.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}.arrow-demo-4{padding:0 5px;display:inline-block;height:14px;line-height:16px;position:relative;background:#468847;color:white;font-family:sans-serif;font-style:normal;font-size:9px}.arrow-demo-4:after,.ie7 .arrow-demo-4 .after{content:"";position:absolute;top:0;right:-7px;width:0;height:0}.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}.mini-tooltip-demo-1{color:white;font-size:11px;float:left;position:relative;padding:0 10px;margin-left:10px;z-index:0;line-height:20px}.mini-tooltip-demo-1:after,.ie7 .mini-tooltip-demo-1 .after{opacity:.5;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid black}.mini-tooltip-demo-1:before,.ie7 .mini-tooltip-demo-1 .before{background:black;opacity:.5}.ie7 .mini-tooltip-demo-1:before,.ie7 .mini-tooltip-demo-1 .before,.ie8 .mini-tooltip-demo-1:before,.ie8 .mini-tooltip-demo-1 .before{filter:alpha(opacity=50);opacity:.5}.mini-tooltip-demo-1:after,.ie7 .mini-tooltip-demo-1 .after{content:"";position:absolute;width:0;height:0;left:-7px;top:3px}.mini-tooltip-demo-1:before,.ie7 .mini-tooltip-demo-1 .before{content:"";position:absolute;width:100%;height:20px;top:0;left:0;z-index:-1}.ie7 .mini-tooltip-demo-1{zoom:expression(this.runtimeStyle.zoom="1",this.insertBefore(document.createElement("i"),this.firstChild).className="before")}.ie7 .mini-tooltip-demo-1 .before{zoom:expression(this.runtimeStyle.zoom="1",this.appendChild(document.createElement("i")).className="after")}.mini-tooltip-demo-2{color:black;font-size:11px;float:left;position:relative;padding:0 10px;margin-left:10px;z-index:0;line-height:30px}.mini-tooltip-demo-2:after,.ie7 .mini-tooltip-demo-2 .after{opacity:.4;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid red}.mini-tooltip-demo-2:before,.ie7 .mini-tooltip-demo-2 .before{background:red;opacity:.4}.ie7 .mini-tooltip-demo-2:before,.ie7 .mini-tooltip-demo-2 .before,.ie8 .mini-tooltip-demo-2:before,.ie8 .mini-tooltip-demo-2 .before{filter:alpha(opacity=40);opacity:.4}.mini-tooltip-demo-2:after,.ie7 .mini-tooltip-demo-2 .after{content:"";position:absolute;width:0;height:0;left:-7px;top:8px}.mini-tooltip-demo-2:before,.ie7 .mini-tooltip-demo-2 .before{content:"";position:absolute;width:100%;height:30px;top:0;left:0;z-index:-1}.ie7 .mini-tooltip-demo-2{zoom:expression(this.runtimeStyle.zoom="1",this.insertBefore(document.createElement("i"),this.firstChild).className="before")}.ie7 .mini-tooltip-demo-2 .before{zoom:expression(this.runtimeStyle.zoom="1",this.appendChild(document.createElement("i")).className="after")}.mini-tooltip-demo-3{color:white;font-size:11px;float:left;position:relative;padding:0 10px;margin-left:10px;z-index:0;line-height:20px}.mini-tooltip-demo-3:after,.ie7 .mini-tooltip-demo-3 .after{opacity:1;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid #013d93}.mini-tooltip-demo-3:before,.ie7 .mini-tooltip-demo-3 .before{background:#013d93;opacity:1}.ie7 .mini-tooltip-demo-3:before,.ie7 .mini-tooltip-demo-3 .before,.ie8 .mini-tooltip-demo-3:before,.ie8 .mini-tooltip-demo-3 .before{filter:alpha(opacity=100);opacity:1}.mini-tooltip-demo-3:after,.ie7 .mini-tooltip-demo-3 .after{content:"";position:absolute;width:0;height:0;left:-7px;top:3px}.mini-tooltip-demo-3:before,.ie7 .mini-tooltip-demo-3 .before{content:"";position:absolute;width:100%;height:20px;top:0;left:0;z-index:-1}.ie7 .mini-tooltip-demo-3{zoom:expression(this.runtimeStyle.zoom="1",this.insertBefore(document.createElement("i"),this.firstChild).className="before")}.ie7 .mini-tooltip-demo-3 .before{zoom:expression(this.runtimeStyle.zoom="1",this.appendChild(document.createElement("i")).className="after")}.container{width:90%;max-width:1200px;min-width:950px}.row-col{width:100%}.row-col:before,.row-col:after{content:"";display:table}.row-col:after{clear:both}.ie6 .row-col,.ie7 .row-col{zoom:1}.row-col [class^="col"]{width:100%;min-height:25px;display:block;float:left;margin-left:2.174%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-col [class^="col"]:first-child{margin-left:0}.row-col [class^="col"] img{max-width:100%}.row-col .col1{width:6.341%}.ie7 .row-col .col1{width:6.249%}.row-col [class^="col"].offset1{margin-left:10.507%}.row-col [class^="col"].offset1:first-child{margin-left:8.424%}.row-col .col2{width:14.855%}.ie7 .row-col .col2{width:14.763%}.row-col [class^="col"].offset2{margin-left:19.022%}.row-col [class^="col"].offset2:first-child{margin-left:16.938%}.row-col .col3{width:23.37%}.ie7 .row-col .col3{width:23.278%}.row-col [class^="col"].offset3{margin-left:27.536%}.row-col [class^="col"].offset3:first-child{margin-left:25.453%}.row-col .col4{width:31.884%}.ie7 .row-col .col4{width:31.792%}.row-col [class^="col"].offset4{margin-left:36.051%}.row-col [class^="col"].offset4:first-child{margin-left:33.967%}.row-col .col5{width:40.399%}.ie7 .row-col .col5{width:40.307%}.row-col [class^="col"].offset5{margin-left:44.565%}.row-col [class^="col"].offset5:first-child{margin-left:42.482%}.row-col .col6{width:48.913%}.ie7 .row-col .col6{width:48.821%}.row-col [class^="col"].offset6{margin-left:53.08%}.row-col [class^="col"].offset6:first-child{margin-left:50.996%}.row-col .col7{width:57.428%}.ie7 .row-col .col7{width:57.336%}.row-col [class^="col"].offset7{margin-left:61.594%}.row-col [class^="col"].offset7:first-child{margin-left:59.511%}.row-col .col8{width:65.942%}.ie7 .row-col .col8{width:65.85%}.row-col [class^="col"].offset8{margin-left:70.109%}.row-col [class^="col"].offset8:first-child{margin-left:68.025%}.row-col .col9{width:74.457%}.ie7 .row-col .col9{width:74.365%}.row-col [class^="col"].offset9{margin-left:78.623%}.row-col [class^="col"].offset9:first-child{margin-left:76.54%}.row-col .col10{width:82.971%}.ie7 .row-col .col10{width:82.879%}.row-col [class^="col"].offset10{margin-left:87.138%}.row-col [class^="col"].offset10:first-child{margin-left:85.054%}.row-col .col11{width:91.486%}.ie7 .row-col .col11{width:91.394%}.row-col [class^="col"].offset11{margin-left:95.652%}.row-col [class^="col"].offset11:first-child{margin-left:93.569%}.row-col .col12{width:100%}.row-col [class^="col"].offset12{margin-left:104.167%}.row-col [class^="col"].offset12:first-child{margin-left:102.083%}.row-col{margin:10px 0}[class^="col"]{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;background:#ccc}[class^="col"] [class^="col"]{background:#aaa}[class^="col"] [class^="col"] [class^="col"]{background:#696969;color:#c0c0c0}.clearfix-demo{background:#58608d;width:100%;padding:10px}.clearfix-demo:before,.clearfix-demo:after{content:"";display:table}.clearfix-demo:after{clear:both}.ie6 .clearfix-demo,.ie7 .clearfix-demo{zoom:1}.clearfix-demo div{background:white}.despegar-size-1-demo{font-size:11px}.despegar-size-2-demo{font-size:13px}.despegar-size-3-demo{font-size:16px}.despegar-size-4-demo{font-size:20px}.despegar-size-5-demo{font-size:24px}.despegar-size-6-demo{font-size:28px}.despegar-black-demo{padding:10px;background:black;color:white}.despegar-white-demo{padding:10px;background:white}.despegar-yellow-demo{padding:10px;background:#ff3}.despegar-red-demo{padding:10px;background:red}.despegar-blue-demo{padding:10px;background:#013d93;color:white}.despegar-gray-1-demo{padding:10px;background:#222;color:white}.despegar-gray-2-demo{padding:10px;background:#444;color:white}.despegar-gray-3-demo{padding:10px;background:#666;color:white}.despegar-gray-4-demo{padding:10px;background:#888;color:white}.despegar-gray-5-demo{padding:10px;background:#aaa;color:white}.despegar-gray-6-demo{padding:10px;background:#ccc}.despegar-gray-7-demo{padding:10px;background:#eee}.despegar-searchbox-bg-demo{padding:10px;background:#ff3}.despegar-title-color-demo{padding:10px;background:#013d93;color:white}.despegar-titlealt-color-demo{padding:10px;background:#f90}.despegar-link-color-demo{padding:10px;background:#319fda}.despegar-link-color-hover-demo{padding:10px;background:#6cf}.despegar-error-bg-demo{padding:10px;background:#ffe6e6}.despegar-error-border-demo{padding:10px;background:red}.despegar-warning-bg-demo{padding:10px;background:#ffffe1}.despegar-warning-border-demo{padding:10px;background:#fc3}body{width:100%;max-width:100%;margin:0;padding:0;background-color:#f6f7f9}.styledocco-sidebar,.styledocco-docs>:not(.styledocco-example){box-sizing:content-box;margin:15px 20px;color:#334;line-height:1.618;font-family:sans-serif;-webkit-font-smoothing:subpixel-antialiased}.styledocco-sidebar,.styledocco-docs>p,.styledocco-docs>ul,.styledocco-docs>ol,.styledocco-docs>a{font-size:12px}.styledocco-docs>h1,.styledocco-docs>h2,.styledocco-docs>h3,.styledocco-docs>h4,.styledocco-docs>h5,.styledocco-docs>h6{font-weight:bold;margin:25px 20px 0!important;line-height:1.2!important;color:#555f6a!important}.styledocco-docs>:not(.styledocco-example) a{color:#27a;text-decoration:none}.styledocco-docs>:not(.styledocco-example) a:hover{color:#157;text-decoration:underline}.styledocco-docs>:not(.styledocco-example) a:visited{color:#146}.styledocco-docs>:not(.styledocco-example):not(pre) var,.styledocco-docs>:not(.styledocco-example):not(pre) code{padding:.1em 3px;background:rgba(0,0,0,.025);border:1px solid rgba(0,0,0,.05);border-radius:3px;font-style:normal;font-family:"Ubuntu Mono","Andale Mono","DejaVu Sans Mono","Monaco","Bitstream Vera Sans Mono","Consolas","Lucida Console",monospace}.styledocco-code pre code,.styledocco-docs>pre samp,.styledocco-docs>pre code{padding:0;background:transparent;border:0;font-family:"Ubuntu Mono","Andale Mono","DejaVu Sans Mono","Monaco","Bitstream Vera Sans Mono","Consolas","Lucida Console",monospace;font-size:12px}.styledocco-code code::selection,.styledocco-docs>pre code::selection{background:#248;color:#fff}.styledocco-container{width:95%;max-width:1500px;margin:0 auto}.styledocco-main{float:right;width:83%}.styledocco-sidebar{position:fixed;width:9%;padding:1%}.styledocco-section{position:relative;min-height:200px}.styledocco-sidebar{max-height:90%;overflow-y:auto;margin-top:20px;word-wrap:break-word;background-color:#777f88;border-radius:5px;box-shadow:0 0 5px rgba(0,0,0,.25);opacity:.75;-webkit-transition:opacity 2.5s;-moz-transition:opacity 2.5s;-o-transition:opacity 2.5s}.styledocco-sidebar:hover{opacity:1;-webkit-transition:opacity .5s;-moz-transition:opacity .5s;-o-transition:opacity .5s}.styledocco-sidebar a{text-decoration:none}.styledocco-brand{display:block;margin:0 0 10px;text-align:center;color:#eee;font-size:16px;font-weight:bold;text-shadow:rgba(0,0,0,.5) 0 0 1px}.styledocco-brand:hover{color:#fff;text-decoration:none}.styledocco-nav{margin:0;padding:0}.styledocco-nav-heading{display:block;padding:.3em 0;margin:.5em 0 0;color:#ddd;font-size:13px;text-shadow:rgba(0,0,0,.25) 0 0 1px}.styledocco-nav li{margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.1)}.styledocco-nav li:active,.styledocco-nav li:focus,.styledocco-nav li:hover{background:rgba(255,255,255,.2);border-color:transparent;border-radius:3px;text-decoration:none}.styledocco-nav li:active + li,.styledocco-nav li:focus + li,.styledocco-nav li:hover + li{border-color:transparent}.styledocco-nav a{display:block;padding:.2em 5%;color:#f7f7f7}.styledocco-docs{position:relative;width:58%;min-height:200px;margin:20px 0 40px;background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.1);border-radius:5px;box-shadow:0 0 3px rgba(0,0,0,.1)}.styledocco-code{position:absolute;top:5px;bottom:5px;right:0;width:42%;overflow:auto;padding:10px;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:0 5px 5px 0;border:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.75);opacity:.75;-webkit-transition:opacity .25s;-moz-transition:opacity .25s;-o-transition:opacity .25s}.styledocco-code:hover{opacity:1}.styledocco-example{margin-top:10px;padding:15px;overflow:auto;background:url(data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqaqmaaaalpw0iaaaaaxnsr0iars4c6qaaaazqtfrf+vr6////+o8bnqaaabbjrefucb1jypjpgbxheayafr8p8bm+jeoaaaaasuvork5cyii=);border-top:1px dotted #dcdce1}pre + .styledocco-example{margin-top:0;border-top:0}.styledocco-example:before,.styledocco-example:after{display:table;content:""}.styledocco-example:after{clear:both}.styledocco-docs>pre,.styledocco-code pre{white-space:pre-wrap;word-wrap:break-word;color:#445;margin:0!important;line-height:1.1!important}.styledocco-docs>.pilcrow{position:absolute;right:0;top:0;text-decoration:none;font-weight:bold;opacity:.5}.styledocco-docs>.pilcrow:hover{opacity:1}.styledocco-docs>pre{max-height:200px;overflow-y:auto;padding:10px 20px;background:#f8f9fb;border:1px solid rgba(220,220,225,.8);border-left:0;border-right:0}.styledocco-example + pre{border-top:1px dotted #dcdce1}.styledocco-docs>pre:first-child{border-top:0}.styledocco-docs>pre:last-child{border-bottom:0}.styledocco-code pre{padding:0;background:transparent;border:0}</style></head><body class="picasso-_components"><div class="styledocco-container"><div class="styledocco-sidebar"><a href="index.html" class="styledocco-brand">Picasso</a><ul class="styledocco-nav"><li><a href="_picasso.html">_picasso
|
3
|
+
</a></li></ul><strong class="styledocco-nav-heading">picasso</strong><ul class="styledocco-nav"><li><a href="picasso-_components.html">_components
|
4
|
+
</a></li><li><a href="picasso-_despegar.html">_despegar
|
5
|
+
</a></li><li><a href="picasso-_utils.html">_utils
|
6
|
+
</a></li></ul><strong class="styledocco-nav-heading">components</strong><ul class="styledocco-nav"><li><a href="picasso-components-_accordions.html">_accordions
|
7
|
+
</a></li><li><a href="picasso-components-_arrows.html">_arrows
|
8
|
+
</a></li><li><a href="picasso-components-_bubbles.html">_bubbles
|
9
|
+
</a></li><li><a href="picasso-components-_buttons.html">_buttons
|
10
|
+
</a></li><li><a href="picasso-components-_inputs.html">_inputs
|
11
|
+
</a></li><li><a href="picasso-components-_list-grids.html">_list-grids
|
12
|
+
</a></li><li><a href="picasso-components-_mini-tooltips.html">_mini-tooltips
|
13
|
+
</a></li><li><a href="picasso-components-_navs.html">_navs
|
14
|
+
</a></li><li><a href="picasso-components-_pagination.html">_pagination
|
15
|
+
</a></li><li><a href="picasso-components-_popups.html">_popups
|
16
|
+
</a></li></ul><strong class="styledocco-nav-heading">buttons</strong><ul class="styledocco-nav"><li><a href="picasso-components-buttons-_3d.html">_3d
|
17
|
+
</a></li><li><a href="picasso-components-buttons-_glossy.html">_glossy
|
18
|
+
</a></li><li><a href="picasso-components-buttons-_mini.html">_mini
|
19
|
+
</a></li></ul><strong class="styledocco-nav-heading">despegar</strong><ul class="styledocco-nav"><li><a href="picasso-despegar-_variables.html">_variables
|
20
|
+
</a></li></ul><strong class="styledocco-nav-heading">utils</strong><ul class="styledocco-nav"><li><a href="picasso-utils-_clearfix.html">_clearfix
|
21
|
+
</a></li><li><a href="picasso-utils-_grid.html">_grid
|
22
|
+
</a></li><li><a href="picasso-utils-_ie.html">_ie
|
23
|
+
</a></li><li><a href="picasso-utils-_sprite.html">_sprite
|
24
|
+
</a></li></ul></div><div class="styledocco-main"><div id="section-1" class="styledocco-section"><div class="styledocco-docs"><a href="#section-1" class="pilcrow">¶</a><h2>Components</h2>
|
25
|
+
<p> Representan a elementos comunes/patrones utilizados a lo largo del sitio.
|
26
|
+
Estan pensandos para ser flexibles y configurables para ser implementados en distintas situaciones.
|
27
|
+
La gran mayoría de los componentes hacen uso intensivo de estilos CSS3 y ofrecen estrategías
|
28
|
+
alternativas (<a href="https://encrypted.google.com/search?hl=en&q=fallback%20definition">fallback</a>) para navegadores
|
29
|
+
que no soportan dichos estilos (Internet Explorer <= 9).
|
30
|
+
Para tener compatibilidad con Internet Explorer, el único requisito es que la página que
|
31
|
+
carga los estilos generados por Picasso posean la <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">técnica de clases condicionales
|
32
|
+
en la etiqueta html</a>:
|
33
|
+
</p>
|
34
|
+
<div class="styledocco-example"> <!DOCTYPE html>
|
35
|
+
<!--[if IE 7]> <html class="ie7"> <![endif]-->
|
36
|
+
<!--[if IE 8]> <html class="ie8"> <![endif]-->
|
37
|
+
<!--[if IE 9]> <html class="ie9"> <![endif]-->
|
38
|
+
<!--[if gt IE 9]><!--> <html> <!--<![endif]--></div><pre><code> <!DOCTYPE html>
|
39
|
+
<!--[if IE 7]> <html class="ie7"> <![endif]-->
|
40
|
+
<!--[if IE 8]> <html class="ie8"> <![endif]-->
|
41
|
+
<!--[if IE 9]> <html class="ie9"> <![endif]-->
|
42
|
+
<!--[if gt IE 9]><!--> <html> <!--<![endif]--></code></pre>
|
43
|
+
<h3>Estrategias y estilos de fallback para IE en componentes</h3>
|
44
|
+
<p> Para ciertos componentes, Picasso ofrece dos estrategias para aplicar estilos de fallback.
|
45
|
+
Dichas estrategías se setean en variables individuales de cada componente,
|
46
|
+
por ejemplo: <code>$<componente>-ie-fallback: <estrategia></code>.
|
47
|
+
</p>
|
48
|
+
<p> Actualmente existen dos estrategías para determinados componentes:
|
49
|
+
</p>
|
50
|
+
<ul>
|
51
|
+
<li><code>sprites</code>: Picasso generará dinamicamente un sprite para recrear los estilos de cada elemento
|
52
|
+
y seteará los estilos para que Internet Explorer utilice el sprite generado.</li>
|
53
|
+
<li><code>GD</code>: Picasso seteará estilos minimos, soportados por Internet Explorer, para que el
|
54
|
+
componente siga siendo usable y funcional.</li>
|
55
|
+
</ul>
|
56
|
+
<h2>Componentes disponibles</h2>
|
57
|
+
<p> El sub-módulo <code>components</code> importa los siguientes componentes:
|
58
|
+
</p>
|
59
|
+
<ul>
|
60
|
+
<li><code>buttons</code> (<a href="picasso-components-_buttons.html">sección dedicada</a>)</li>
|
61
|
+
<li><code>inputs</code> (<a href="picasso-components-_inputs.html">sección dedicada</a>)</li>
|
62
|
+
<li><code>list-grids</code> (<a href="picasso-components-_list-grids.html">sección dedicada</a>)</li>
|
63
|
+
<li><code>arrows</code> (<a href="picasso-components-_arrows.html">sección dedicada</a>)</li>
|
64
|
+
<li><code>pagination</code> (<a href="picasso-components-_pagination.html">sección dedicada</a>)</li>
|
65
|
+
<li><code>bubbles</code> (<a href="picasso-components-_bubbles.html">sección dedicada</a>)</li>
|
66
|
+
<li><code>popups</code> (<a href="picasso-components-_popups.html">sección dedicada</a>)</li>
|
67
|
+
<li><code>accordions</code> (<a href="picasso-components-_accordions.html">sección dedicada</a>)</li>
|
68
|
+
<li><code>navs</code> (<a href="picasso-components-_navs.html">sección dedicada</a>)</li>
|
69
|
+
</ul>
|
70
|
+
<h3>Sass</h3>
|
71
|
+
<h4>Import</h4>
|
72
|
+
<p> <code>@import "picasso/components";</code>
|
73
|
+
</p>
|
74
|
+
</div><div class="styledocco-code"><pre><code>@import "components/buttons";
|
75
|
+
@import "components/inputs";
|
76
|
+
@import "components/list-grids";
|
77
|
+
@import "components/arrows";
|
78
|
+
@import "components/mini-tooltips";
|
79
|
+
@import "components/pagination";
|
80
|
+
@import "components/bubbles";
|
81
|
+
@import "components/popups";
|
82
|
+
@import "components/accordions";
|
83
|
+
@import "components/navs";</code></pre></div></div></div></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>(function(){"use strict";var a=function(a){return Array.prototype.slice.call(a,0)},b=function(a,b){return a+b},c=["link","visited","hover","active","focus","target","enabled","disabled","checked"],d=new RegExp(":(("+c.join(")|(")+"))","gi"),e=a(document.styleSheets).filter(function(a){return a.href==null}).map(function(c){return a(c.cssRules).filter(function(a){return a.selectorText&&a.selectorText.match(d)}).map(function(a){return a.cssText.replace(d,".\\3A $1")}).reduce(b)}).reduce(b,"");if(e.length){var f=document.createElement("style");return f.innerText=e,document.querySelectorAll("head")[0].appendChild(f)}})(),$(document).ready(function(){$(".accordion-header").click(function(){var a=$(this),b=a.parent().find(".accordion-content");b.slideToggle("fast"),a.hasClass("accordion-header-open")?(a.removeClass("accordion-header-open"),a.addClass("accordion-header-close")):(a.removeClass("accordion-header-close"),a.addClass("accordion-header-open"))})})</script></body></html><!-- Generated with StyleDocco (http://jacobrask.github.com/styledocco). -->
|