body
{
    font-family:Arial,Helvetica,sans-serif;
    font-size:18px;
    color:#446;
    background-color:rgba(220,220,255,0.3);

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    overflow:crop;
}

#canvas
{
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    z-index:1;
}
#overlay
{
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    z-index:8;
}

#dbg
{
    position:absolute;
    left:200px;
    top:0px;
    background-color:blue;
    background-color:lightgray;
    padding:4px 8px 4px 8px;
}

.rect
{
    background-color:lightblue;
    border:2px solid blue;
    opacity:0.4;
    z-index:-1;
}

.key
{
    position:absolute;
    width:40px;
    height:40px;
    font-size:20px;
    font-weight:700;
    padding:5px;
}

.tool
{
    position:absolute;
    width:40px;
    height:40px;
    opacity:0.8;
    border:2px solid darkgray;
}

.cursor
{
    position:absolute;
    height:23px;
    width:23px;
    background-color:orange;
    opacity:0.4;
    border:2px solid darkblue;
}
.cursorx
{
    background-color:orange;
    border:2px solid darkgray;
}
.active_tool
{
    border:2px solid darkblue;
}

.point
{
    position:absolute;
    width:25px;
    height:25px;
    font-size:38px; 
    top:-16px;
    left:-13px;
}

.bn
{
    width:16px;
    height:16px;

    color:#333;    
    background-color:#ddd;

    background-image: linear-gradient(          top, rgb(245,245,245) 13%, rgb(223,223,223) 65%);    
    background-image: -o-linear-gradient(       top, rgb(245,245,245) 13%, rgb(223,223,223) 65%);
    background-image: -moz-linear-gradient(     top, rgb(245,245,245) 13%, rgb(223,223,223) 65%);
    background-image: -webkit-linear-gradient(  top, rgb(245,245,245) 13%, rgb(223,223,223) 65%);
    background-image: -ms-linear-gradient(      top, rgb(245,245,245) 13%, rgb(223,223,223) 65%);

    border:1px solid #999;
    border-radius:2px;

    font-weight:800;
    font-size:22px;

    padding:7px 9px 14px 13px;
}

.bn:hover { cursor:pointer; }
.key:hover { cursor:pointer; }

#menu
{
    position:fixed;
    left:0px;
    bottom:0px;
    width:100%;
    background-color:#333;
    padding:8px 4px 2px 24px;
    z-index:50;
    vertical-align:top;
}

.menu_box
{
    display:inline-block;
    width:32px;
    height:32px;
    background-color: #ddd;
    border:1px solid #aaa;
}

.arr_right      { background-image: url("img/arrow_right.svg"); }
.arr_left       { background-image: url("img/arrow_left.svg"); }
.arr_up         { background-image: url("img/arrow_up.svg"); }
.arr_down       { background-image: url("img/arrow_down.svg"); }
.arr_back       { background-image: url("img/arrow_back.svg"); }
.lines_segment  { background-image: url("img/lines_segment.svg"); }
.lines_free     { background-image: url("img/lines_free.svg"); }
.lines_bar      { background-image: url("img/lines_underscore.svg"); }
.lines_plus     { background-image: url("img/lines_plus.svg"); }
.lines_cross    { background-image: url("img/lines_cross.svg"); }
.lines_minus    { background-image: url("img/lines_minus.svg"); }
.lines_box      { background-image: url("img/lines_box.svg"); }
.lines_circ     { background-image: url("img/lines_circ.svg"); }
.lines_kbd_alpha    { background-image: url("img/lines_kbd_alpha.svg"); }
.lines_kbd_button   { background-image: url("img/lines_kbd_button.svg"); }
.lines_kbd_num      { background-image: url("img/lines_kbd_num.svg"); }
.lines_kbd_style    { background-image: url("img/lines_kbd_style.svg"); }
.lines_question     { background-image: url("img/question2.svg"); }

#logo
{
    display:inline-block;
    top:4px;
    color:#eee;
    font-size:22px;
    font-weight:300;
    margin-left:22px;
}

#test
{
    position:absolute;
    top:20px;
    left:600px;
}

.padbox
{
    position:absolute;
    width:60px;
    height:30px;
    background-color: #ddd;
    border:1px solid #aaa;
    z-index:20;
}


.style_box_c_0
{
    border-color:blue;
    background-color:lightBlue;
}
.style_box_c_1
{
    border-color:green;
    background-color:lightGreen;
}
.style_box_c_2
{
    border-color:red;
    background-color:orange;
}
.style_box_c_3
{
    border-color:darkSlateGray;
    background-color:lightSlateGray;
}

.style_box_t_0
{
    border-width:0px;
    border-style:solid;
}
.style_box_t_1
{
    border-width:1px;
    border-style:solid;
}
.style_box_t_2
{
    border-width:2px;
    border-style:solid;
}
.style_box_t_3
{
    border-width:4px;
    border-style:solid;
}

.style_box_o_0
{
    opacity:0.2;
}
.style_box_o_1
{
    opacity:0.4;
}
.style_box_o_2
{
    opacity:0.6;
}
.style_box_o_3
{
    opacity:0.8;
}

.style_box
{
    position:absolute;
    top:4px;
    left:4px;
    width:24px;
    height:24px;
    z-index:200;
}

.style_box_default
{
    border-width:2px;    
    opacity:0.2;
    background-color:"blue";
}


.contact
{
    display:inline-block;
    color:silver;
    font-size:14px;
    text-decoration:none;
    margin-left:8px;
}

a
{
    color:#ccc;
}

a:link 
{
    text-decoration:none;
    color:silver;
}
a:visited 
{
    text-decoration:none;
    color:silver;
}
a:hover 
{
    text-decoration:none;
    color:#eee;
}
a:active 
{
    text-decoration:none;
    color:silver;
}