* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #header { font-weight: bold; font-family: sans-serif; position: absolute; float: left; z-index: 99999; left: 0; top: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.4); } #header a#logo { font-size: 18px; background-color: #00cd62; padding: 14px; float: left; line-height: 1em; display: block; text-decoration: none; color: #111; } #header a#logo:hover { text-decoration: underline; } #header #song_name { font-size: 18px; background-color: #111; color: #fff; padding: 14px; float: left; font-weight: normal; line-height: 1em; } #gif_block { position: absolute; top: 0; left: 0; width: 100%; background-color: #444; background-size: auto 100%; z-index: 9999; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; overflow: hidden; } #gif_block.expanded { height: 100% !important; } #gif_strip { width: 100%; height: 140px; background: #222; overflow: visible; box-shadow: inset 0 0 6px rgba(0,0,0,0.6); position: absolute; bottom: 0; left: 0; width: 100%; } #gif_strip.drag_in_progress { z-index: 9999; } #suggest_more { width: 40px; height: 100px; float: left; position: relative; margin: 20px 0 0 20px; background-color: #666; } #suggest_arrow { border: solid 12px #ddd; border-color: transparent transparent transparent #222; margin: 39px 0 0 14px; } #suggest_more:hover { background-color: #999; } #side_bottom { } #suggest_right { } #edit_toggle { height: 30px; text-align: center; width: 120px; background: #000; color: #fff; position: absolute; right: 0; top: 0; font-family: sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding-top: 10px; padding-left: 6px; cursor: pointer; box-shadow: 0 1px 1px rgba(0,0,0,0.4); z-index: 9999; } .gif_box { width: 140px; height: 100px; background-position: center center; background-size: cover; box-shadow: 0 1px 1px rgba(0,0,0,0.4); float: left; position: relative; margin: 20px 0 0 20px; } #gif_inner { width: 3000px; height: 100%; position: absolute; top: 0; left: 0; background-color: #444; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; } .drop_zone { width: 600px; height: 100%; border: solid 1px #000; background-size: cover; background-position: center center; float: left; margin: 0; } .ui-draggable-dragging.over { } .drop_zone.ui-state-active { background: red; } .gif_placed_box { position: absolute; background-size: cover; background-position: center center; } #placer { position: absolute; top: 0; left: 0; opacity: 0; -webkit-transition: all 0.1s linear; background-size: cover; background-position: center center; } #placer.active { opacity: 1; } #scroll { position: absolute; bottom: 0; left: 0; } #play_pause { width: 100px; height: 100px; position: fixed; left: 50%; top: 50%; border-radius: 100px; background-color: rgba(255,255,255,0.4); margin-left: -50px; margin-top: -110px; opacity: 0; box-shadow: none; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; } #play_icon { border: solid 22px #111; border-color: transparent transparent transparent #111; margin: 29px 0 0 43px; } #pause_icon { height: 34px; width: 26px; border-left: solid 10px #000; border-right: solid 10px #000; display: none; margin: 34px 0 0 36px; } #gif_block.playing #play_icon { display: none; } #gif_block.playing #pause_icon { display: block; } #gif_block.expanded #play_pause { margin-top: -50px; } #gif_block:hover #play_pause { opacity: 1; box-shadow: 0 1px 4px (rgba(0,0,0,0.6)); }