<style>
    .animation{
	height: 100%;
	overflow: hidden;
}
.animationToolbar{
	width:100%;
	height:40px;
	position:absolute;
	top:0px;
	left:0px;
}
.animation-name-inp{
	width: 100px;
}
.animationEditor{
	width: 525px;
	height: 480px;
	position: absolute;
	top:30px;
}
.animationPreview{
	width: 523px;
	height: 306px;
}
.initFrame{
	width: 112px;
	height: 80px;
	background: rgb(45, 45, 45);
	border-bottom: 1px solid #101010;
	border-right: 1px solid #101010;
}
.animationLoopDiv{
	position: relative;
	left: 5px;
	top: -81px;
	width: 107px;
	height: 29px;
	border-right: 1px solid #101010;
}
.animationLoop{
	width: 50px;
}
.animationLoopLocation{
	position: relative;
	top: 5px;
}
.editorFrames{
	position: relative;
	width: 410px;
	height: 81px;
	top: -82px;
	left: 113px;
	border-bottom: 1px solid #101010;
}
.animationBtn{
	position: relative;
	height: 29px;
	width: 410px;
	top: -111px;
	left: 113px;
}
.animationBtn button{
	margin-top: 2px;
	margin-left: 2px;
	height: 25px;
	width: 25px;
}
.animationPreview{
	overflow: auto;
}

.settingsAnimation, .animationSettings{
	position: absolute;
    right: 5px;
    width: 215px;
    top: 30px;
    height: 480px;
    padding: 0px 0px 0px 15px;
}
.animationSettings .init-frame-scale button{
	top: -15px;
	left: 5px;
}
.settingsAnimation .frame-scale button{
	top: 10px;
	left: 5px;
}
.settingsAnimation{
	overflow-y: auto;
}

