<div class = "collision" style="top:0px;left:0px;">
    <div class="dialogLayoutleft ui-layout-west" style="position: absolute;">
        <div class = "csInfo">
            <span class="namelabel resource-dialog-label i18n-name">name</span>
            <div class="sceName"></div><button class='question'></button>
        </div>
        <fieldset class = "csMode" style="width: 190px">
            <legend class  = "resource-dialog-label">modes</legend>
            <form>
                <div style="margin-bottom:5px;">
                    <input type="radio" name = "collisionType" id="ccb" class="cst circleCheckbox">
                    <label class="resource-dialog-label" for="ccb">circle</label>
                </div>
                <div style="margin-bottom:5px;">
                    <input type="radio" name = "collisionType" id="bcb" class="cst boxCheckbox">
                    <label class="resource-dialog-label" for="bcb">box</label>
                </div>
                <div style="margin-bottom:5px;">
                    <input type="radio" name = "collisionType" id="scb" class="cst shapeCheckbox">
                    <label class="resource-dialog-label" for="scb">shape</label>
                </div>
            </form>
           <!--  <form>
                <div style="margin-bottom:5px;">
                    <input type="radio" name = "angle" id="arbitrarilyAngle" class="cst arbitrarilyAngle">
                    <label class="resource-dialog-label" for="arbitrarilyAngle">arbitrarilyAngle</label>
                </div>
                <div style="margin-bottom:5px;">
                    <input type="radio" name = "angle" id="degrees" class="cst degrees">
                    <label class="resource-dialog-label" for="degrees">degrees</label>
                </div>
            </form> -->
        </fieldset> 
        <div class="listLayout listLayout_coll" style="overflow:auto;"></div>
        <!--<div class="centerPoint" style="box-shadow: 0 0 1px rgba(255, 255, 255, 0.5) inset;width: 200px;background: rgba(86, 93, 102, 0.36);border: 1px solid #101010;overflow:hidden;height:20px;"></div>-->
        <div class = "shapeLayout_coll"></div>
        <a class = "addCollShape dialogButton resource-dialog-label">add</a>
        <a class = "editCollShape dialogButton resource-dialog-label">edit</a>
        <a class = "delCollShape dialogButton resource-dialog-label ">remove</a>
    </div>
    <div class="dialogLayoutright_c ui-layout-center" style="left:220px;top: 0px;right:0px;height:100%;position:absolute;overflow:auto;" >
        
        <div class="collisionShape">
            <canvas id = "csc" class="collision-canvas" width="500px;" height="500px;" style="position:relative;z-index:10;">
            </canvas>
            <div class="collisionShapePoint" style="z-index:11;"></div>
        </div>
        <div class='collisionToolButtons'>
            <a class='zoomIn' title="Ctrl++"></a>
            <a class='zoomOut' title = "Ctrl+-"></a>
            <a class="zoom-to-1" title = "Ctrl+0"></a>
        </div>
    </div>       
</div>  
    
    
    