* {
    margin: 0;
}

#mark_layer, #image_layer {
    image-rendering: pixelated;
    width: 100%;
    height: 100%;
    position: absolute;
}

div#container {
    display: inline-block;
    image-rendering: pixelated;
    position: fixed;
    width: 800px;
    height: 500px;
    background-size: 100%;
    background-position: left top;
}
body {
    background-image: -webkit-linear-gradient(top,#B69191,#FBB040);
}
table {
    bottom: 1em;
    z-index: 1000;
    position: fixed;
    left: 1em;
    cursor: pointer;
}
#image {
    display: none;
}
td {
    width: 4em;
    height: 2em;
    text-align: center;
    font-weight: 900;
    color: #333;
    box-shadow: 0px 0px 2px;
    border-radius: 2px;
    background-color: rgba(58, 188, 255, 0.52);
    transition: box-shadow ease 300ms;
}
td.current{
    color : rgba(233,233,233, 1);
}
td:hover {
    box-shadow: 0px 1px 10px 0px black;
}

#pointer {
    width: 1px;
    height: 1px;
    background-color: red;
    position: fixed;
    cursor: url(1.cur), auto;
}

input[type="range"] {
    position: fixed;
    right: 1em;
    bottom: 1em;
    width: 20em;
}


.one_cursor {
    cursor: url(11x11.png) 5 5, auto;
}

.two_cursor {
    cursor: url(16x16.png) 10 10, auto;
}

.three_cursor {
    cursor: url(23x23.png) 11 11, auto;
}