.ball{
	position: relative;
	left: 14px;
	top: 14px;
	height: 20px;
	width: 20px;
	border-radius: 300px;
	background: rgb(9, 190, 246);
}
.initFrameData{
	position: relative;
	top: 8px;
	left: 32px;
	width: 47px;
	height: 47px;
	background: rgba(0, 0, 0, 0.4);
}
.animationFrame{
	position: relative;
	top: 8px;
	left: 15px;
	width: 47px;
	height: 47px;
	background: rgba(0, 0, 0, 0.4);
}
.animation-duration{
	position: relative;
	top: 7px;
	left: 28px;
}
.selectableFrame .animation-duration{
	left: 0px;
	top: 8px;
}
.editorFrames{
	overflow-y: auto;
}
.editor ul{
	padding: 0;
	margin: 0;
	list-style-type: none;
}
.frame-selected{
	width: 45px;
	height: 45px;
	border: 1px solid #09BEF6;
}
.displayNone{
	display: none;
}
.frameInput{
	width: 40px !important;
	float: left;
	margin-left: 4px;
}
.frameLabel{
	float: left;
	line-height: 25px;
	min-width: 56px;
}
.clearfix{
	clear: both;
}
.explain{
	width: 195px;
	height: 253px;
	/*position: absolute;
	top: 224px;
	left: 1px;*/
	border: 1px solid #101010;
	margin-top: 10px;
}
.explain span{
	white-space: normal;
	line-height: 25px;
}
.checkboxGroup{
	margin-left: -10px;
	margin-top: 5px;
}
.checkboxGroup fieldset{
	margin-left: 12px;
    padding: 3px 0px 0px 7px;
}
.anima-Color-group{
	margin-left: 10px;
}
.animaEffect{
	left: 2px;
}
.ui-icon-Move{
	background: url("http://gamemei.com/qiyun/gamemei_sln/gamemei_css/css/qiyun/ani_move.png") no-repeat center center;
	width: 45px;
	height: 45px;
	position: absolute;
	display: block;
	top: 0px;
}
.animationToolsBtn{
	position: relative;
	top: 10px;
	left: 10px;
}
</style>
<div class="animation">
        <div class="animationName">
            <span class="namelabel resource-dialog-label">name</span>
            <input class="animation-name-inp ui-widget-content ui-corner-all">
        </div>
        <fieldset class = "animationEditor ui-layout-center">
        	<legend class="resource-dialog-label">preview</legend>
        	<div class="animationObj">
	            <span class="objlabel resource-dialog-label">object</span>
	            <div class="obj-select-div"></div>
	        </div>
	        <a class = "animationPlayPause resource-dialog-label">play</a>
	        <div class="animationPreview preview">
	        	<div class="animationToolsBtn">
	                <a class='zoomIn' title="Ctrl++"></a>
	                <a class='zoomOut' title = "Ctrl+-"></a>
	                <a class="zoom-to-1" title = "Ctrl+0"></a>
	            </div>
	            <div class = "objAnimation"></div>
	        </div>
	        
	        <div class = "editor ui-layout-south">
	            <div class="initFrame">
	            	<ul>
	            		<li name="initFrame">
		            		<div class="initFrameData">
			            		<div class="ball"></div>
			            	</div>
			            	<div class="animation-duration"></div>
		            	</li>
	            	</ul>
	            </div>
	            <div class = "editorFrames">
	                 <ul class = "selectableFrame">
	                 	
	                 </ul>
	            </div>
	            <div class='animationLoopDiv'>
                    <span class="animationLoopLocation resource-dialog-label">loop</span><span class="animationLoopLocation">:</span>
                    <div class='animationLoop animationLoopLocation'></div>
                </div>
                 <div class = "animationBtn">
                    <button class = "animationNew resource-dialog-label" name="new">new_</button>
                    <button class = "animationCopy resource-dialog-label" name="copy">copy</button>
                    <button class = "animationRemove resource-dialog-label" name="remove">removed</button>
                </div>
        	</div>
    	</fieldset>
    	<fieldset class="animationSettings ui-layout-center">
    		<legend class="resource-dialog-label">init_frame_settings</legend>
    		<div>
	    		<label class="scaleXlabel frameLabel resource-dialog-label">xscale</label>
	            <input class="init-scaleX-inp animationScaleX frameInput ui-widget-content ui-corner-all" />
            </div>
            <div class="clearfix"></div>
            <div class="init-frame-scale">
	            <label class="scaleXlabel frameLabel resource-dialog-label">yscale</label>
	            <input class="init-scaleY-inp animationScaleY frameInput ui-widget-content ui-corner-all" />
	            <button class = "is-equal-scale equal-scale not_equal-scale resource-dialog-label" name="initFrame">equal_scale</button>
            </div>
            <div class="clearfix"></div>
            <div>
            	<label class="moveXlabel frameLabel"><span class="resource-dialog-label">x</span><span>(px)</span></label>
            	<input class="init-moveX-inp animationMoveX frameInput ui-widget-content ui-corner-all" />
            </div>
            <div class="clearfix"></div>
            <div>
	            <label class="moveYlabel frameLabel"><span class="resource-dialog-label">y</span><span>(px)</span></label>
	            <input class="init-moveY-inp animationMoveY frameInput ui-widget-content ui-corner-all" />
            </div>
            <div class="clearfix"></div>
            <div>
	            <label class="rotatelabel frameLabel resource-dialog-label">angle</label>
	            <input class="init-rotate-inp animationRotate frameInput ui-widget-content ui-corner-all" />
            </div>
            <div class="clearfix"></div>
            <div>
	            <label class="opacitylabel frameLabel resource-dialog-label">opacity</label>
	            <input class="init-opacity-inp animationOpacity frameInput ui-widget-content ui-corner-all" />
            </div>
            <div class="explain clearfix"><span class="resource-dialog-label">init_frame_state_explain</span></div>
    	</fieldset>
    	<fieldset class="settingsAnimation ui-layout-center displayNone">
    		<legend class="resource-dialog-label">settings</legend>
    		<div class="checkboxGroup">
    			<input type="checkbox" id="anima-Scale-checkbox" name="anima-Scale-group" inpType="Scale" class="anima-Scale-checkbox customCheckbox" />
        		<label class="scaleLabel resource-dialog-label" for="anima-Scale-checkbox">scale</label>
        		<fieldset class="anima-Scale-group displayNone">
        			<div class="frame-scale">
			            <label class="scaleXlabel frameLabel resource-dialog-label">xscale</label>
			            <input class="animation-Scale-x-inp animationScaleX animScale frameInput ui-widget-content ui-corner-all" />
			            <button class = "is-equal-scale equal-scale not_equal-scale resource-dialog-label" name="frame">equal_scale</button>
		            </div>
		            <div class="clearfix"></div>
            		<div>
		            	<label class="scaleYlabel frameLabel resource-dialog-label">yscale</label>
		            	<input class="animation-Scale-y-inp animationScaleY animScale frameInput ui-widget-content ui-corner-all" />
		            </div>
		            <div class="clearfix"></div>
		            <input type="checkbox" id="anima-Scale-relative" class="anima-Scale-relative customCheckbox" />
		        	<label class="scaleRelativeLabel resource-dialog-label" for="anima-Scale-relative">relative</label>
		        </fieldset>
    		</div>
    		
    		<div class="checkboxGroup">
	        	<input type="checkbox" id="anima-Move-checkbox" name="anima-Move-group" inpType="Move" class="anima-Move-checkbox customCheckbox" />
	        	<label class="moveByLabel resource-dialog-label" for="anima-Move-checkbox">moveBy</label>
	        	<fieldset class="anima-Move-group displayNone">
	        		<div>
			            <label class="moveByXlabel frameLabel resource-dialog-label">moveByX</label>
			            <input class="animation-Move-x-inp animationMoveX animMove frameInput ui-widget-content ui-corner-all" />
		            </div>
		            <div class="clearfix"></div>
            		<div>
			            <label class="moveByYlabel frameLabel resource-dialog-label">moveByY</label>
			            <input class="animation-Move-y-inp animationMoveY animMove frameInput ui-widget-content ui-corner-all" />
		            </div>
		            <div class="clearfix"></div>
		            <input type="checkbox" id="anima-Move-relative" class="anima-Move-relative customCheckbox" />
		        	<label class="moveByRelativeLabel resource-dialog-label" for="anima-Move-relative">relative</label>
		        </fieldset>
	        </div>
	        
	        <div class="checkboxGroup">
		        <input type="checkbox" id="anima-Rotate-checkbox" name="anima-Rotate-group" inpType="Rotate" class="anima-Rotate-checkbox customCheckbox" />
	        	<label class="rotateLabel resource-dialog-label" for="anima-Rotate-checkbox">rotate</label>
	        	<fieldset class="anima-Rotate-group displayNone">
	        		<div>
			        	<label class="rotatelabel frameLabel resource-dialog-label">angle</label>
			            <input class="animation-Rotate-angle-inp animationRotate frameInput animRotate ui-widget-content ui-corner-all" />
		            </div>
		            <div class="clearfix"></div>
		            <input type="checkbox" id="anima-Rotate-relative" class="anima-Rotate-relative customCheckbox" />
		        	<label class="rotateRelativeLabel resource-dialog-label" for="anima-Rotate-relative">relative</label>
	        	</fieldset>
        	</div>
        	<div class="checkboxGroup">
	        	<input type="checkbox" id="anima-Fade-checkbox" name="anima-Fade-group" inpType="Fade" class="anima-Fade-checkbox customCheckbox" />
	        	<label class="opacityLabel resource-dialog-label" for="anima-Fade-checkbox">opacity</label>
	        	<fieldset class="anima-Fade-group displayNone">
	        		<div>
			        	<span class="opacitylabel frameLabel resource-dialog-label">opacity</span>
            			<input class="animation-Fade-opacity-inp animationOpacity animOpacity frameInput ui-widget-content ui-corner-all" />
		            </div>
		            <div class="clearfix"></div>
		            <input type="checkbox" id="anima-Fade-relative" class="anima-Fade-relative customCheckbox" />
        			<label class="opacityRelativeLabel resource-dialog-label" for="anima-Fade-relative">relative</label>
	        	</fieldset>
        	</div>
        	<div class="checkboxGroup">
	        	<input type="checkbox" id="anima-Color-checkbox" name="anima-Color-group" inpType="Color" class="anima-Color-checkbox customCheckbox" />
	        	<label class="colorLabel resource-dialog-label" for="anima-Color-checkbox">color</label>
	        	<div class="anima-Color-group displayNone">
	        		<input class = "objColor animation-Color-color-inp ui-widget-content ui-corner-all" />
	        	</div>
        	</div>
    	</fieldset>
	</div>