a,b,body,caption,center,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,html,i,img small,label,legend,li,ol,p,pre,span,strike,strong,table,tbody,td,tfoot,th,thead,tr,u,ul{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}body{line-height:1}ul{list-style:none}:focus{outline:0}table{border-collapse:collapse;border-spacing:0}.hidden{display:none;visibility:hidden}.no-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.noscroll{overflow:hidden}.no-space{font-size:0}@-ms-viewport{width:device-width}html{min-height:100%;background:#fff}.icon-link{text-decoration:none;font-size:0}.container{display:inline-block;min-width:100%;font-family:Verdana;background:#fff}.canvas{width:50%;height:50%;border:1px solid #e7e5e7;cursor:default;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;padding-bottom:10px}@media screen and (max-width:900px){.canvas{width:100%;height:auto;display:block}}.canvas-box{width:50%;height:50%;position:relative;display:inline-block;cursor:default}.canvas-box .canvas-label{top:1px;right:1px}.canvas-box .canvas{width:100%;height:100%;min-height:200px}@media screen and (max-width:900px){.canvas-box{width:100%;height:auto;display:block}}.canvas-label{font-family:Verdana;font-size:12px;border-bottom:1px solid #e7e5e7;border-left:1px solid #e7e5e7;position:absolute;top:0;right:0;display:inline-block;display:none;padding:3px;color:#444}@media screen and (max-width:900px){.canvas-label{font-size:13px}}.code{font-family:Menlo,Monaco,Consolas,"Courier New",Courier,monospace;font-size:14px;line-height:1.4}@media screen and (max-width:900px){.code{font-size:13px}}.dot.red{fill:red;stroke:red}.dot.blue{fill:#00f;stroke:#00f}.dot.green{fill:green;stroke:green}.dot.grey{fill:#444;stroke:#444}.dot.purple{fill:#6600e1;stroke:#6600e1}.dot.orange{fill:#ff9f00;stroke:#ff9f00}.dot.pink{fill:#ff32bb;stroke:#ff32bb}.custom-input{cursor:default;width:160px;height:25px;margin-left:-10px}.custom-input-box{display:inline-block;font-size:0;width:50%;min-width:198px;margin-top:10px;vertical-align:middle}.custom-input-box .attr{padding-left:10px;display:block}.custom-input-label{width:100%;display:inline-block}.hidden-input-action{opacity:.01;fill:#fff;cursor:pointer}.homepage{text-align:center}.homepage .logo-link{display:block;max-height:125px;box-sizing:border-box;margin:60px auto}@media screen and (max-width:1200px){.homepage .logo-link{margin:50px auto}}@media screen and (max-width:800px){.homepage .logo-link{margin:40px auto}}@media screen and (max-width:600px){.homepage .logo-link{margin:30px auto}}@media screen and (max-width:400px){.homepage .logo-link{margin:20px auto}}.homepage .logo{width:600px}@media screen and (max-width:1200px){.homepage .logo{width:500px}}@media screen and (max-width:800px){.homepage .logo{width:400px}}@media screen and (max-width:600px){.homepage .logo{width:300px}}@media screen and (max-width:400px){.homepage .logo{width:200px}}.homepage .intro{padding:90px 50px 20px 50px;background:#dfeaff;line-height:1.5;color:#222}@media screen and (max-width:1200px){.homepage .intro{padding:70px 50px 20px 50px}}@media screen and (max-width:800px){.homepage .intro{padding:65px 50px 20px 50px}}@media screen and (max-width:600px){.homepage .intro{padding:40px 40px 20px 40px}}@media screen and (max-width:400px){.homepage .intro{padding:30px 20px 20px 20px}}.homepage .intro .title{font-size:50px;font-weight:400}@media screen and (max-width:1200px){.homepage .intro .title{font-size:40px}}@media screen and (max-width:800px){.homepage .intro .title{font-size:37px}}@media screen and (max-width:600px){.homepage .intro .title{font-size:28px}}@media screen and (max-width:400px){.homepage .intro .title{font-size:25px}}.homepage .intro .description{max-width:900px;margin:60px auto;font-size:25px;font-weight:400}@media screen and (max-width:1200px){.homepage .intro .description{margin:60px auto;font-size:20px}}@media screen and (max-width:800px){.homepage .intro .description{margin:50px auto;font-size:18px}}@media screen and (max-width:600px){.homepage .intro .description{margin:40px auto;font-size:17px}}@media screen and (max-width:400px){.homepage .intro .description{margin:30px auto;font-size:15px}}.homepage .action{display:inline-block;margin:15px;background-color:#fff;color:#00a3e1;padding:20px 30px;border-radius:50px;box-sizing:border-box;border:1px solid #00a3e1;text-decoration:none}.homepage .action:hover{color:#fff;background-color:#00a3e1}@media screen and (max-width:1200px){.homepage .action{padding:20px 30px}}@media screen and (max-width:800px){.homepage .action{padding:15px 20px}}@media screen and (max-width:600px){.homepage .action{padding:15px 20px}}@media screen and (max-width:400px){.homepage .action{padding:15px 20px}}.homepage .social-area{margin:60px auto 90px auto}.coordinate-example.example{background:#f7f5f7;text-align:center;position:relative;border:none;width:465px;height:365px;border:2px solid #e7e5e7;overflow:hidden}@media screen and (max-width:550px){.coordinate-example.example{width:100%}}@media screen and (max-width:550px){.axis-canvas{position:absolute;left:0;width:100%;height:365px}}.example{text-align:left;vertical-align:middle;width:100%;height:550px;margin:20px auto;border:1px solid #e7e5e7}@media screen and (max-width:900px){.example{height:auto}}.html-example{height:350px;text-align:center;position:relative;border:1px solid #e7e5e7}.html-example .canvas-box{height:100%}.html-example .code-canvas{height:100%;text-align:left}@media screen and (max-width:900px){.html-example{height:auto}}.structure-example{height:350px;text-align:center;position:relative;border:1px solid #e7e5e7}.structure-example .canvas-box{height:100%}.structure-example .code-canvas{height:100%;text-align:left}@media screen and (max-width:900px){.structure-example{height:auto}}@media screen and (min-width:901px){.viewbox-example{min-height:800px}}@media screen and (min-width:901px){.viewbox-example .design-canvas.canvas-box{float:left;height:50%}}@media screen and (max-width:900px){.viewbox-example .design-canvas.canvas-box .canvas{min-height:350px}}@media screen and (max-width:900px){.viewbox-example .image-canvas .canvas{min-height:350px}}.bottom-navigators{box-sizing:border-box;height:35px;font-size:14px;padding:15px 0;text-align:left}.bottom-navigators a{color:#444;text-decoration:none}.bottom-navigators a:hover{border-bottom:2px solid #85b4f1}.bottom-navigators .right{float:right}@media screen and (max-width:900px){.bottom-navigators{font-size:13px}}.chapter-navigation{font-size:15px;text-align:left}.chapter-navigation li{line-height:15px}.chapter-navigation a{display:inline-block;box-sizing:border-box;height:35px;padding:15px 0;color:#444;text-decoration:none;border-bottom:2px solid #dfeaff}.chapter-navigation a:hover{border-bottom:2px solid #85b4f1}@media screen and (max-width:900px){.chapter-navigation{font-size:14px}}.content-area{z-index:2;padding-top:90px;padding-left:330px;padding-bottom:30px;padding-right:30px;box-sizing:border-box;text-align:center}@media screen and (max-width:1200px){.content-area{padding-left:30px;padding-right:30px}}.content-area h1{margin-top:8px;font-size:20px}.content-area h2{font-size:16px}.content-area h2,.content-area h3{color:#444;margin-top:15px}.content-area h1,.content-area h2,.content-area h3{text-align:left;margin-bottom:15px;font-family:Verdana;font-weight:700;width:100%}.content-area p,.content-area ul{text-align:left;font-family:Verdana;position:relative;font-size:14px;line-height:1.8}@media screen and (max-width:900px){.content-area p,.content-area ul{font-size:13px}}.content-area ul{list-style:disc inside}.content-area .info{color:green;border-left:5px solid green;background:#e7e5e7;padding:15px;margin:15px 0}.content-area .info.danger{color:#d20;border-left:5px solid #f05}.content-area .info.good{color:#338fff;border-left:5px solid #338fff}footer{width:100%;position:fixed;bottom:0;font-size:12px;font-family:Verdana;height:30px;background:#e7e5e7;line-height:30px;color:#444}@media screen and (max-width:900px){footer{font-size:13px}}.money-area{text-align:left;margin-top:7px}.money-text{margin-bottom:5px}.money-icon{height:20px;margin-right:15px}.logo{width:300px;box-sizing:border-box;padding:20px;padding-left:30px}.logo .color-area{fill:#00a3e1}.logo .grey-area{fill:#222}@media screen and (max-width:1200px){.logo{margin:auto;padding-left:20px}}@media screen and (max-width:800px){.logo{width:250px;padding-left:0;padding-right:0}}@media screen and (max-width:400px){.logo{width:200px;padding-left:0;padding-right:0}}.logo-bar{min-width:375px;background-color:#fff;z-index:1;border-bottom:1px solid #e7e5e7;position:fixed;width:100%;height:75px}@media screen and (max-width:1200px){.logo-bar{text-align:center}.logo-bar .navigator{display:none}}.navigator-link{display:inline-block;margin-left:20px;font-weight:600;font-size:13px}.navigator-link a{color:#444;text-decoration:none}.navigator-link a:hover{border-bottom:2px solid #85b4f1}@media screen and (max-width:1200px){.navigator-link.selected{display:none}}.navigator-link.selected a{border-bottom:2px solid #85b4f1}.navigator{font-size:14px;line-height:2;color:#444;box-sizing:border-box;padding:23px 30px;float:right;display:inline-block}.sidebar-icon{position:absolute;height:30px;width:30px;margin:20px 30px;display:none;cursor:pointer}@media screen and (max-width:1200px){.sidebar-icon{display:block}}.sidebar-link a{display:inline-block;height:100%;font-weight:600;font-size:13px;color:#444;text-decoration:none}.sidebar-link a:hover{border-bottom:2px solid #85b4f1;margin-bottom:-2px}.sidebar-sublink{font-size:12px}.sidebar-sublink.lvl-2{margin-left:1em;font-weight:700}.sidebar-sublink.lvl-3{margin-left:2em}.sidebar-sublink.lvl-4{margin-left:3em}.sidebar-sublink a{font-size:12px;color:#444;text-decoration:none;height:100%;display:inline-block}.sidebar-topic{font-size:15px;font-weight:700}.sidebar-topic a{color:#444;text-decoration:none}.sidebar{position:fixed;top:76px;bottom:0;width:300px;font-size:13px;line-height:2;color:#444;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;padding:15px;padding-left:30px;z-index:1;background:#fff;border-right:1px solid #e7e5e7}.sidebar .navigator{display:none;padding:0;width:100%}.sidebar .navigator .navigator-link{width:100%;margin:0}.sidebar .social-area{margin-top:20px;padding-bottom:5px;padding-right:12px}.sidebar .social-icon{height:30px;width:30px;margin:3px}@media screen and (max-width:1200px){.sidebar{display:none}.sidebar .navigator{display:inline-block}.sidebar.menu-on{display:inline-block}}.social-area{text-align:center}.social-icon{height:50px;width:50px;margin:5px}.code-canvas{padding:10px}@media screen and (min-width:901px){.code-canvas{float:right}}.custom-canvas{overflow:hidden}.custom-canvas.canvas{padding:0}.design-canvas.canvas-box{background:#f7f5f7}@media screen and (min-width:901px){.design-canvas.canvas-box{float:left;height:100%}}@media screen and (min-width:901px){.tool-canvas{float:right}}.attr.code{font-size:0}.attr.code .name.name{color:#0081ff;font-size:14px}.attr.code .val{font-size:14px;transition:background-color .3s ease-out}.attr.code .val.color{color:#d20}.attr.code .val.string{color:#7cc68f}.attr.code .val.number{color:#85b4f1}.attr.code .val.highlight{background-color:#444;color:#fff}.attr.code .sign{font-size:14px}.attr.code .space{font-size:0}@media screen and (max-width:900px){.attr.code .name.name{font-size:13px}.attr.code .val{font-size:13px}.attr.code .sign{font-size:13px}}.code-line.line{display:inline-block}.code-line.faint{color:#c2c0c2}.coord{color:#034cae;display:inline-block;transition:background-color .3s ease-out}.coord.red{background-color:#ffa2a7}.coord.pink{background-color:#fba6ff}.coord.orange{background-color:#ffda97}.coord.green{background-color:#b9ecc9}.coord.blue{background-color:#b2ccff}.coord.grey{background-color:#c2c0c2}.coord.purple{background-color:#d1b1ff}.coord.highlight{background-color:#444;color:#fff}.sign{font-size:14px;color:#777}@media screen and (max-width:900px){.sign{font-size:13px}}.tag.code{font-size:0}.tag.code .name{color:#00009b;font-size:14px}.tag.code .sign{color:#777;font-size:14px}.tag.code .end-tag{display:inline-block}@media screen and (max-width:900px){.tag.code .name{font-size:13px}.tag.code .sign{font-size:13px}}.axis{stroke-width:1px;stroke-linecap:round}.axis-origin{stroke-width:0;fill:#444}.axis-x{stroke:#00f}.axis-y{stroke:green}.axis-text{font-family:Verdana;font-size:12px}.axis-text.origin-text{text-anchor:end;fill:#444}.axis-text.x-text{text-anchor:middle;fill:#00f}.axis-text.y-text{text-anchor:end;fill:green}.point-text{font-family:Verdana;font-size:12px;text-anchor:start}.point-text .x-text{fill:#00f}.point-text .y-text{fill:green}.checkbox-square{stroke:#c2c0c2;stroke-width:2px;fill:#fff}.checkbox-check{stroke:#1b5e20;stroke-width:2px;stroke-linecap:round;fill:#fff}.line-cross{position:absolute;color:transparent;overflow:hidden;padding:8px 10px;display:inline-block;height:0}.line-cross .line{float:left;border-top:1px solid #000;height:1px;width:100%;display:inline-block}.color-slider-pointer{cursor:pointer}.dropdown-box{position:relative}.dropdown-box .value{position:relative;padding-left:5px;box-sizing:border-box;font-weight:700;color:#444;margin-left:9px;margin-top:3px;width:102px;height:20px;line-height:17px;border:1px solid #c2c0c2;cursor:pointer}.dropdown-box .caret{display:inline-block;width:10px;height:10px;position:absolute;top:4px;right:4px;fill:#444}.dropdown-box .options{z-index:1;box-sizing:border-box;width:102px;left:9px;top:39px;position:absolute;color:#444;border:1px solid #c2c0c2;background-color:#fff;cursor:pointer}.dropdown-box .option{padding-left:5px}.dropdown-box .option:hover:not(.selected){background-color:#c2c0c2}.dropdown-box .selected{background-color:#338fff;color:#fff;cursor:default}.range-slider-track{stroke:#c2c0c2;stroke-width:4px;stroke-linecap:round}.range-slider-pointer{cursor:pointer;fill:#1b5e20}.direction-point .direction{stroke-width:2px;stroke-linecap:round}.direction-point .circle{stroke-width:0;opacity:.5}.direction-point .direction{stroke-width:2px;stroke-linecap:round}.direction-point .circle{stroke-width:0;opacity:.5}.helper-line{stroke-width:1px;stroke-linecap:round;stroke:#c2c0c2;fill:none;transition:stroke .3s ease-out}.helper-highlight.helper-line{stroke:#000}.helper-point{fill:#c2c0c2}.helper-highlight.helper-point{fill:#000}.helper-rect{stroke-width:.5px;stroke:#c2c0c2;transition:stroke .3s ease-out,stroke-width .3s ease-out;fill:none}.helper-rect.invisible{stroke:transparent}.helper-rect.visible{stroke:#444}.helper-highlight.helper-rect{stroke-width:1px;stroke:#000}.shadow-rect{stroke-width:0;fill:rgba(188,178,190,.49)}.point-circle{stroke-width:0;cursor:pointer;opacity:.5}.mover-icon{fill:#000;stroke-width:0}.rel-point-circle{stroke-width:0;cursor:pointer;opacity:.5}