public/fun/article/solar/style.css

@charset "UTF-8";

body {
    background-color: #000;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
    font-weight: 400;
    font-style: normal
}

img,
img a {
    border: none
}

.essay {
    position: absolute;
    font-size: .9em;
    color: #cdcdcd
}

.essay a {
    color: #fff;
    text-decoration: none
}

#distance-counter,
#langselect,
#donate {
    position: fixed;
    display: inline;
    text-align: right;
    color: #aaa
}

#distance-counter {
    height: 20px;
    text-align: right;
    top: 90%;
    right: 47%;
    margin-left: -60px
}

#langselect {
    height: 20px;
    width: 120px;
    top: 16px;
    left: 90%;
    margin-left: -60px;
    z-index: 10
}

#donate {
    width: 80px;
    top: 14px;
    left: 90%;
    margin-left: -80px;
    z-index: 11;
    opacity: .7
}

#langselect img {
    opacity: .7;
    height: 24px;
    width: 24px;
    cursor: pointer
}

#langselect ul {
    position: relative;
    top: -18px
}

#counter {
    font-size: 13px;
    display: inline;
    cursor: pointer
}

#selectarrow img {
    display: inline;
    opacity: .7;
    height: 9px;
    width: 9px;
    margin-left: 4px;
    cursor: pointer
}

#unitselect {
    position: relative;
    top: -250px;
    display: none
}

#langs {
    display: none
}

#unitselect li,
#langselect li {
    list-style-type: none;
    background: #000;
    padding: 2px 0
}

#unitselect li a,
#langselect li a {
    font-size: 13px;
    padding: 6px 4px;
    list-style-type: none;
    color: #aaa;
    text-decoration: none;
    background: #000
}

#unitselect li:hover>a,
#langselect li:hover>a {
    color: #fff
}

#credit {
    position: fixed;
    display: inline;
    text-align: left;
    width: 200px;
    top: 12px;
    left: 20px
}

#credit a.logolink {
    position: absolute;
    font-weight: 400;
    font-style: normal;
    font-size: 11px;
    color: #8f8f8f;
    text-decoration: none;
    margin-top: 8px
}

#credit img {
    position: absolute;
    height: 28px;
    width: 28px;
    margin-left: 100px;
    opacity: .5
}

.navi {
    position: fixed;
    width: 500px;
    height: 100px;
    top: 0;
    left: 50%;
    margin-left: -250px
}

.navi li {
    display: inline;
    margin: 10px;
    list-style-type: none
}

.navi li a {
    color:#8f8f8f
}

.navi li a:hover {
    color:#fff
}

#lightspeeder {
    position: fixed;
    width: 160px;
    height: 50px;
    top: 90%;
    left: 99%;
    margin-left: -150px;
    font-weight: 400;
    font-style: normal;
    font-size: 11px;
    color: #aaa
}

#lightspeeder a {
    opacity: .7;
    color: #aaa;
    text-decoration: none
}

#lightspeeder a:hover {
    opacity: 1
}

#lightspeedmsg {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: #e8e8e8;
    text-align: right;
    position: fixed;
    width: 400px;
    height: 40px;
    top: 90%;
    right: 5%;
    margin-left: -240px;
    margin-top: -40px;
    display: none
}

#msg1,
#msg2,
#msg3,
#msg4,
#msg5 {
    display: none;
    position: absolute;
    text-align: right;
    right: 0;
    top: 6px
}

#lightspeeder img {
    margin-top: -16px;
    height: 44px;
    width: 44px
}

.warpfactor {
    position: relative;
    top: -18px
}

#reloader {
    position: fixed;
    width: 20px;
    top: 90%;
    left: 99%;
    margin-left: -100px;
    font-weight: 400;
    font-style: normal;
    font-size: 11px;
    color: #aaa
}

#reloader a {
    opacity: .7;
    color: #aaa;
    text-decoration: none
}

#reloader a:hover {
    opacity: 1
}

#introwrap {
    float: left;
    display: inline
}

.scalewrap {
    float: right;
    height: 100%;
    margin-left: 100px;
    z-index: 5
}

#scaleimg {
    z-index: 9
}

.scalewrap img {
    position: absolute;
    top: 50vh;
    margin-top: -250px;
    height: 500px;
    width: 500px
}

