body { font-family: Helvetica, Verdana } p { padding: 7px 10px; } #error { color: red; } #progress_bar { margin: 10px 0; padding: 3px; border: 1px solid #000; font-size: 14px; clear: both; opacity: 0; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; -webkit-transition: opacity 1s linear; } #progress_bar.loading { opacity: 1.0; } #progress_bar .percent { background-color: #99ccff; height: auto; width: 0; } /* Buttons */ .button { border: none; border-radius: 5px; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 24px; margin: 4px 2px; cursor: pointer; } #upload { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } #upload + label { background-color: #4CAF50; } #upload:focus + label, #upload + label:hover { background-color: #3E8E41; } #download {background-color: #4CAF50;} #download:hover {background-color: #3E8E41;} #cancel {background-color: #7c7f7c;} #cancel:hover {background-color: #af504c;} /* End Buttons */ /* Footer */ footer { position: absolute; right: 15px; bottom: 0; } .badge { position: relative; width: 100%; max-width: 400px; } .badge img { width: 100%; height: auto; } .badge #btn { position: absolute; top: 50%; left: 80%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: Transparent; background-repeat:no-repeat; border: none; overflow: hidden; outline:none; } /* End Footer */