.dragonic-canvas-view {
    position: relative;
    z-index: 1;
    min-height: 20em;
    min-width: 20em;
    background-color: rgba(255,0,0,0.0); /* This seems to do nothing, but in fact it makes IE 10 not ignore mouse events for this transparent div. */
}
.dragonic-box-view {
    border: solid 3px rgba(40, 197, 9, 0.701961);
    position: absolute;
    text-align: center;
    z-index: 2;
    box-sizing: content-box;
}
.dragonic-box-view:hover {
    background-color: rgba(255, 244, 0, 0.298039);
}
.dragonic-box-view.selected {
    background-color: rgba(114, 230, 0, 0.298039);
    z-index: 3;
}
.dragonic-box-view .x-close {
    position: absolute;
    top: -15px; right: -15px;
    display: none;
}
.dragonic-table-view {
    border: solid 3px rgba(255, 64, 0, 0.5);
    z-index: 2;
}
.dragonic-column-views-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.dragonic-column-view {
    position: absolute;
    top: 0;
    height: 100%;
}
.dragonic-column-view.dragonic-column-highlighted {
    background-color: rgba(255, 244, 0, 0.298039);
}
.dragonic-table-view.selected {
    background-color: rgba(255, 64, 0, 0.3);
}
.dragonic-table-divider {
    background-color: rgba(255, 64, 0, 0.5);
    position: absolute;
    display: block;
    overflow: visible;
}
.selected .dragonic-table-divider .knurling { display: none; }
.dragonic-vertical-table-divider {
    top: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
}
.dragonic-read-only-canvas-view .dragonic-vertical-table-divider {
    cursor: default;
}
.dragonic-horizontal-table-divider {
    left: 0;
    width: 100%;
    height: 5px;
    text-align: left;
    cursor: row-resize;
}
.dragonic-read-only-canvas-view .dragonic-horizontal-table-divider {
    cursor: default;
}
.dragonic-table-divider-controller {
    display: none;
    position: absolute;
    left: 5px; top: 5px;
    cursor: default;
}
.dragonic-table-controls {
    display: block;
}
.dragonic-table-controls.dragonic-table-vertical-divider-controller {
    left: 0px;
    top: 20px;
}
.dragonic-table-controls.dragonic-table-horizontal-divider-controller {
    left: 20px;
    top: 0;
}
.dragonic-table-divider.dragonic-last-table-divider .dragonic-table-divider-controller {
    display: block;
}
.dragonic-table-vertical-divider-controller a {
    display: block;
    margin-bottom: 5px;
    padding: 0.2em 0.2em;
    background-color: rgba(255, 64, 0, 0.5);
}
.dragonic-table-horizontal-divider-controller a {
    margin-right: 5px;
    display: inline-block;
    vertical-align: top;
    padding: 0 0.4em;
    background-color: rgba(255, 64, 0, 0.5);
}

.selected .x-close {
    display: block;
}
.dragonic-box-view-draggable-div {
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    cursor: move;
}
.dragonic-read-only-canvas-view .dragonic-box-view-draggable-div {
    cursor: default;
}
.dragonic-box-view-rail {
    position: absolute;
    display: block;
    overflow: hidden;
}
.knurling { position: relative; display: none;}
.selected .knurling { display: block; }
.dragonic-drag-delta-view .knurling {
    width: 15px; height: 15px;
    background-repeat: no-repeat;
    background: url('../images/dragonic_arrows.png') no-repeat 0 0;
}
.dragonic-top-box-view-rail, .dragonic-bottom-box-view-rail {
    left: 0;
    width: 100%;
    height: 5px;
}
.dragonic-top-box-view-rail .knurling, .dragonic-bottom-box-view-rail .knurling {
    margin: 0 auto;
    background-position: -15px 0; */
}
.dragonic-top-box-view-rail { cursor: n-resize; top: 0; }
.dragonic-top-box-view-rail .knurling { top: -4px; }
.dragonic-bottom-box-view-rail { cursor: s-resize; bottom: 0; }
.dragonic-bottom-box-view-rail .knurling { top: -7px; }
.dragonic-right-box-view-rail, .dragonic-left-box-view-rail {
    top: -7px;
    width: 5px;
    height: 100%;
}
.dragonic-right-box-view-rail .knurling, .dragonic-left-box-view-rail .knurling {
    position: absolute;
    top: 50%;
}
.dragonic-left-box-view-rail { cursor: w-resize; left: 0; }
.dragonic-right-box-view-rail { cursor: e-resize; right: 0; }
.dragonic-left-box-view-rail .knurling { left: -4px; }
.dragonic-right-box-view-rail .knurling { left: -7px; }

.dragonic-corner-view {
    position: absolute;
    width: 5px; height: 5px;
}
.dragonic-top-left-corner-view { cursor: nw-resize; top: 0px; left: 0px; }
.dragonic-top-left-corner-view .knurling { background-position: -47px 0; top: -2px; }
.dragonic-top-right-corner-view { cursor: ne-resize; top: 0px; right: 0px; }
.dragonic-top-right-corner-view .knurling { background-position: -58px 0; left: -7px; top: -2px; }
.dragonic-bottom-left-corner-view { cursor: sw-resize; bottom: 0px; left: 0px; }
.dragonic-bottom-left-corner-view .knurling { background-position: -75px 0; top: -7px; }
.dragonic-bottom-right-corner-view { cursor: se-resize; bottom: 0px; right: 0px; }
.dragonic-bottom-right-corner-view .knurling { background-position: -30px 0; top: -7px; left: -7px; }