#wrapper-activity-indicator { position: fixed; top: 20px; /* This is the status bar height */ left: 0; margin: 0; padding: 0; width: 100%; height: 4px; background-image: url('../shared/progress.gif'); pointer-events: none; visibility: hidden; } #wrapper-activity-indicator.visible { -moz-transition-delay: .5s; /* Delay opening a wrapper */ -moz-transition-property: visibility; visibility: visible; } #wrapper-footer { position: fixed; bottom: -4rem; left: 0; margin: 0; padding: 0; width: 100%; height: 5rem; pointer-events: none; visibility: hidden; } #wrapper-footer.visible { pointer-events: auto; visibility: visible; } #handler { width: 100%; height: 1rem; background-color: #000; background-repeat: no-repeat; background-position: right; } #wrapper-footer.closed #handler { background-image: url("images/open.png"); } #wrapper-footer menu[type="buttonbar"] { width: 100%; height: 4rem; margin: 0; padding: 0; background-color: rgba(0,0,0,.8); -moz-transform: translateY(-4rem); -moz-transition: -moz-transform .4s ease; } #wrapper-footer.closed menu { -moz-transform: translateY(0); } #wrapper-footer menu button { background-color: transparent; -moz-appearance: none; border: none; display: block; margin: 0; padding: 0; width: 20%; height: 100%; float: left; background-position: center; background-repeat: no-repeat; opacity: 1; } #back-button { background-image: url("images/back.png"); } #forward-button { background-image: url("images/forward.png"); } #reload-button { background-image: url("images/reload.png"); } #bookmark-button { background-image: url("images/bookmark.png"); } #bookmark-button[data-disabled] { background-image: none; } #close-button { background-image: url("images/close.png"); } #wrapper-footer menu button[data-disabled] { opacity: .2; pointer-events: none; } #wrapper-footer input::-moz-focus-inner, input:active { border: 0; background: transparent !important; }