* { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .thumblist-item { display: inline-block; margin: 5px; padding: 5px; background: #f0f0f0; text-decoration: none; } .thumblist-item a { text-decoration: none; } .thumblist-item .imgcontainer { width: 100px; height: 100px; position: relative; } .thumblist-item .imgcontainer img { max-width: 100px; max-height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .thumblist-title { display: block; font-weight: bolder; } .thumblist-stock { position: absolute; z-index: 10; bottom: 0; right: 0; background: #f0f0f0; padding: 10px; } @media print { footer { position: fixed; bottom: 0; font-size: 0.8em; } footer li { display: inline-block; margin-right: 40px; } } #depositlist { display: inline; } #deposit-wrapper { display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.75); z-index: 100; } #deposit-input { display: grid; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 320px; height: 540px; grid-template-columns: 100px 100px 100px 200px; grid-template-rows: 100px 100px 100px 100px 100px; column-gap: 10px; row-gap: 10px; } #deposit-wrapper.show { display: block; } .fakelink { cursor: pointer; color: blue; } #deposit-output { grid-column-start: 1; grid-column-end: 4; grid-row: 1; background: #ffffff; } #deposit-title { display: block; font-family: sans-serif; padding: 0 10px; line-height: 30px; font-size: 25px; height: 30px; } #deposit-amount { display: block; text-align: right; font-size: 50px; line-height: 70px; height: 70px; padding: 0 10px; font-family: monospace; } .numpad { background: #f0f0f0; text-decoration: none; font-size: 50px; font-family: sans-serif; line-height: 100px; text-align: center; } #numpad-1 { grid-column: 1; grid-row: 2; } #numpad-2 { grid-column: 2; grid-row: 2; } #numpad-3 { grid-column: 3; grid-row: 2; } #numpad-4 { grid-column: 1; grid-row: 3; } #numpad-5 { grid-column: 2; grid-row: 3; } #numpad-6 { grid-column: 3; grid-row: 3; } #numpad-7 { grid-column: 1; grid-row: 4; } #numpad-8 { grid-column: 2; grid-row: 4; } #numpad-9 { grid-column: 3; grid-row: 4; } #numpad-del { grid-column: 1; grid-row: 5; background: #f06060; } #numpad-0 { grid-column: 2; grid-row: 5; } #numpad-ok { grid-column: 3; grid-row: 5; background: #60f060; } #numpad-ok.disabled { background: #606060; } #transfer-userlist { display: grid; grid-column: 4; grid-row-start: 1; grid-row-end: 6; grid-template-columns: 200px; grid-template-rows: 25px 1fr 25px; column-gap: 10px; row-gap: 10px; padding: 0; margin: 0; } #transfer-userlist.show { display: block; position: relative; } #transfer-userlist-list { margin: 10px 0; padding: 0; overflow-y: hidden; max-height: calc(100% - 150px); top: 45px; bottom: 45px; grid-row: 2; grid-column: 1; } #transfer-userlist-list > li { display: block; background: #f0f0f0; padding: 15px 20px; margin-bottom: 10px; list-style-type: none; font-family: sans-serif; line-height: 20px; font-size: 20px; height: 20px; } #transfer-userlist > #scroll-up, #transfer-userlist > #scroll-down { left: 0; right: 0; height: 25px; text-align: center; display: block; background: #f0f0f0; padding: 20px; font-family: sans-serif; line-height: 25px; font-size: 25px; } #transfer-userlist > #scroll-up{ grid-row: 1; grid-column: 1; top: 0; } #transfer-userlist > #scroll-down { grid-row: 2; grid-column: 1; bottom: 0; } #transfer-userlist-list > li.active { background: #60f060; }