.category{background:#f2d7ea;border:none;width:100%}.category .title{overflow:hidden;background:url(../images/button-bg.png) 94% 50% no-repeat #986286;background-size:15px 15px;border-bottom:1px solid rgba(0,0,0,.1);border-radius:0;box-shadow:none;color:#fff;cursor:pointer;font-family:Exo,sans-serif;font-size:16px;font-weight:500;float:none;height:55px;letter-spacing:2px;line-height:55px;margin:0;outline:0;padding:0;text-align:left;text-indent:20px;text-transform:uppercase;transition:color .5s ease-in-out;width:100%}.challenge>.menu .help,.done-overlay .left>.paragraph a,.gif .action-bar .gwt-Button.animate-gif:before,body{font-family:"Open Sans",sans-serif}.category.closed .title{overflow:hidden;background:url(../images/button-bg-expand.png) 94% 50% no-repeat #986286;background-size:15px 15px;display:block;height:55px;width:100%}.output.hidden,.workspace>.cover.hidden{display:none}.category>.title[disabled]{background:#d9aacb;color:#bd7ba9;cursor:not-allowed;transition:color .5s ease-in-out}.category>.content{width:242px;padding:0 6px}.categories .category.open .content{display:block;overflow:visible}.categories .category.closed .content,.categories .category.disabled .content{display:none;overflow:hidden}.category>.content>.dispenser{position:relative;background-repeat:no-repeat;cursor:url(/static/emoji/blockly/media/handopen.cur) 8 5,auto;margin:15px auto 10px;text-align:center}.category>.content>.dispenser img{max-width:100%;width:100%}.category>.content.values>.dispenser{margin-left:auto;margin-right:auto;display:block}.challenge{font-size:1em/12px;margin:30px auto 80px;height:775px;max-width:1200px;overflow:hidden;position:relative;width:calc(100% - 30px);z-index:2;background:#fff;box-shadow:0 3px 26px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}.challenge *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (max-width:1145px) and (min-width:960px) and (orientation:landscape){.challenge{height:638px;margin:10px auto 30px;width:calc(100% - 20px)}}@media (max-width:1280px) and (min-width:960px) and (orientation:landscape){.tablet .challenge{height:100%;margin:0 auto;width:100%;max-width:1280px}}@media (max-height:890px) and (min-height:760px) and (min-width:1145px){.challenge{height:calc(100% - 120px);margin:30px auto}}@media (max-height:760px) and (min-width:1145px){.challenge{height:640px;margin:30px auto}.page-container{height:auto!important}}@media (max-height:720px) and (min-height:620px) and (min-width:1009px) and (max-width:1144px){.challenge{height:calc(100% - 80px);margin:10px auto}}@media (max-height:619px) and (min-width:1009px) and (max-width:1144px){.challenge{height:540px;margin:10px auto}.page-container{height:auto!important}}@media (max-height:720px) and (min-height:510px) and (max-width:1008px){.challenge{height:calc(100% - 80px);margin:10px auto}}@media (max-height:509px) and (max-width:1008px){.challenge{height:425px;margin:10px auto}.page-container{height:auto!important}}.done.challenge{height:600px}.step-selector{float:right;height:60px}.step-selector>div{float:left}.step-selector .step{background:#ae639c;border-radius:100%;box-shadow:none;color:#fff;float:left;height:26px;line-height:0;margin:17px 0 0;transition:all .5s ease-in-out;width:26px;cursor:default}.step-selector .dash{background:#eeecf1;border-radius:10px;float:left;height:2px;margin:29px 5px 0;width:15px}.step-selector .step[disabled]{background:#eee;color:#fff}.step-selector .done{border-radius:5px;height:26px;line-height:26px;padding:0 10px;margin:17px 0 0}.challenge>.menu{background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.05);height:60px;position:relative;z-index:12}.challenge>.menu .mobile{display:none}.challenge>.menu .help{background:#ae639c;border-radius:100%;box-shadow:none;color:#fff;cursor:pointer;float:right;font-size:15px;font-weight:700;height:26px;letter-spacing:0;line-height:26px;margin:17px 20px 0;outline:0;padding:0;text-align:center;text-transform:uppercase;transition:all .5s ease-in-out;width:26px}.challenge>.menu .title{color:#000;font-weight:700;font-size:14px;float:left;letter-spacing:2px;line-height:61px;position:relative;text-align:left;text-indent:20px;text-transform:uppercase;z-index:13}.coordinate-display{background:rgba(255,255,255,.9);color:#e0a3ce;display:inline-block;padding:5px;position:absolute;right:60px;text-transform:uppercase;width:90px;top:60px;z-index:20}.coordinate-display .x,.coordinate-display .y{float:left;font-weight:700;font-size:12px;width:40px}.coordinate-display .x:before{content:"X: "}.coordinate-display .y:before{content:"Y: "}@media (max-width:1280px) and (min-width:960px) and (orientation:landscape){.coordinate-display{right:45px;top:45px}}.challenge img.ghost{position:absolute;left:0;top:0;display:none}.action-bar{margin:-50px auto 0;width:478px;text-align:center;z-index:10;position:relative;display:none}.action-bar.show{display:block}.action-bar>.action{display:inline-block}.framebox>div>.gwt-Label,.gif .action-bar .gwt-Button.animate-gif:before{bottom:-27px;display:block;font-size:12px;line-height:25px;letter-spacing:1px;text-transform:uppercase}.framebox{height:100%;margin:0;position:relative;width:100%}.gif .action-bar .action .gwt-Button-animating,.gif .action-bar .gwt-Button.animate-gif{border:2px solid #f3cbe7;box-shadow:none;height:97px;margin:0;overflow:visible;width:98px;transition:none;padding:0}.gif .action-bar .gwt-Button.animate-gif{background:url(../images/play.png) center center no-repeat #be76ae;cursor:pointer;position:absolute;right:0;top:0;border-radius:0}.gif .action-bar .action .gwt-Button-animating{background:url(../images/pause.png) center center no-repeat #be76ae;border-radius:0}.gif .action-bar .gwt-Button.animate-gif:before{background:#fff;border:2px solid #f3cbe7;color:#f3cbe7;content:"Play";font-weight:600;height:23px;left:-2px;position:absolute;width:94px}.gif .action-bar .action .gwt-Button-animating:before{content:"Pause"}.framebox>div{border:2px solid #f3cbe7;border-right:none;box-sizing:content-box!important;-moz-box-sizing:content-box!important;height:93px;position:absolute;top:0;width:93px}.gif-frame-0{left:0}.gif-frame-1{left:95px}.gif-frame-2{left:190px}.gif-frame-3{left:285px}.framebox>div>canvas{height:100%;width:100%}.action-bar canvas{outline:0}.framebox>.active-frame>.gwt-Label{background:#d9aacb;color:#fff}.framebox>div>.gwt-Label{background:#fff;border:2px solid #f3cbe7;border-top:none;border-right:none;color:#f3cbe7;font-weight:700;height:25px;left:-2px;position:absolute;width:95px}.page-container,body{height:100%;margin:0;width:100%}body{padding:0;font-size:12px/1em;-webkit-font-smoothing:antialiased;font-weight:400}body *{box-sizing:border-box;outline:0;-webkit-tap-highlight-color:transparent}.page-container{background:url(../images/diamond-background.png) #d9a9cd;overflow:auto}.hidden{display:none}button{border:none;cursor:pointer}.button-large,.button-small{background:#ae639c;border:none;border-radius:3px;color:#fff;cursor:pointer;display:inline-block;font-weight:800;letter-spacing:.2em;margin:0 2px;padding:0 30px;text-align:center;text-decoration:none;text-shadow:0 1px rgba(0,0,0,.1);text-transform:uppercase;transition:background .25s ease-in-out}.button-small{box-shadow:0 2px 0 0 rgba(0,0,0,.1);font-size:12px;height:39px;line-height:39px}.categories,.output,.workspace{height:100%;position:absolute}.button-large[disabled],.button-small[disabled]{background:#eee;box-shadow:none;cursor:not-allowed!important}.categories{background:url(../images/grid-desktop.png);background-size:48px 48px!important;padding-bottom:60px;width:242px}.workspace{background:#fff;padding-bottom:60px;left:242px;width:calc(100% - 820px)}.workspace img{margin-top:30px;position:absolute;left:50%;margin-left:-122px;display:none}@media (max-width:1145px) and (min-width:1010px) and (orientation:landscape){.workspace{min-width:245px;width:calc(100% - 722px)}}@media (max-width:1009px) and (min-width:960px) and (orientation:landscape){.workspace{padding-bottom:60px;min-width:245px;width:calc(100% - 609px)}}.output{background:url(../images/grid-48x48.png);overflow:visible;right:0;top:60px;width:578px}@media (max-width:1145px) and (min-width:1010px) and (orientation:landscape){.output{height:578px;width:480px}}@media (max-width:1009px) and (min-width:960px) and (orientation:landscape){.output{height:578px;width:370px;background-size:9%}}.preview{overflow:hidden;background:url(../images/grid-numbers-desktop.png) no-repeat;background-size:contain!important;box-sizing:content-box;height:478px;outline:0;padding:50px;position:relative;right:0;width:478px;z-index:10}@media (max-width:1145px) and (min-width:1010px) and (orientation:landscape){.preview,.preview canvas{height:382px;width:382px}}@media (max-width:1009px) and (min-width:960px) and (orientation:landscape){.preview,.preview canvas{height:297px;width:297px}.preview{padding:34px}}.canvas-container{background:#eee;height:100%;width:100%}.close,.close-white{height:18px;padding:0;position:absolute;right:25px;text-transform:lowercase;top:22px;transition:all .5s ease-in-out;width:18px;overflow:hidden}.close{background:url(../images/close-hover.png) no-repeat;background-size:contain!important}.close-white{background:url(../images/close-hover-white.png) no-repeat;background-size:contain!important}.close:hover{background:url(../images/close.png) no-repeat}.blockly-frame{background:0 0;border:none;position:relative;height:100%;width:100%}.actions.download .save .icon{overflow:hidden;background:url(../images/download.png) no-repeat;display:inline-block;height:.75em;width:1em;background-size:auto 100%}.done-overlay .left>.paragraph a{color:#bc7ba8;font-weight:700;text-decoration:none;font-size:16px}.desktop-tooltip,.desktop-tooltip-right{background:#676cff;border-radius:5px;box-shadow:2px 2px 2px rgba(0,0,0,.2);color:#fff;font-size:12px;max-width:400px;opacity:.95;padding:15px 30px 15px 15px;position:absolute;text-shadow:1px 1px 0 rgba(0,0,0,.2);z-index:100}.desktop-tooltip-right>.close,.desktop-tooltip>.close{overflow:hidden;background:url(../images/close-tooltip.png) no-repeat;background-size:contain!important;border:none;box-shadow:none;cursor:pointer;height:8px;padding:0;position:absolute;right:10px;text-shadow:none;top:10px;width:8px}.desktop-tooltip:after{border-bottom:10px solid transparent;border-right:10px solid #676cff;border-top:10px solid transparent;content:"";display:block;left:-10px;margin-top:-10px;position:absolute;top:50%}#browser-fallback,#mobile-fallback,#rotate-fallback,#system-fallback{font-family:Exo,sans-serif;font-weight:700;text-align:center;display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;z-index:9999}.mobile-copy,.overlay .message{font-family:"Droid Serif",serif}#browser-fallback.show,#system-fallback.show{display:block}@media (max-width:959px){#mobile-fallback{display:block}}#browser-fallback .message,#mobile-fallback .message,#rotate-fallback .message,#system-fallback .message{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mobile-h1{margin-left:auto;margin-right:auto;letter-spacing:1px;margin-bottom:20px;font-size:18px;text-transform:uppercase;width:300px;line-height:24px}.mobile-copy{-ms-font-feature-settings:normal;font-weight:400;font-size:15px;color:#999;line-height:22px}#mobile-fallback img,#rotate-fallback img{display:block;margin:20px auto}#browser-fallback .button-small,#mobile-fallback .button-small,#system-fallback .button-small{background:#ae639c;border:none;border-radius:3px;color:#fff;cursor:pointer;display:inline-block;font-weight:800;letter-spacing:.2em;margin:0 2px;padding:0 30px;text-align:center;text-decoration:none;text-shadow:0 1px rgba(0,0,0,.1);text-transform:uppercase;transition:background .25s ease-in-out;box-shadow:0 2px 0 0 rgba(0,0,0,.1);font-size:12px;height:39px;line-height:39px}@media (min-height:300px){#browser-fallback .message,#mobile-fallback .message,#system-fallback .message{width:93%}#browser-fallback img,#mobile-fallback img,#system-fallback img{margin:15px auto}#browser-fallback p,#mobile-fallback p,#system-fallback p{margin-top:10px}.mobile-h1{margin-bottom:10px}}@media all and (min-height:775px) and (orientation:portrait){.tablet #rotate-fallback{display:block}}.page-container>.overlay{height:775px;left:50%;margin:30px 0 0 -600px}.overlay{background:rgba(0,0,0,.6);left:0;height:100%;position:absolute;top:0;width:100%;z-index:101}.overlay .content .close{top:10px;right:31%}.overlay .content{display:table;margin:160px auto 0;width:40%;background-color:#fff}@media (max-width:1145px) and (min-width:960px) and (orientation:landscape){.overlay{display:table}.overlay .content{margin-top:0;position:relative}.overlay>div{display:table-row;height:100%}.overlay>div>div{display:table-cell;height:100%;vertical-align:middle}.overlay .content .close{right:10px}}.tablet .overlay .content{width:70%}.overlay .right{display:table-cell;vertical-align:middle;padding:40px}.overlay .message-action{margin:-30px 0 0;padding:20px 0;text-align:center}.overlay .message{font-size:14px;font-weight:500;line-height:23px;margin:0}.overlay .message>h1{color:#66676b;font-family:Exo,sans-serif;font-size:18px;font-weight:800;letter-spacing:3px;margin:20px 0 0;text-align:center;text-transform:uppercase}.overlay .message a{color:#bc7ba8;font-family:"Open Sans",sans-serif;font-weight:800;text-decoration:none}.overlay .action{margin:30px 0 0}.overlay .message>p{margin:0}.done-overlay{left:0;height:100%;min-height:600px;top:0;width:100%;z-index:100;overflow:hidden;background:#fff;position:absolute}.done .done-overlay{display:block}.done-overlay .content{position:relative;display:block;width:100%;height:630px}.done-overlay .left{display:table-cell;text-align:center;width:100%;vertical-align:middle}.done-overlay .left>h1{font-family:Exo,sans-serif;color:#66676b;text-transform:uppercase;font-size:22pt;padding-top:0}.done-overlay .left>.lesson{font-family:Droid Serif;font-size:16px;color:#66676b;padding:0 40px;line-height:1.7;margin-top:20px}.done-overlay .left>.actions{margin-top:20px;display:inline-block;margin-left:-2px}.done-overlay .left>.actions button{border:none;cursor:pointer;display:inline-block;letter-spacing:.2em;margin:0 2px;opacity:1;overflow:inherit;background-color:#b4529b;font-size:12px;height:39px;width:auto;line-height:39px;box-shadow:0 2px 0 0 rgba(0,0,0,.1);border-radius:3px;transition:background .25s ease-in-out;padding:0 30px}.done-overlay .left>.actions button:hover{background:#c96eb2;transition:background .25s ease-in-out}.done-overlay .left .social-widget{margin-top:30px}.social-widget .icon{width:33px;height:33px;margin-right:6px;margin-left:6px;background-size:contain;background-repeat:no-repeat;background-position:center;display:inline-block;cursor:pointer}.social-widget.disabled .icon{pointer-events:none;opacity:.25}.social-widget .icon.fb{background-image:url(../images/social-fb.png)}.social-widget .icon.twitter{background-image:url(../images/social-twitter.png)}.social-widget .icon.tumblr{background-image:url(../images/social-tumblr.png)}.social-widget .icon.gplus{background-image:url(../images/social-gplus.png)}.social-widget .icon.download{background-image:url(../images/social-download.png)}.done-overlay .left>.paragraph{font-family:Droid Serif;font-size:16px;color:#66676b;padding:0 20px;line-height:1.7;margin:30px 0 0!important}.done-overlay .right{display:table-cell;position:relative}.done-overlay .right>img{height:600px;width:auto}.done-overlay button.close{z-index:9999}