html {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

div {
    display: block;
    position: absolute;
}

.control {
    width: 100%;
    height: 100%;
    z-index: 10000;
}
.wrapper {
    top: 50%;
    left: 50%;
}

.orbit {
    top: -50%;
    left: -50%;
    border: dashed 1px #444;
    border-radius: 10000px;
    pointer-events: none;
    z-index: 1;
    /*
    transition:
        top 2s ease-out 0s,
        left 2s ease-out 0s,
        width 2s ease-out 0s,
        height 2s ease-out 0s,
        opacity 2s ease-out 0s;
    */
}

.childs {
    border: none;
    /*
    transition:
        top 2s ease-out 0s,
        left 2s ease-out 0s;
        */
}
.object {
    left: 0;
    top: 0;
    cursor: pointer;
    opacity: 1;
}

.object {
}


.body {
    width: 10px;
    height: 10px;
    top: 50%;
    left: 50%;
    background: #fff;
    border-radius: 1000000px;
    border: none;
    z-index: 3;
    /*
    transition:
       top 2s ease-out 0s,
        left 2s ease-out 0s,
        width 2s ease-out 0s,
        height 2s ease-out 0s,
        margin-top 2s ease-out 0s,
        margin-left 2s ease-out 0s,
        opacity 2s ease-out 0s;
    */
}

#sun > .body {
    background: yellow;
}

.crosshair {
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAADLUlEQVR4nK2UT2hcVRSHv3Pvm8nUJE0y0zTBFk2xEVEXakHFIg7h1YWCC9GShTUBYVB0JV00iCC4cFNcRBAZNzMRzAStFBdVJ2OZ7kSJgroShJZITdLYdGpC5s28d4+LzEufaaouvKsL98d3z7/fgf/5yK0efD8vQBdgAAcEtVpd/023K9D38wboA6y1vWn6BrraSqsxkFlZKBbbu+mACLh2E9D389Zab1i7c8+q9U5gvIdExHby+VNVvsC4d3Tl0k/AEOABIbBUq9Wd2Qlze7pHXe/Qx2pT0xhvUIRpoAl8D3wuuKeIWJD+2992zsWw5Vqt7ujkvR2+MfagzfSXER5TsSfby4dGq5Xy6yhNgR+rs6UXTCs6TBTWEDPlZQ8UOrAo5niJwvZp7/7XQB4WYybm58ozieAvqnDF9/M2vP6bVU2/bAYGP1CbPmVyd1Wg/nMsjCPsCr10N8YWMPbL6txMEkZ1rvSgu3JxKq6ZSCsg5SZEJMBEbyS1MdCke7JHMXYvosXdGrWjAcvzs7NLKF8DTx8pFFJxptK5ZMy+O18BeVeUrzBcd6rn5ivlUv745P6Uti+Icz+4xu8ngWWTG5kWw6Aq9wL3ecaOtFZ+XQTScYSBIGkAFR5VxRe42/fz1ms1RoHDGHv/dgOEo6r4wCGAoN3cw9Y8GgPQccAiAE6fqVZKWbd66U1giPW1RW1tPk4kY3E3q5XSA9VKKYtSVNVINlbbbA33jTm0kZ4HHIbxm2q2cfW76mcfrSbreqRQSCnuOXHtBVpBmy2nBNvAc5+UlxT5VJWX6M2NJRtgciOnj41PTCaB2UbrFM4d1Cgqd3SNWq2uf3OKceEULloXLzOjPdl7uDG0kwZ5ItYdG594FRe+JaoXwrXLZ0k4ZdvLHaMPS8++R0hlihi714h8iDNn1bgzKOfVyBmcO4GLngT9VjavTrrm5i9Jp8RjI0A/0AuEDNxhjDWngePJT1UVXLhBFL3nGmvviwSXk7AkMAP0AOlEmow9/+KBlDVjqgwjGmrQ/EM2Gt8411xnh4d3Am9ja0k24lokzy5771Y68Tp3B1z7h42cBgL+w+b+C1NtfBwQ6YzRAAAAAElFTkSuQmCC);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
    /*
    transition:
        top 2s ease-out 0s,
        left 2s ease-out 0s,
        opacity 2s ease-out 0s;
    */
}

.hidden {
    opacity: 0;
}

#menu {
    display: block;
    position: absolute;
    list-style: none;
    top: 10px;
    right: 10px;
    margin: 0;
    padding: 0;
    z-index: 1000;
    color: #eee;
}

#menu label {
    display: inline-block;
    width: 50px;
}
#menu input {
    margin: 5px 0;
}

#menu a {
    color: #eee;
    cursor: pointer;
    text-decoration: none;
}


#menu a:hover {
    color: #eee;
    text-decoration: underline;
}

#menu a.center {
    color: #fff;
    text-decoration: underline;
}


#menu a small {
    font-size: 70%;
    color: #ccc;
}