*{
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}
body{
    margin: 0; padding: 0;
    background: #000 none no-repeat scroll 16px 33px;
    overflow: hidden;
}
/*------------------------------------------------

------------------------------------------------*/
#wrapper{
    width: 465px; height: 465px;
}
/*------------------------------------------------

------------------------------------------------*/
nav{
    display: block;
    width: 400px; height: 11px;
    margin-top: 13px;
    margin-left: 35px;
    overflow: hidden;
}
nav a{
    float: left;
    height: 11px;
    text-indent: -9999px;
    text-decoration: none;
    -webkit-transition: opacity .2s ease-in-out;
       -moz-transition: opacity .2s ease-in-out;
        -ms-transition: opacity .2s ease-in-out;
         -o-transition: opacity .2s ease-in-out;
            transition: opacity .2s ease-in-out;
}
nav a:hover{
    opacity: .5;
}
nav a:active{
    opacity: 1;
}
/*-----  -----*/
#btnQuadratic{
    float: left;
    width: 90px;
    margin-right: 2px;
    background-position: -72px 0;
}
#quadratic #btnQuadratic{
    background-position: -72px -11px;
}
/*-----  -----*/
#btnBezier{
    float: left;
    width: 72px;
    background-position: 0 0;
}
#bezier #btnBezier{
    background-position: 0 -11px;
}
/*-----  -----*/
#btnSnap{
    float: right;
    width: 51px;
    background-position: -162px 0;
}
.snap #btnSnap{
    background-position: -162px -11px;
}
/*-----  -----*/
#quadratic #btnQuadratic:hover,
#bezier #btnBezier:hover,
.snap #btnSnap:hover{
    opacity: 1;
}
/*------------------------------------------------

------------------------------------------------*/
section{
    position: absolute;
    top: 24px; left: 0;
    display: block;
    opacity: 0;
    z-index: 1;
    -webkit-transition: opacity .5s ease-in-out;
       -moz-transition: opacity .5s ease-in-out;
        -ms-transition: opacity .5s ease-in-out;
         -o-transition: opacity .5s ease-in-out;
            transition: opacity .5s ease-in-out;
    cursor: crosshair;
}
#bezier #secBezier,
#quadratic #secQuadratic{
    opacity: 1;
    z-index: 2;
}
/*------------------------------------------------

------------------------------------------------*/
.point{
    display: block;
    position: absolute;
    background-color: rgba(255, 0, 0, .25);
    cursor: pointer;
}
.point:active{
    cursor: move;
}
.anchor{
    width: 30px; height: 30px;
    margin: 0 0 0 20px;
    background-color: rgba(0, 255, 0, .25);
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
        -ms-border-radius: 15px;
         -o-border-radius: 15px;
            border-radius: 15px;
}
.control{
    width: 20px; height: 20px;
    margin: 5px 0 0 25px;
    background-color: rgba(255, 0, 0, .25);
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
        -ms-border-radius: 10px;
         -o-border-radius: 10px;
            border-radius: 10px;
}
/*------------------------------------------------

------------------------------------------------*/
nav a{
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANUA\
AAAWAgMAAAAqUjEKAAAACVBMVEUAZpkAAAAAmf9iNq3NAAABP0\
lEQVRo3r2SQY7DIAxF7crZgxTu0GM4EuyDZN8n55lTzjdk2qqd\
VRa1rCAcvp+/gOhaFH8L+6iM2F4312WUmDI+Rq1GWqHcKS2zXl\
QsctnGf11UmEJWslsvvZu3aq2CVnKf2XvxZhZ138w3rA0nyqQt\
vdPOIUNDtsKgBZBPWdAKaDVoOPFHa6C1kPW+gpYHau0PWsmguT\
UB9UkLD7kboatZeEtc0jKGDG+EyU5vkKlM2Vcv4GL8XImDjvc+\
t+Pf9vfXzXUZbsYrPuwpR94Or+Jtn3UtnSP3O42yxRIyrcSigq\
eWMqcMmlaZKaK4Q446aLpEjbTJpO0ivljIQLPbYWg7Op+yoGnQ\
YihSvLFJS6ClkIlsoNWB2uRB0xo0qivOQrY+vVVhR1fm8NZM2z\
6GDG+eUjq9hez09tULuPZKfgF/FvHkaTwVqAAAAABJRU5ErkJg\
gg==");
}
body{
    background-image:
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAakA\
AAGlBAMAAACywBQTAAAAElBMVEX///8AM00mM0BAQEAAZpmTma\
B9igjHAAAAAXRSTlMAQObYZgAAArZJREFUeNrt3VFO4zAUBdBH\
XRbQnVjKBvhg/2uioBZEY4FRqhI/nzc/mSgaao5ujCZXIeI6x8\
g4VrX7qcv5T75VvU/WVZ1Ox8N1nsc+Smy1ztUhydEMd3ZWrFix\
YsWKFStWrFixYrVhcv2/hVzJFStWrFixYsWKFStWrFj9MDmfC6\
d8hn+2Sti3+MCSK/dA+xUrVqxYsWLFihUrVqxYJRl9C7mSK1as\
WLFixYoVK1asWIW+hb7F/qwy9i2qvoV7oP2KFStWrFixYsWKFS\
tWrPKMvoVcyRUrVqxYsWLFihUrVqxC32Loo5TP8MP7LQay0rew\
X7FixYoVK1asWLFixYrVlFb6FnIlV6xYsWLFihUrVqxYsQp9i6\
HfbxHeb+H9FnLlHmi/YsWKFStWrFixYsWKFauHj76FXMkVK1as\
WLFixYoVK1asQt9C32J/Vt5vIVfugfYrVqxYsWLFihUrVqxYsd\
r16FvIlVyxYsWKFStWrFixYsVqGquas29R9S30Lf43WPoW9itW\
rFixYsWKFStWrFixmtJK30Ku5IoVK1asWLFixYoVK1bh/RZDH+\
lb6FvIlXug/YoVK1asWLFixYoVK1asHj/6FnIlV6xYsWLFihUr\
VqxYsQp9C32L/Vll7Ftk/d0v+hb2K1asWLFixYoVK1asWLGa0k\
rfQq7kihUrVqxYsWLFihUrVvNY6VsMZOX9FnLlHmi/YsWKFStW\
rFixYsWKFatdj76FXMkVK1asWLFixYoVK1asJrLK+Vw45TP8uP\
QtXtPMy5dVpMzV0+ffsxzNsKpM53Kuyhhj/rIXf5tSlsZl6wtb\
52rndb3nyrL+MI3rys11tbWq0vqpsfacq61z0Xeu9e+VxodpfI\
1yc13nqpbGV7z3ueaqlvWHWe62qt7v7RbTXqv4fVV3zlVsyFBs\
zdUbRxbAnLSA6RAAAAAASUVORK5CYII=");
}