Calculator

dabblet.css

/**
 * Calculator
 */

@font-face {
    font-family: "Segoe UI";
    src: url('http://youfailhost.googlecode.com/files/Segoe%20UI.ttf') format('truetype')L;
}
    
@font-face {
    font-family: Consolas;
    src: url('http://s22.chomikuj.pl/File.aspx?e=0hIXIOU0R0qW1CVxUjo4hiWVlHRvu_nDnFR_VFK-jP5n5WREpq64LNu8_mUTFveax9NjDiEct66BhI5teTR0-DhEexxHMnCyNr0_LheVJptiQeGNT0EaWvdIVimXdTb3AYLLpSRTyaUQKfYOAL6ufg&pv=2') format('truetype')L;
}

body {
    font-family:"Segoe UI";
    color: #1e395b;
}
    
section {
    background-image: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680503/Background.png');
    width: 480px;
    height: 450px;
    margin: auto;
    position: relative;
}

section  ul {
    position: absolute;
    z-index: 100;
}

table {
    width: 395px;
    height: 318px;
    position: relative;
    top: 82px;
    left: 43px;
    border-spacing: 5px;   
}

#result {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') 0px -263px;
    background-repeat: no-repeat;
    width: 384px;
    height: 48px;
}

#display {
    font-size: 1.28em;
    font-weight: 600;
    color: black;
    width: 92px;
    position: relative;
    top: 4px;
    left: 294px;
}

#binary {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') 0px -201px;
    background-repeat: no-repeat;
    width: 384px;
    height: 59px;
    font-family: Consolas;
    font-size: 0.8em;
} 

#binary table {
    width: 386px;
    height: 59px;
    position: absolute;
    top: 62px;
    left: 13px;
    border-spacing: 0;
    line-height: 50%;
}

#binary table td {
    padding: 0;
    height: 1px;
}

.bin_grey {
    color: #666666;
}

#zero {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') -70px 0;
    background-repeat: no-repeat;
    width: 71px;
    height: 26px;
    text-align: center;
}

#equals {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') 0 -84px;
    background-repeat: no-repeat;
    width: 32px;
    height: 58px;
    text-align: center;
    font-size: 1.5em;
}

#arrow {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') 0 -56px;
    background-repeat: no-repeat;
    width: 32px;
    height: 26px;
}

#empty {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') -35px -28px;
    background-repeat: no-repeat;
    width: 32px;
    height: 26px;
}

.numbers {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') 0 0;
    background-repeat: no-repeat;
    width: 32px;
    height: 26px;
    text-align: center;
}

.numbers:hover, .symbols:hover, .signs:hover, .operators:hover {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') -35px -145px;
    background-repeat: no-repeat;
    width: 32px;
    height: 26px;
}

#zero:hover {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') -70px -27px;
    background-repeat: no-repeat;
    width: 71px;
    height: 26px;
}

#equals:hover {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') -35px -84px;
    background-repeat: no-repeat;
    width: 32px;
    height: 58px;
}

#arrow:hover {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') 0px -173px;
    background-repeat: no-repeat;
    width: 32px;
    height: 26px;
}

.m:hover {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') 0 -145px;
    background-repeat: no-repeat;
    width: 32px;
    height: 26px;
}

.symbols {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') 0 -28px;
    background-repeat: no-repeat;
    width: 32px;
    height: 26px;
    text-align: center;
    font-size: 0.7em;
}

.signs {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') 0 -28px;
    background-repeat: no-repeat;
    width: 32px;
    height: 26px;
    text-align: center;
    font-size: 0.8em;
}

#asterisk {
    font-size: 1.1em;
    vertical-align: bottom;
}

#minus {
    font-size: 1.1em;
}

.operators {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') 0 -28px;
    background-repeat: no-repeat;
    width: 32px;
    height: 26px;
    text-align: center;
    font-size: 0.7em;
}

.grey {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') -35px -56px;
    background-repeat: no-repeat;
    width: 32px;
    height: 26px;
    text-align: center;
    font-size: 0.7em;
}

.hex {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') -35px -56px;
    background-repeat: no-repeat;
    width: 32px;
    height: 26px;
    text-align: center;
}

.m {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') -35px 0;
    background-repeat: no-repeat;
    width: 32px;
    height: 26px;
    text-align: center;
    font-size: 0.7em;
}

.frames {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') -70px -56px;
    background-repeat: no-repeat;
    width: 70px;
    height: 89px;
    font-size: 0.7em;
}

input {
    margin: 3.5px;
    position:relative;
    left: 5px;
}

ul {
    list-style: none;
	position: fixed;
	margin: 0;
	padding: 0;
}

#close {
    width: 63px;
	height: 55px;
	position: relative;
	top: 0;
	left: 390px;
}

#close:hover {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') -202px 0px;
    width: 63px;
	height: 55px;
	position: relative;
	top: 0;
	left: 390px;
}

#minimize {
    width: 50px;
	height: 56px;
	position: relative;
	top: -55px;
	left: 330px;
}

#minimize:hover {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') -150px 0px;
    background-repeat: no-repeat;
    width: 50px;
	height: 56px;
	position: relative;
	top: -55px;
	left: 333px;
}

