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
@@ -0,0 +1,359 @@
|
|
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>_popups | 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-_popups"><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>Popups</h2>
|
25
|
+
<p> Estilos para recrear popups.
|
26
|
+
</p>
|
27
|
+
<h3>Ejemplos</h3>
|
28
|
+
<h4>Ejemplo 1</h4>
|
29
|
+
<div class="styledocco-example"> <div class="popup-demo-1">
|
30
|
+
<div class="popup-container">
|
31
|
+
<div class="popup-header">
|
32
|
+
<h4>Aeropuerto</h4>
|
33
|
+
</div>
|
34
|
+
<div class="popup-content">
|
35
|
+
<p>Miami</p>
|
36
|
+
<p>Aeropuerto Internacional Miami</p>
|
37
|
+
</div>
|
38
|
+
</div>
|
39
|
+
<span class="popup-close">x</span>
|
40
|
+
<span class="popup-arrow popup-arrow-bottom"></span>
|
41
|
+
</div></div><pre><code> <div class="popup-demo-1">
|
42
|
+
<div class="popup-container">
|
43
|
+
<div class="popup-header">
|
44
|
+
<h4>Aeropuerto</h4>
|
45
|
+
</div>
|
46
|
+
<div class="popup-content">
|
47
|
+
<p>Miami</p>
|
48
|
+
<p>Aeropuerto Internacional Miami</p>
|
49
|
+
</div>
|
50
|
+
</div>
|
51
|
+
<span class="popup-close">x</span>
|
52
|
+
<span class="popup-arrow popup-arrow-bottom"></span>
|
53
|
+
</div></code></pre>
|
54
|
+
<h4>Ejemplo 2</h4>
|
55
|
+
<div class="styledocco-example"> <div class="popup-demo-2">
|
56
|
+
<div class="popup-container">
|
57
|
+
<div class="popup-content">
|
58
|
+
<p>Miami</p>
|
59
|
+
<p>Aeropuerto Internacional Miami</p>
|
60
|
+
</div>
|
61
|
+
</div>
|
62
|
+
</div></div><pre><code> <div class="popup-demo-2">
|
63
|
+
<div class="popup-container">
|
64
|
+
<div class="popup-content">
|
65
|
+
<p>Miami</p>
|
66
|
+
<p>Aeropuerto Internacional Miami</p>
|
67
|
+
</div>
|
68
|
+
</div>
|
69
|
+
</div></code></pre>
|
70
|
+
<p> Las clases para los 4 tipos de flecha son:
|
71
|
+
</p>
|
72
|
+
<ul>
|
73
|
+
<li><code>popup-arrow-top</code></li>
|
74
|
+
<li><code>popup-arrow-bottom</code></li>
|
75
|
+
<li><code>popup-arrow-left</code></li>
|
76
|
+
<li><code>popup-arrow-right</code></li>
|
77
|
+
</ul>
|
78
|
+
<h3>Sass</h3>
|
79
|
+
<h4>Import</h4>
|
80
|
+
<p> <code>@import "picasso/components/popups";</code>
|
81
|
+
</p>
|
82
|
+
<h4>Mixins</h4>
|
83
|
+
<p> Con los parámetros por defecto:
|
84
|
+
</p>
|
85
|
+
<p> <code>@include popup();</code>
|
86
|
+
</p>
|
87
|
+
<p> Con todos los parámetros:
|
88
|
+
|
89
|
+
</p>
|
90
|
+
<ul>
|
91
|
+
<li><code>background-color</code></li>
|
92
|
+
<li><code>border-radius</code></li>
|
93
|
+
<li><code>shadow</code></li>
|
94
|
+
<li><code>border-color</code></li>
|
95
|
+
<li><code>background-color</code> (botón cerrar)</li>
|
96
|
+
<li><code>color</code> (botón cerrar)</li>
|
97
|
+
<li><code>background-color</code> (título)</li>
|
98
|
+
<li><code>color</code> (título)</li>
|
99
|
+
</ul>
|
100
|
+
<p> <code>@include popup(black, 10px, rgba(0, 0, 0, 0.5) 0px 0px 20px, rgba(1, 61, 147, 0.7), blue, white, black, red);</code>
|
101
|
+
</p>
|
102
|
+
<h3>Fallback IE</h3>
|
103
|
+
<ul>
|
104
|
+
<li><code>$popup-ie-fallback</code>: Esta variable permite seleccionar la estrategia de estilos para mostrar el componente en Internet Explorer. Valores disponibles:
|
105
|
+
<code>sprites</code> / <code>GD</code>. Valor por defecto: <code>sprites</code>.</li>
|
106
|
+
</ul>
|
107
|
+
</div><div class="styledocco-code"><pre><code>@import "compass/css3/border-radius";
|
108
|
+
@import "compass/css3/box-shadow";
|
109
|
+
@import "picasso/utils/sprite";
|
110
|
+
@import "picasso/utils/ie";
|
111
|
+
|
112
|
+
$popup-default-background: white !default;
|
113
|
+
$popup-default-border-radius: 3px !default;
|
114
|
+
$popup-default-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px !default;
|
115
|
+
$popup-default-background-border: #000000 !default;
|
116
|
+
$popup-default-background-border-opacity: 0.7 !default;
|
117
|
+
$popup-default-close-button-background: #319FDA !default;
|
118
|
+
$popup-default-close-button-color: white !default;
|
119
|
+
$popup-default-title-background: none repeat scroll 0 0 #F7F7F7 !default;
|
120
|
+
$popup-default-title-color: #003770 !default;
|
121
|
+
|
122
|
+
$popup-default-arrow-height: 10px !default;
|
123
|
+
$popup-default-arrow-padding: 10px !default;
|
124
|
+
$popup-default-close-button-height: 20px !default;
|
125
|
+
$popup-default-close-button-border: 3px !default;
|
126
|
+
$popup-default-close-button-size: $popup-default-close-button-height + ($popup-default-close-button-border * 2) !default;
|
127
|
+
$popup-sprite-created: false !default;
|
128
|
+
$popup-sprite-name: "picasso-popup" !default;
|
129
|
+
$popup-ie-fallback: "sprites" !default;
|
130
|
+
|
131
|
+
@mixin popup(
|
132
|
+
$background: $popup-default-background,
|
133
|
+
$border-radius: $popup-default-border-radius,
|
134
|
+
$box-shadow: $popup-default-box-shadow,
|
135
|
+
$background-border: $popup-default-background-border,
|
136
|
+
$background-border-opacity: $popup-default-background-border-opacity,
|
137
|
+
$close-button-background: $popup-default-close-button-background,
|
138
|
+
$close-button-color: $popup-default-close-button-color,
|
139
|
+
$title-background: $popup-default-title-background,
|
140
|
+
$title-color: $popup-default-title-color
|
141
|
+
){
|
142
|
+
|
143
|
+
@include popup-layout();
|
144
|
+
@include popup-visual(
|
145
|
+
$background, $border-radius, $box-shadow, $background-border,
|
146
|
+
$background-border-opacity, $close-button-background, $close-button-color,
|
147
|
+
$title-background, $title-color);
|
148
|
+
}
|
149
|
+
|
150
|
+
@mixin popup-layout() {
|
151
|
+
padding: 10px;
|
152
|
+
position: absolute;
|
153
|
+
|
154
|
+
&:after, .ie7 & .after {
|
155
|
+
content: "";
|
156
|
+
position: absolute;
|
157
|
+
top: 0px;
|
158
|
+
left: 0px;
|
159
|
+
width: 100%;
|
160
|
+
height: 100%;
|
161
|
+
z-index: 0;
|
162
|
+
}
|
163
|
+
|
164
|
+
.popup-header{
|
165
|
+
|
166
|
+
h4{
|
167
|
+
line-height: 20px;
|
168
|
+
padding: 10px;
|
169
|
+
}
|
170
|
+
}
|
171
|
+
|
172
|
+
.popup-container {
|
173
|
+
z-index: 1;
|
174
|
+
position: relative;
|
175
|
+
}
|
176
|
+
|
177
|
+
.popup-arrow{
|
178
|
+
position: absolute;
|
179
|
+
height: 0px;
|
180
|
+
width: 0px;
|
181
|
+
}
|
182
|
+
|
183
|
+
.popup-arrow-bottom {
|
184
|
+
bottom: (-1) * $popup-default-arrow-height;
|
185
|
+
left: $popup-default-arrow-padding;
|
186
|
+
}
|
187
|
+
|
188
|
+
.popup-arrow-top {
|
189
|
+
top: (-1) * $popup-default-arrow-height;
|
190
|
+
left: $popup-default-arrow-padding;
|
191
|
+
}
|
192
|
+
|
193
|
+
.popup-arrow-left {
|
194
|
+
left: (-1) * $popup-default-arrow-height;
|
195
|
+
top: $popup-default-arrow-padding;
|
196
|
+
}
|
197
|
+
|
198
|
+
.popup-arrow-right {
|
199
|
+
right: (-1) * $popup-default-arrow-height;
|
200
|
+
top: $popup-default-arrow-padding;
|
201
|
+
}
|
202
|
+
|
203
|
+
.popup-close {
|
204
|
+
position: absolute;
|
205
|
+
z-index: 10;
|
206
|
+
text-align: center;
|
207
|
+
line-height: $popup-default-close-button-height - $popup-default-close-button-border;
|
208
|
+
height: $popup-default-close-button-height;
|
209
|
+
width: $popup-default-close-button-height;
|
210
|
+
top: (-1) * (($popup-default-close-button-height / 2) + $popup-default-close-button-border);
|
211
|
+
right: (-1) * (($popup-default-close-button-height / 2) + $popup-default-close-button-border);
|
212
|
+
}
|
213
|
+
|
214
|
+
.ie7 &, .ie8 & {
|
215
|
+
|
216
|
+
@if $popup-ie-fallback == "sprites" {
|
217
|
+
|
218
|
+
.popup-close {
|
219
|
+
line-height: $popup-default-close-button-size - $popup-default-close-button-border;
|
220
|
+
height: $popup-default-close-button-size;
|
221
|
+
width: $popup-default-close-button-size;
|
222
|
+
top: (-1) * (($popup-default-close-button-size / 2));
|
223
|
+
right: (-1) * (($popup-default-close-button-size / 2));
|
224
|
+
}
|
225
|
+
|
226
|
+
}
|
227
|
+
|
228
|
+
}
|
229
|
+
|
230
|
+
.ie7 & {
|
231
|
+
@include after;
|
232
|
+
}
|
233
|
+
|
234
|
+
}
|
235
|
+
|
236
|
+
@mixin popup-visual(
|
237
|
+
$background: $popup-default-background,
|
238
|
+
$border-radius: $popup-default-border-radius,
|
239
|
+
$box-shadow: $popup-default-box-shadow,
|
240
|
+
$background-border: $popup-default-background-border,
|
241
|
+
$background-border-opacity: $popup-default-background-border-opacity,
|
242
|
+
$close-button-background: $popup-default-close-button-background,
|
243
|
+
$close-button-color: $popup-default-close-button-color,
|
244
|
+
$title-background: $popup-default-title-background,
|
245
|
+
$title-color: $popup-default-title-color
|
246
|
+
) {
|
247
|
+
|
248
|
+
&:after, .ie7 & .after {
|
249
|
+
background: rgba($background-border, $background-border-opacity);
|
250
|
+
@include border-radius($border-radius);
|
251
|
+
@include box-shadow($box-shadow);
|
252
|
+
}
|
253
|
+
|
254
|
+
.popup-header{
|
255
|
+
background: $title-background;
|
256
|
+
display: block;
|
257
|
+
|
258
|
+
h4{
|
259
|
+
margin: 0;
|
260
|
+
color: $title-color;
|
261
|
+
font-family: sans-serif;
|
262
|
+
font-size: 16px;
|
263
|
+
font-weight: normal;
|
264
|
+
}
|
265
|
+
|
266
|
+
}
|
267
|
+
|
268
|
+
.popup-content {
|
269
|
+
background: $background;
|
270
|
+
border: 1px solid transparent;
|
271
|
+
}
|
272
|
+
|
273
|
+
.popup-arrow-bottom {
|
274
|
+
border-left: $popup-default-arrow-height solid transparent;
|
275
|
+
border-right: $popup-default-arrow-height solid transparent;
|
276
|
+
border-top: $popup-default-arrow-height solid rgba($background-border, $background-border-opacity);
|
277
|
+
}
|
278
|
+
|
279
|
+
.popup-arrow-top {
|
280
|
+
border-left: $popup-default-arrow-height solid transparent;
|
281
|
+
border-right: $popup-default-arrow-height solid transparent;
|
282
|
+
border-bottom: $popup-default-arrow-height solid rgba($background-border, $background-border-opacity);
|
283
|
+
}
|
284
|
+
|
285
|
+
.popup-arrow-left {
|
286
|
+
border-top: $popup-default-arrow-height solid transparent;
|
287
|
+
border-bottom: $popup-default-arrow-height solid transparent;
|
288
|
+
border-right: $popup-default-arrow-height solid rgba($background-border, $background-border-opacity);
|
289
|
+
}
|
290
|
+
|
291
|
+
.popup-arrow-right {
|
292
|
+
border-top: $popup-default-arrow-height solid transparent;
|
293
|
+
border-bottom: $popup-default-arrow-height solid transparent;
|
294
|
+
border-left: $popup-default-arrow-height solid rgba($background-border, $background-border-opacity);
|
295
|
+
}
|
296
|
+
|
297
|
+
.popup-close {
|
298
|
+
cursor: pointer;
|
299
|
+
border: $popup-default-close-button-border solid $close-button-color;
|
300
|
+
color: $close-button-color;
|
301
|
+
font-weight: bold;
|
302
|
+
font-family: sans-serif;
|
303
|
+
font-size: 16px;
|
304
|
+
background: $close-button-background;
|
305
|
+
@include border-radius($popup-default-close-button-height);
|
306
|
+
@include box-shadow($box-shadow);
|
307
|
+
}
|
308
|
+
|
309
|
+
.ie7 &, .ie8 & {
|
310
|
+
|
311
|
+
&:after, & .after {
|
312
|
+
background: $background-border;
|
313
|
+
filter: alpha(opacity = ($background-border-opacity * 100));
|
314
|
+
}
|
315
|
+
|
316
|
+
.popup-arrow {
|
317
|
+
filter: alpha(opacity = ($background-border-opacity * 100));
|
318
|
+
}
|
319
|
+
|
320
|
+
.popup-arrow-bottom {
|
321
|
+
border-top: $popup-default-arrow-height solid $background-border;
|
322
|
+
}
|
323
|
+
|
324
|
+
.popup-arrow-top {
|
325
|
+
border-bottom: $popup-default-arrow-height solid $background-border;
|
326
|
+
}
|
327
|
+
|
328
|
+
.popup-arrow-left {
|
329
|
+
border-right: $popup-default-arrow-height solid $background-border;
|
330
|
+
}
|
331
|
+
|
332
|
+
.popup-arrow-right {
|
333
|
+
border-left: $popup-default-arrow-height solid $background-border;
|
334
|
+
}
|
335
|
+
|
336
|
+
@if $popup-ie-fallback == "sprites" {
|
337
|
+
|
338
|
+
.popup-close {
|
339
|
+
border-width: 0px;
|
340
|
+
background-color: transparent;
|
341
|
+
|
342
|
+
$popup-close-image: magick-canvas($popup-default-close-button-size, $popup-default-close-button-size,
|
343
|
+
magick-fill($close-button-background),
|
344
|
+
magick-corners($popup-default-close-button-size / 2),
|
345
|
+
magick-border($close-button-color, ($popup-default-close-button-size / 2), $popup-default-close-button-border)
|
346
|
+
);
|
347
|
+
|
348
|
+
$initial-position: insert-in-sprite($popup-sprite-created, $popup-sprite-name, $popup-close-image, $popup-default-close-button-size, $popup-default-close-button-size);
|
349
|
+
$popup-sprite-created: true;
|
350
|
+
|
351
|
+
background-image: generated-image-url($popup-sprite-name + ".png");
|
352
|
+
background-position: 0px ((-1) * $initial-position);
|
353
|
+
}
|
354
|
+
|
355
|
+
}
|
356
|
+
|
357
|
+
}
|
358
|
+
|
359
|
+
}</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). -->
|
@@ -0,0 +1,284 @@
|
|
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>_3d | 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-_3d"><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>3D Buttons</h2>
|
25
|
+
<h3>Ejemplos</h3>
|
26
|
+
<h4>Normales</h4>
|
27
|
+
<div class="styledocco-example"> <a class="button-3d-demo-1">
|
28
|
+
<span>Comprar</span>
|
29
|
+
</a>
|
30
|
+
<a class="button-3d-demo-2">
|
31
|
+
<span>Buscar</span>
|
32
|
+
</a>
|
33
|
+
<a class="button-3d-demo-3">
|
34
|
+
<span>Reservar</span>
|
35
|
+
</a></div><pre><code> <a class="button-3d-demo-1">
|
36
|
+
<span>Comprar</span>
|
37
|
+
</a>
|
38
|
+
<a class="button-3d-demo-2">
|
39
|
+
<span>Buscar</span>
|
40
|
+
</a>
|
41
|
+
<a class="button-3d-demo-3">
|
42
|
+
<span>Reservar</span>
|
43
|
+
</a></code></pre>
|
44
|
+
<h4>Desactivados</h4>
|
45
|
+
<div class="styledocco-example"> <a class="button-3d-demo-1 disabled">
|
46
|
+
<span>Comprar</span>
|
47
|
+
</a>
|
48
|
+
<a class="button-3d-demo-2 disabled">
|
49
|
+
<span>Buscar</span>
|
50
|
+
</a>
|
51
|
+
<a class="button-3d-demo-3 disabled">
|
52
|
+
<span>Reservar</span>
|
53
|
+
</a></div><pre><code> <a class="button-3d-demo-1 disabled">
|
54
|
+
<span>Comprar</span>
|
55
|
+
</a>
|
56
|
+
<a class="button-3d-demo-2 disabled">
|
57
|
+
<span>Buscar</span>
|
58
|
+
</a>
|
59
|
+
<a class="button-3d-demo-3 disabled">
|
60
|
+
<span>Reservar</span>
|
61
|
+
</a></code></pre>
|
62
|
+
<h4>Variante: ancho 100%</h4>
|
63
|
+
<div class="styledocco-example"> <a class="button-3d-demo-4">
|
64
|
+
<span>Full-width</span>
|
65
|
+
</a></div><pre><code> <a class="button-3d-demo-4">
|
66
|
+
<span>Full-width</span>
|
67
|
+
</a></code></pre>
|
68
|
+
<h4>Variante: bordes redondeados 100%</h4>
|
69
|
+
<div class="styledocco-example"> <a class="button-3d-demo-5">
|
70
|
+
<span>Full-rounded</span>
|
71
|
+
</a>
|
72
|
+
<a class="button-3d-demo-5 disabled">
|
73
|
+
<span>Full-rounded disabled</span>
|
74
|
+
</a></div><pre><code> <a class="button-3d-demo-5">
|
75
|
+
<span>Full-rounded</span>
|
76
|
+
</a>
|
77
|
+
<a class="button-3d-demo-5 disabled">
|
78
|
+
<span>Full-rounded disabled</span>
|
79
|
+
</a></code></pre>
|
80
|
+
<h3>Sass</h3>
|
81
|
+
<h4>Import</h4>
|
82
|
+
<p> <code>@import "picasso/components/buttons";</code>
|
83
|
+
</p>
|
84
|
+
<h4>Mixins</h4>
|
85
|
+
<p> Con los parámetros por defecto:
|
86
|
+
</p>
|
87
|
+
<p> <code>@include button-3d();</code>
|
88
|
+
</p>
|
89
|
+
<p> Con todos los parámetros:
|
90
|
+
|
91
|
+
</p>
|
92
|
+
<ul>
|
93
|
+
<li><code>background-color</code></li>
|
94
|
+
<li><code>color</code></li>
|
95
|
+
<li><code>font-size</code></li>
|
96
|
+
<li><code>full-width</code></li>
|
97
|
+
<li><code>full-rounded</code></li>
|
98
|
+
</ul>
|
99
|
+
<p> <code>@include button-3d(red, white, 24px, true, true);</code>
|
100
|
+
</p>
|
101
|
+
<h3>Fallback IE</h3>
|
102
|
+
<p> La estrategia de los botones es siempre graceful degradation.
|
103
|
+
</p>
|
104
|
+
</div><div class="styledocco-code"><pre><code>@import "compass/css3/images";
|
105
|
+
@import "compass/css3/border-radius";
|
106
|
+
@import "compass/css3/text-shadow";
|
107
|
+
@import "compass/css3/box-shadow";
|
108
|
+
@import "compass/css3/opacity";
|
109
|
+
@import "picasso/utils/sprite";
|
110
|
+
|
111
|
+
$button-3d-default-background : #F73741 !default;
|
112
|
+
$button-3d-default-color : white !default;
|
113
|
+
$button-3d-default-font-size : 13px !default;
|
114
|
+
$button-3d-default-full-width : false !default;
|
115
|
+
$button-3d-default-full-rounded : false !default;
|
116
|
+
|
117
|
+
$button-3d-default-disabled-class : "disabled" !default;
|
118
|
+
$button-3d-default-disabled-background-top : #979797 !default;
|
119
|
+
$button-3d-default-disabled-background-bottom : #4B4B4B !default;
|
120
|
+
$button-3d-default-disabled-border : #755354 !default;
|
121
|
+
$button-3d-default-disabled-color : #FFF !default;
|
122
|
+
|
123
|
+
@mixin button-3d(
|
124
|
+
|
125
|
+
// Background del boton
|
126
|
+
$background: $button-3d-default-background,
|
127
|
+
|
128
|
+
// Color del botón
|
129
|
+
$color: $button-3d-default-color,
|
130
|
+
|
131
|
+
// Tamaño de la fuente del botón
|
132
|
+
$font-size: $button-3d-default-font-size,
|
133
|
+
|
134
|
+
// Boton ancho al 100%
|
135
|
+
$full-width: $button-3d-default-full-width,
|
136
|
+
|
137
|
+
// Boton con bordes al 100%
|
138
|
+
$full-rounded: $button-3d-default-full-rounded
|
139
|
+
|
140
|
+
){
|
141
|
+
|
142
|
+
@include button-3d-layout($font-size, $full-width, $full-rounded);
|
143
|
+
@include button-3d-visual($background, $color, $font-size, $full-rounded);
|
144
|
+
|
145
|
+
}
|
146
|
+
|
147
|
+
@mixin button-3d-layout($font-size, $full-width, $full-rounded){
|
148
|
+
|
149
|
+
overflow: hidden;
|
150
|
+
|
151
|
+
@if $full-width == true {
|
152
|
+
display: block;
|
153
|
+
} @else {
|
154
|
+
display: inline-block;
|
155
|
+
}
|
156
|
+
|
157
|
+
@if $full-rounded == true {
|
158
|
+
line-height: 1.75em;
|
159
|
+
} @else {
|
160
|
+
line-height: 2.2em;
|
161
|
+
}
|
162
|
+
|
163
|
+
&:active {
|
164
|
+
position:relative;
|
165
|
+
top:1px;
|
166
|
+
}
|
167
|
+
|
168
|
+
&.#{$button-3d-default-disabled-class}:active {
|
169
|
+
position:static;
|
170
|
+
}
|
171
|
+
|
172
|
+
span{
|
173
|
+
display: block;
|
174
|
+
padding: 0 $font-size;
|
175
|
+
}
|
176
|
+
|
177
|
+
}
|
178
|
+
|
179
|
+
|
180
|
+
@mixin button-3d-visual($background, $color, $font-size, $full-rounded){
|
181
|
+
|
182
|
+
color: $color;
|
183
|
+
border: 1px solid darken($background, 20);
|
184
|
+
font-family: sans-serif;
|
185
|
+
font-size: $font-size;
|
186
|
+
text-decoration:none;
|
187
|
+
text-align: center;
|
188
|
+
cursor: pointer;
|
189
|
+
@include text-shadow(0 1px 0 desaturate(invert($color), 100));
|
190
|
+
|
191
|
+
@if $full-rounded == true {
|
192
|
+
@include border-radius(1.1em);
|
193
|
+
} @else {
|
194
|
+
@include border-radius(0.4em);
|
195
|
+
}
|
196
|
+
|
197
|
+
&:visited {
|
198
|
+
color: $color;
|
199
|
+
}
|
200
|
+
|
201
|
+
&:hover {
|
202
|
+
text-decoration: none;
|
203
|
+
color: $color;
|
204
|
+
}
|
205
|
+
|
206
|
+
span {
|
207
|
+
background-color: $background;
|
208
|
+
@include background-image(linear-gradient($background, darken($background, 30)));
|
209
|
+
@include box-shadow(
|
210
|
+
0 0.1em 0.1em rgba(0, 0, 0, 0.5),
|
211
|
+
inset 0 0.1em 0 rgba(255, 255, 255, 0.5)
|
212
|
+
);
|
213
|
+
|
214
|
+
&:hover{
|
215
|
+
background-color: saturate($background, 10);
|
216
|
+
@include background-image(linear-gradient(rgba(255, 255, 255, 0), darken($background, 20)));
|
217
|
+
@include box-shadow(
|
218
|
+
0 0.1em 0.1em rgba(0, 0, 0, 0.5),
|
219
|
+
inset 0 0.1em 0 rgba(255, 255, 255, 0.5),
|
220
|
+
inset 0 0 1em saturate($background, 10)
|
221
|
+
);
|
222
|
+
}
|
223
|
+
|
224
|
+
&:active{
|
225
|
+
@include text-shadow(0 -1px 0 desaturate(invert($color), 100));
|
226
|
+
@include background-image(linear-gradient($background, darken($background, 30)));
|
227
|
+
@include box-shadow(
|
228
|
+
0 0.1em 0.1em rgba(0, 0, 0, 0.1),
|
229
|
+
inset 0 0.1em 0.2em rgba(0, 0, 0, 0.5),
|
230
|
+
inset 0 0.1em 0 rgba(0, 0, 0, 0.1),
|
231
|
+
inset 0 0 1em rgba(0, 0, 0, 0.75)
|
232
|
+
);
|
233
|
+
}
|
234
|
+
|
235
|
+
}
|
236
|
+
|
237
|
+
&.#{$button-3d-default-disabled-class} {
|
238
|
+
border: 1px solid $button-3d-default-disabled-border;
|
239
|
+
cursor: not-allowed;
|
240
|
+
color: $button-3d-default-disabled-color;
|
241
|
+
|
242
|
+
span{
|
243
|
+
|
244
|
+
&, &:hover, &:active{
|
245
|
+
@include text-shadow(0 -1px 0 #000);
|
246
|
+
@include background-image(linear-gradient($button-3d-default-disabled-background-top, $button-3d-default-disabled-background-bottom));
|
247
|
+
@include box-shadow(
|
248
|
+
0 0.1em 0.1em rgba(0, 0, 0, 0.5),
|
249
|
+
inset 0 0.1em 0 rgba(255, 255, 255, 0.25),
|
250
|
+
inset 0 0 1em rgba(0, 0, 0, 0.75)
|
251
|
+
);
|
252
|
+
|
253
|
+
}
|
254
|
+
|
255
|
+
}
|
256
|
+
|
257
|
+
}
|
258
|
+
|
259
|
+
.ie7 &, .ie8 &, .ie9 &{
|
260
|
+
|
261
|
+
span {
|
262
|
+
@include filter-gradient(rgba(red($background), green($background), blue($background), 0), darken($background, 30));
|
263
|
+
|
264
|
+
&:hover {
|
265
|
+
@include filter-gradient(rgba(255, 255, 255, 0), darken($background, 20));
|
266
|
+
}
|
267
|
+
|
268
|
+
&:active {
|
269
|
+
@include filter-gradient(rgba(red($background), green($background), blue($background), 0), darken($background, 30));
|
270
|
+
}
|
271
|
+
|
272
|
+
}
|
273
|
+
|
274
|
+
&.#{$button-3d-default-disabled-class} {
|
275
|
+
|
276
|
+
span, span:hover, span:active{
|
277
|
+
@include filter-gradient($button-3d-default-disabled-background-top, $button-3d-default-disabled-background-bottom);
|
278
|
+
}
|
279
|
+
|
280
|
+
}
|
281
|
+
|
282
|
+
}
|
283
|
+
|
284
|
+
}</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). -->
|