body { background-color: #dedede; margin: 5px; } hr { height: 1px; } img { border: 0; } button { border: solid 1pt #B0B0B0; font-family: MS Sans Serif, sans-serif; font-size: 11px; color: #191970; padding: 2px 7px 2px 7px; } button:active { padding: 3px 6px 1px 8px; } .ttl_css { position: absolute; text-shadow: 0 0 2px #fff; padding: 4px 8px; border: 1px solid rgba(255, 255, 255, 0.25); background-color: #cfcfcf; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: 0 0 3px #000000; -webkit-box-shadow: 0 0 3px #000000; -moz-box-shadow: 0 0 3px #000000; } .findlg { filter: alpha(opacity=37); opacity: 0.37; -moz-opacity: 0.37; margin-bottom: 10px; } .findlg:hover { filter: alpha(opacity=100); opacity: 1.00; -moz-opacity: 1.00; } .gifin { position: absolute; left: 112px; top: 428px; padding: 5px; background-color: #fcfef3; border: 1px solid #6e6960; font-size: 12px; max-width: 300px; min-height: 100px; min-width: 150px; } .pg_btn1 { width: 27px; height: 78px; cursor: pointer; display: block; } .pg_btn1:hover { background-position: -27px; cursor: pointer; } .pg_btn1:active { background-position: -55px; cursor: pointer; } .pg_btn2 { background-position: -54px; width: 27px; height: 78px; cursor: pointer; display: block; } .pg_btn2:hover { background-position: -27px; cursor: pointer; } .pg_btn2:active { background-position: 1px; cursor: pointer; } progress { -webkit-appearance: none; appearance: none; } .prog0 { width: 10em; height: 1em; } .prog0::-webkit-progress-bar { background-color: #eee; border-radius: 2px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; } .prog0[value]::-webkit-progress-value { background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #09c, #7FFFD4); border-radius: 2px; background-size: 35px 20px, 100% 100%, 100% 100%; } .prog1 { width: 10em; height: 1em; } .prog1::-webkit-progress-bar { background-color: #eee; border-radius: 2px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; } .prog1[value]::-webkit-progress-value { background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #7FFFD4, #F4A460); border-radius: 2px; background-size: 35px 20px, 100% 100%, 100% 100%; } .prog2 { width: 10em; height: 1em; } .prog2::-webkit-progress-bar { background-color: #eee; border-radius: 2px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; } .prog2[value]::-webkit-progress-value { background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #F4A460, #FFC0CB); border-radius: 2px; background-size: 35px 20px, 100% 100%, 100% 100%; } .prog3 { width: 10em; height: 1em; } .prog3::-webkit-progress-bar { background-color: #eee; border-radius: 2px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; } .prog3[value]::-webkit-progress-value { background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #FFC0CB, #FFD700); border-radius: 2px; background-size: 35px 20px, 100% 100%, 100% 100%; } .prog4 { width: 10em; height: 1em; } .prog4::-webkit-progress-bar { background-color: #eee; border-radius: 2px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; } .prog4[value]::-webkit-progress-value { background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #FFD700, #FF0000); border-radius: 2px; background-size: 35px 20px, 100% 100%, 100% 100%; } .prog5 { width: 10em; height: 1em; } .prog5::-webkit-progress-bar { background-color: #eee; border-radius: 2px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; } .prog5[value]::-webkit-progress-value { background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #FF0000, #FF0000); border-radius: 2px; background-size: 35px 20px, 100% 100%, 100% 100%; } .dvfirs { overflow: hidden; white-space: nowrap; float: left; margin-left: 20px; width: 350px; text-align: center; } .dvsec { overflow: hidden; white-space: nowrap; float: left; width: 140px; } .dvtre { overflow: hidden; white-space: nowrap; float: left; width: 60px; } div.grid-container-main { display: grid; grid-template-columns: 265px auto 111px; gap: 10px 5px; grid-template-areas: ' . . .' 'footer footer footer'; } div.grid-container-main > div { vertical-align: top; } div.grid-container-main > div.bottom { grid-area: footer; } div.grid-container-main > div.center { margin-top: 18px; } span.donatedEkr { background-color: lightyellow; padding: 2px; border-radius: 4px; }