#view {
    width: 30px;
	height: 20px;
	position: absolute;
	top: 59px;
	left: 42px;
}

#view:hover {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') 0px -314px;
    background-repeat: no-repeat;
    width: 219px;
	height: 265px;
	position: relative;
    top: 59px;
	left: 37px;
}

#edit {
    width: 30px;
	height: 20px;
	position: absolute;
	top: 59px;
	left: 78px;
}

#edit:hover {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') -202px -585px;
    background-repeat: no-repeat;
    width: 157px;
	height: 72px;
	position: relative;
	top: 59px;
	left: 76px;
}

#help {
    width: 30px;
	height: 20px;
	position: absolute;
	top: 59px;
	left: 114px;
}

#help:hover {
    background: url('https://d3jpl91pxevbkh.cloudfront.net/valiyo/image/upload/v1358680536/Sprites.png') 0px -585px;
    background-repeat: no-repeat;
    width: 196px;
	height: 80px;
	position: relative;
	top: 59px;
	left: 110px;
}

dabblet.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Calculator</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<section>
	    <ul>
	        <li id="close"></li>
	        <li id="minimize"></li>
	    </ul>
	    <ul>
	        <li id="view"></li>
	        <li id="edit"></li>
	        <li id="help"></li>
	    </ul>
	    <table>
	        <tr>
	            <td id="result" colspan="10"><div id="display">8854455</div></td>
	        </tr>
	        <tr>
	            <td id="binary" colspan="10">
	                <div>
                        <table>
                            <tr>
                                <td>0000</td>
                                <td>0000</td>
                                <td>0000</td>
                                <td>0000</td>
                                <td>0000</td>
                                <td>0000</td>
                                <td>0000</td>
                                <td>0000</td>
                            </tr>
                            <tr>
                                <td colspan="4" class="bin_grey">63</td>
                                <td colspan="3" class="bin_grey">47</td>
                                <td class="bin_grey">&nbsp;&nbsp;32</td>
                            </tr>
                            <tr>
                                <td>0000</td>
                                <td>0000</td>
                                <td>1000</td>
                                <td>0111</td>
                                <td>0001</td>
                                <td>1011</td>
                                <td>1011</td>
                                <td>0111</td>
                            </tr>
                            <tr>
                                <td colspan="4" class="bin_grey">31</td>
                                <td colspan="3" class="bin_grey">15</td>
                                <td class="bin_grey">&nbsp;&nbsp;&nbsp;0</td>
                            </tr>
                        </table>
	                </div>
	            </td>
	        </tr>
	        <tr>
	            <td colspan="2" rowspan="3" class="frames">
	                <input type="radio" name="numeral system"/> Hex<br />
	                <input type="radio" name="numeral system" checked="checked"/> Dec<br />
	                <input type="radio" name="numeral system"/> Oct<br />
	                <input type="radio" name="numeral system"/> Bin<br />
                </td>
	            <td id="empty"></td>
	            <td class="operators">Mod</td>
	            <td class="hex">A</td>
	            <td class="m">MC</td>
	            <td class="m">MR</td>
	            <td class="m">MS</td>
	            <td class="m">M+</td>
	            <td class="m">M-</td>
	        </tr>
	        <tr>
	            <td class="operators">(</td>
	            <td class="operators">)</td>
	            <td class="hex">B</td>
	            <td id="arrow"></td>
	            <td class="symbols">CE</td>
	            <td class="symbols">C</td>
	            <td class="symbols">&plusmn;</td>
	            <td class="grey">&radic;</td>
	        </tr>
	        <tr>
	            <td class="operators">RoL</td>
	            <td class="operators">RoR</td>
	            <td class="hex">C</td>
	            <td class="numbers">7</td>
	            <td class="numbers">8</td>
	            <td class="numbers">9</td>
	            <td class="signs">/</td>
	            <td class="grey">%</td>
	        </tr>
	        <tr>
	            <td colspan="2" rowspan="3" class="frames">
	                <input type="radio" name="word size" checked="checked"/> Qword<br />
	                <input type="radio" name="word size"/> Dword<br />
	                <input type="radio" name="word size"/> Word<br />
	                <input type="radio" name="word size"/> Byte<br />
	            </td>
	            <td class="operators">Or</td>
	            <td class="operators">Xor</td>
	            <td class="hex">D</td>
	            <td class="numbers">4</td>
	            <td class="numbers">5</td>
	            <td class="numbers">6</td>
	            <td class="signs" id="asterisk">*</td>
	            <td class="grey">1/x</td>
	        </tr>
	        <tr>
	            <td class="operators">Lsh</td>
	            <td class="operators">Rsh</td>
	            <td class="hex">E</td>
	            <td class="numbers">1</td>
	            <td class="numbers">2</td>
	            <td class="numbers">3</td>
	            <td class="signs" id="minus">-</td>
	            <td id="equals" rowspan="2">=</td>
	        </tr>
	        <tr>
	            <td class="operators">Not</td>
	            <td class="operators">And</td>
	            <td class="hex">F</td>
	            <td id="zero" colspan="2">0</td
	            >
	            <td class="grey">,</td>
	            <td class="signs">+</td>
	        </tr>
	    </table>
	</section>
</body>
</html>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}