#navblocker {
    position: absolute;
    background-color: #000;
    height: 99%;
    width: 100px;
    margin-left: 200px;
    z-index: 1
}

.planetwrapper {
    position: relative;
    top: 40%
}

.earthwrapper {
    position: absolute;
    top: 66vh;
    height: 20em;
    margin-top: -10em
}

#bigspace {
    position: absolute;
    left: 780px;
    background-color: #000;
    background-image: url(img/ticks2.svg);
    background-repeat: repeat-x;
    background-position: left bottom;
    width: 1702774px;
    height: 99.9%
}

.labeltext {
    position: absolute;
    font-weight: 200;
    font-style: normal;
    font-size: 3em;
    color: #eaeaea;
    text-transform: uppercase
}

#sunwrap {
    left: -200px;
    position: absolute;
    top: -150px;
    z-index: 2
}

#sun {
    position: relative;
    height: 400px;
    width: 400px;
    fill: #fde301
}

#suntxt {
    text-align: center;
    margin: 0 auto;
    width: 400px;
    top: 184px;
    color: #000;
    font-size: 2em
}

#mercury {
    position: absolute;
    left: 16666px;
    height: 1px;
    width: 1px;
    fill: #fc0
}

#merctxt {
    left: 16462px;
    padding-left: 200px;
    color: #fc0
}

#venus {
    position: absolute;
    left: 31138px;
    height: 4px;
    width: 4px;
    fill: #86ffca
}

#venustxt {
    left: 30935px;
    color: #86ffca;
    padding-left: 200px
}

#earth {
    position: absolute;
    left: 43053px;
    height: 3px;
    width: 3px;
    fill: #01fdfa
}

#earthtxt {
    left: 42850px;
    color: #01fdfa;
    padding-left: 200px
}

#moon {
    position: absolute;
    left: 43164px;
    height: 1px;
    width: 1px;
    fill: #fff
}

#moontxt {
    margin-top: -110px;
    left: 43160px;
    color: #fff;
    font-size: 2em
}

#mars {
    position: absolute;
    left: 65586px;
    height: 2px;
    width: 2px;
    fill: #ff7443
}

#marstxt {
    left: 65383px;
    color: #ff7443;
    padding-left: 200px
}

#jupiter {
    position: absolute;
    left: 224041px;
    height: 40px;
    width: 40px;
    fill: #ffa043
}

#jupitertxt {
    top: 44px;
    left: 223842px;
    color: #ffa043;
    padding-left: 200px
}

#jupitermoons {
    position: absolute;
    left: 224162px;
    color: #f0e8e0;
    font-size: .4em
}

.moondot {
    margin: 0 6px 2px 0
}

#io {
    position: absolute;
    left: 0
}

#europa {
    position: absolute;
    left: 193px
}

#ganymede {
    position: absolute;
    left: 307px
}

#callisto {
    position: absolute;
    left: 541px
}

#saturn {
    position: absolute;
    left: 412397px;
    height: 34px;
    width: 65px;
    fill: #ffa043
}

#saturntxt {
    top: 44px;
    left: 412225px;
    color: #f9d293;
    padding-left: 200px
}

#saturnmoons {
    position: absolute;
    left: 412742px;
    color: #f0e8e0;
    font-size: .4em
}

#titan {
    position: absolute;
    left: 0
}

#uranus {
    position: absolute;
    left: 827961px;
    height: 14px;
    width: 14px;
    fill: #18e6ff
}

#uranustxt {
    top: 28px;
    left: 827763px;
    color: #18e6ff;
    padding-left: 200px
}

#neptune {
    position: absolute;
    left: 1295901px;
    height: 14px;
    width: 14px;
    fill: #45b9ff
}

#neptunetxt {
    top: 24px;
    left: 1295703px;
    color: #45b9ff;
    padding-left: 200px
}

#triton {
    position: absolute;
    left: 1295805px;
    color: #696969;
    font-size: .4em
}

#pluto {
    position: absolute;
    left: 1699774px;
    height: 1px;
    width: 1px;
    fill: #d9f5ff
}

#plutotxt {
    top: 17px;
    left: 1699570px;
    color: #d9f5ff;
    padding-left: 200px
}