body { background: url('bg.png') no-repeat top center, -webkit-linear-gradient(#765490 560px, #6A4883 620px, #433061 900px); background: url('bg.png') no-repeat top center, -moz-linear-gradient(#765490 560px, #6A4883 620px, #433061 900px, #433061); text-align: center; margin: 0 0 15px; color: white; font-family: 'Calibri', 'Verdana', sans-serif; font-size: 15px; text-shadow: 0 2px rgba(0, 0, 0, 0.6); } button { font-family: 'Calibri', 'Verdana', sans-serif; } #screen { margin-top: 85px; margin-bottom: 150px; } #screen[width="240"] { margin-top: 42.5px; margin-bottom: -363px; /* Take up no height */ image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; zoom: 2; -o-transform: scale(2); } #controls::before { content: ""; display: block; height: 30px; width: 647px; border-radius: 5px / 15px; border: 1px solid rgba(0, 0, 0, 0.4); border-width: 0 1px; margin: 0 -5px 20px; background: -webkit-linear-gradient(top, #8769A0, #9578B9 15%, #6A4883 50%, #433061); background: -moz-linear-gradient(top, #8769A0, #9578B9 15%, #6A4883 50%, #433061); box-shadow: 0 5px 4px -3px rgba(0, 0, 0, 0.6); position: absolute; } #controls { border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.4); border-top: none; box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.9), 0 -40px 2px -1px #433061 inset; width: 640px; margin: auto; height: 200px; overflow: hidden; background-color: #765490; } #controls > div { margin-top: 30px; -moz-transform-origin: 50% 0; -moz-transform: rotateX(0deg); -moz-transition: -moz-transform linear 0.5s; -webkit-transform-origin-y: 2px; -webkit-transform: rotateX(0deg); -webkit-transition: -webkit-transform linear 0.5s; } #crash { margin-top: 100px; margin-bottom: 199px; } button { background-color: #6A4883; font-weight: bold; font-size: 18px; color: white; text-shadow: 0 3px #433061; padding: 2px 10px 5px; border-radius: 0 0 10px 10px; border: 0 solid rgba(0, 0, 0, 0.4); border-width: 3px 1px 0px; display: inline; box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.2) inset; margin: 0 0 20px; } label, #sound, #controls > div > p { display: block; margin: 5px 30px; height: 18px; } label, #sound { float: left; clear: left; } #sound + p { margin-top: -23px !important; } #controls > div > p { float: right; clear: right; } input[type=checkbox] { margin: -3px 5px 0 0; } input[type=checkbox]::after { display: inline-block; content: ""; background-color: #765490; border: 0 solid rgba(0, 0, 0, 0.3); border-width: 1px 1px 2px; width: 12px; height: 12px; border-radius: 3px; position: relative; top: -3px; visibility: visible; } input[type=checkbox]:checked::after { background-color: #6A4883; border-width: 2px 1px 1px; box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.2) inset; } p:first-child { margin-top: 0; } a:link, a:visited { color: #fcb3f0; } .hidden { -moz-transform: rotateX(90deg) !important; -webkit-transform: rotateX(90deg) !important; } .dead { display: none; } input[type=file] { opacity: 0 !important; width: 0; height: 0; margin: 0; padding: 0; border: none; } input[type=range] { width: 100px; height: 14px; margin: 2px; } footer { font-size: 12px; padding-top: 8px; } p { margin: 0; } label p, #sound p { display: inline; } ul#links { display: block; text-align: center; padding: 0; } ul#links li { display: inline; list-style-type: none; } ul#links li:not(:first-child)::before { content: "•"; margin: 0 0.5em; }