.upload-wrapper { max-width: 750px; background-color: #E4E4E4; padding: 10px; margin: 30px auto 0px; border: 1px solid #DADADA; box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.14); -webkit-box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.14); -moz-box-box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.14); } .song-form-wrapper { max-width: 800px; padding: 10px; margin: 30px auto 0px; } #dropzone{ border: 1px solid #C7C7C7; padding: 20px; text-align: center; box-shadow: inset 0px 0px 12px rgba(0, 0, 0, 0.12); -webkit-box-shadow: inset 0px 0px 12px rgba(0, 0, 0, 0.12); -moz-box-box-shadow: inset 0px 0px 12px rgba(0, 0, 0, 0.12); border-radius: 3px; } #dropzone i{ display: block; font-size: small; margin-bottom: 5px; color: #CACACA; text-shadow: 1px 1px 1px #fff; } .input-file { position: relative; overflow: hidden; } .input-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); -ms-filter: 'alpha(opacity=0)'; opacity: 0; outline: none; background: white; cursor: pointer; display: block; } .button{ position: relative; overflow: hidden; font-family: inherit; padding: .5em 1em; color: #444; color: rgba(0,0,0,.8); border: 1px solid #999; border: 0 rgba(0,0,0,0); text-decoration: none; border-radius: 2px; display: inline-block; color: #fff; font-size: 0.8em; margin-left: 2px; } .button:hover{ box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4); -moz-box-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4); } .button:disabled{ background-color: #D4D4D4; color: #B1B1B1; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.52); box-shadow:none; -moz-box-box-shadow:none; -webkit-box-shadow:none; } .btn-blue{ background-color: #468296; } .btn-red{ background-color: #EA6363; } .file-row { padding: 10px; background-color: #DCDCDC; margin-top: 5px; box-shadow: inset 0px 0px 12px rgba(0, 0, 0, 0.04); -webkit-box-shadow: inset 0px 0px 12px rgba(0, 0, 0, 0.04); -moz-box-box-shadow: inset 0px 0px 12px rgba(0, 0, 0, 0.04); border: 1px solid #CECECE; min-height:100px; } .file-row video{ width:100%; } .file-row audio{ width:100%; } .file-row .file-row-text{ text-align:right; } .file-row .file-remove{ float: right; margin-top: -6px; text-decoration: none; color:#848484; } .file-uploaded{ background-color: #D2D6E0; } .file-row canvas{ float: left; margin-right: 10px; } .file-row span { display: block; font-size: small; color: #848484; margin-bottom: 4px; max-width: 500px; overflow: hidden; max-height: 16px; } .progress{ height: 18px; overflow: hidden; display: none; padding: 1px; width: 300px; border-radius: 10px; float: right; } .progress .progress-bar { background-color: rgba(67, 196, 218, 0.99); width: 0; height: 18px; float: left; text-align: center; border-radius: 10px; font-size: 9px; box-shadow: inset 0px 0px 9px rgba(49, 74, 56, 0.42); -webkit-box-shadow: inset 0px 0px 9px rgba(49, 74, 56, 0.42); -moz-box-box-shadow: inset 0px 0px 9px rgba(49, 74, 56, 0.42); } #error_output{ color: red; } .text-danger, .text-success{ float: left; margin-top: -10px; font-style: italic; } .text-danger { color: #F00!important; } .text-success{ color: #0CAF00!important; } .inner-content { margin-bottom: 60px; }