html, body{ width: 100%; height: 100%; margin: 0; padding: 0; background-color: white; } .toggle_mode{ width: 100%; height: 25px; border-bottom: 1px solid #999; background-color: #ccc; position: fixed; top: 0; left: 0; z-index: 2; } #display_img, #edit_img{ width: 15px; height: 15px; margin: 5px 10px; } .green_point{ background-image: url(../img/green_point.png); } .red_point{ background-image: url(../img/red_point.png); } #display_text, #edit_text{ height: 19px; padding: 3px 0 0 0; } .selected{ background-color: #666; } #display:hover, #edit:hover{ background-color: #999; } .img_block{ width: 120px; height: 120px; padding: 5px; display: inline-block; position: absolute; top: 100px; left: 350px; } .img_gray{ border: 1px solid #ccc; -moz-box-shadow: #ccc -1px 0 4px; -webkit-box-shadow: #ccc -1px 0 4px; box-shadow: #ccc -1px 0 4px; } .close_img { width: 30px; height: 30px; background-repeat: no-repeat; position: absolute; background-image: url(../img/close_img.png); top: -15px; right: -15px; cursor: pointer; } .dropHere{ background-color: #ccc; } .dropBack{ background-color: #F4F2F2; } .audio_block{ width: 120px; height: 30px; padding: 10px 5px; position: absolute; top: 200px; left: 50px; } .audio_desc{ min-height: 30px; margin: 5px 0; float: left; margin-left: 20px; } .play, .stop{ height: 30px; width: 70px; float: left; cursor: pointer; } .play{ background-image: url(../img/play.png); } .stop{ background-image: url(../img/stop.png); } .replay{ height: 30px; width: 32px; margin-left: 10px; float: left; background-image: url(../img/replay.png); background-repeat: no-repeat; cursor: pointer; } .gray{ background-color: #ccc; } #slider ul, #slider li{ margin:0; padding:0; list-style:none; } #slider{ height: 100%; margin-top: -25px; overflow:hidden; } span#prevBtn a{ height: 100%; width: 20px; background-color: #999; position: absolute; left: 0; top: 0; opacity: 0.5; background-image: url(../img/left.png); background-repeat: no-repeat; background-position: 0 54%; } span#nextBtn a{ height: 100%; width: 20px; background-color: #999; position: absolute; right: 0; top: 0; opacity: 0.5; background-image: url(../img/right.png); background-repeat: no-repeat; background-position: 0 52%; } span#nextBtn a:hover, span#prevBtn a:hover{ opacity: 0.7; } li>div{ width: 100%; height: 100%; padding: 30px 0 0 25px; position: relative; } .text_block{ margin: 0; padding: 5px; width: 200px; position: absolute; top: 50px; left: 100px; } .block_border{ border: 1px solid #999; border-radius: 5px; } .move_block{ width: 30px; height: 30px; background-image: url(../img/moving.png); position: absolute; top: -15px; left: -15px; cursor: pointer; } .resize_block{ width: 30px; height: 30px; background-image: url(../img/resize.png); position: absolute; bottom: -13px; right: -13px; cursor: pointer; } .add_left{ width: 41px; height: 30px; opacity: 0.5; background-image: url(../img/add_left.png); position: absolute; bottom: 40px; left: 40px; cursor: pointer; } .add_right{ width: 41px; height: 30px; opacity: 0.5; background-image: url(../img/add_right.png); position: absolute; bottom: 40px; right: 80px; cursor: pointer; } .close_slide{ width: 30px; height: 30px; opacity: 0.5; background-image: url(../img/close_slide.png); position: absolute; top: 40px; right: 80px; cursor: pointer; } .add_text{ width: 30px; height: 30px; opacity: 0.5; background-image: url(../img/add_text.png); position: absolute; top: 40px; left: 40px; cursor: pointer; } .add_left:hover, .add_right:hover, .close_slide:hover, .add_text:hover{ opacity: 0.8; }