#gallery { background: white; border-top: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; height: 100px; font-size: 26px; line-height: 100px; color: #bbbbbb; position: relative; text-align: center; overflow: hidden; font-family: arial; } #gallery .click-area { -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); color: #888; display: block; font-size: 12px; height: 40px; line-height: 18px; margin: 0 auto 5px; padding: 12px 10px 8px; white-space: normal; width: 70px; cursor: pointer; } #gallery .click-area::selection, #gallery .click-area::-moz-selection, #gallery .click-area::-webkit-selection { background-color: transparent; } #gallery .images li { line-height: 20px; margin: 0px 5px; min-width: 80px; } #gallery .position-helper { color: black; display: inline-block; font-family: arial; font-size: 11px; position: relative; width: 80%; height: 20px; overflow: hidden; text-overflow: ellipsis; } #gallery .position-helper label { color: inherit; font-size: inherit; margin: 0px; } #gallery li:hover .position-helper { color: #888; } #gallery li label { position: absolute; left: 0px; width: 100%; } #gallery ul, #gallery li { list-style: none; padding-left: 0; } #gallery .images { margin: 0 26px; display: inline-block; position: relative; white-space: nowrap; } #gallery .images li:first-child { margin-left: 10px; } #gallery li { display: inline-block; } #gallery img { max-height: 60px; max-width: 400px; margin: 10px auto; margin-bottom: 5px; display: block; -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); cursor: move; } #gallery .prev, #gallery .next { cursor: pointer; height: 100px; line-height: 100px; } #gallery .prev:active:before , #gallery .next:active:before { opacity: 0.5; } #gallery .prev:hover , #gallery .next:hover { color: #888; } #gallery .disabled:before, #gallery .disabled:hover:before { color: #bbb; opacity: 0; } #admin-dock #gallery .prev { position: absolute; left: 0px; top: 0px; width: 45px; text-align: center; background: -moz-linear-gradient(to right, #FFFFFF 70%, rgba(255, 255, 255, 0.85) 80%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent; background: -webkit-linear-gradient(left, #FFFFFF 70%, rgba(255, 255, 255, 0.85) 80%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent; background: -webkit-linear-gradient(to right, #FFFFFF 70%, rgba(255, 255, 255, 0.85) 80%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent; background: linear-gradient(to right, #FFFFFF 70%, rgba(255, 255, 255, 0.85) 80%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent; } #admin-dock #gallery .next { position: absolute; right: 0px; top: 0px; width: 45px; text-align: center; background: -moz-linear-gradient(to left, #FFFFFF 70%, rgba(255, 255, 255, 0.85) 80%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent; background: -webkit-linear-gradient(right, #FFFFFF 70%, rgba(255, 255, 255, 0.85) 80%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent; background: -webkit-linear-gradient(to left, #FFFFFF 70%, rgba(255, 255, 255, 0.85) 80%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent; background: linear-gradient(to left, #FFFFFF 70%, rgba(255, 255, 255, 0.85) 80%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent; } #gallery.delete-active:before { font-family: Arial; font-weight: bold; content: "Drop here to remove"; text-align: center; width: 100%; height: 100%; display: block; position: absolute; top 0px; left: 0px; z-index:10; color: red; font-size: 40px; background: white; } #gallery.remove-hover:before { color: white; background: red; } body > img.movable { margin: 0px; padding: 0px; -webkit-box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3); display: block; max-height: 60px; max-width: 400px; opacity: 0.9 !important; position: fixed !important; } img.movable.ui-draggable { cursor: move; }