body { position:fixed; top:0; bottom:0; left:0; right:0; padding:0; margin:0; font-family:eurostile, 'eras medium ITC','lucida sans',univers,sans-serif; color:#5fabb8; 
       overflow:hidden; -webkit-overflow-scrolling:touch; }
*:focus {outline:0;}
h1 { font-size:2.35em; font-weight:normal; line-height:1.2em; margin:0; }
h2 { font-weight:normal; margin:0; }
h1 span, h2 span { white-space:nowrap; }

.round { -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; }
.page_table { display:table; position:absolute; top:0; bottom:0; width:100%; height:100%; pointer-events:none; }
.page_table > div { display:table-cell; width:100%; vertical-align:middle; text-align:center; pointer-events:none; }
#page_bg, #page_bg img { position:absolute; width:100%; height:100%; overflow:hidden; }
#sun { display:inline-block; position:relative; width:8em; height:8em; pointer-events:all; cursor:pointer; }
#sun img { border:none; }
#sun_logo { width:8em; }
#sun .planet_label { width:3.875em; height:.906em; top:8.5em; margin-left:-2em; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; }
#sun_glow { position:absolute; width:100%; pointer-events:none; }
#sun_glow img { position:absolute; width:80%; margin:0 10% 0 10%; pointer-events:none; }
.orbit { pointer-events:none; }
.planet, .planet_label { position:absolute; left:50%; margin-top:-2.5em; width:5em; height:5em; overflow:hidden; pointer-events:all; }
.planet .planet_icon { position:absolute; left:0; width:5em; border:0; }
.planet_label { position:absolute; overflow:visible; opacity:0; -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; }
.planet_label img { width:6.5em; height:4.7em; margin:-5em; padding:4.3em .25em 6em 8.25em; }
#planet_first, #label_first { margin-left:-10em; }
#planet_second, #label_second { margin-left:-13.5em; }
#planet_third, #label_third { margin-left:-17em; }
#planet_fourth, #label_fourth { margin-left:-20.5em; }
#planet_fifth, #label_fifth { margin-left:-24em; }

#timer { position:absolute; bottom:.9em; left:.9em; pointer-events:none; }
#timer > div, #fps_container > div { position:relative; display:inline-block; width:50px; height:50px; background:rgba(91,255,255,.25);
        -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; border:1px solid #04a8b4; overflow:hidden; 
        margin-right:5px; }
#timer .counter { position:absolute; text-align:center; width:50px; line-height:50px; font-size:10pt; }
#timer .radial { position:absolute; top:0; width:25px; height:50px; overflow:hidden; }
#timer .radial > div { width:50px; height:50px; }
#timer .radial > div > div { width:25px; height:50px; margin-left:25px; overflow:hidden; }
#timer .radial > div > div > div { width:36px; height:36px; margin-left:-25px; border:7px solid #04a8b4; }
#timer .radial_1 { left:25px; }
#timer .radial_1 > div { margin-left:-25px; }
.radial_2 { left:0; }
.radial_2 > div { margin-left:0; }
#fps_container { position:absolute; right:.9em; bottom:.9em; }
#fps_container .counter { font-size:14pt; margin:24px 10px 10px 10px ; line-height:16px; }
#fps_container > div { width:80px; height:80px; }
#fps_container .counter { position:absolute; text-align:center; }
#fps_container .radial { position:absolute; top:0; width:40px; height:80px; overflow:hidden; }
#fps_container .radial > div { width:80px; height:80px; }
#fps_container .radial > div > div { width:40px; height:80px; margin-left:40px; overflow:hidden; }
#fps_container .radial > div > div > div { width:60px; height:60px; margin-left:-40px; border:10px solid #04a8b4; }
#fps_container .radial_1 { left:40px; }
#fps_container .radial_1 > div { margin-left:-40px; }

#toggle_labels { position:absolute; bottom:1em; left:50%; margin-left:-5em; width:10em; }
.button { background:rgba(91,255,255,.25); -webkit-border-radius:2em; -moz-border-radius:2em; border-radius:2em; border:1px solid #04a8b4; text-align:center; }
.button p { display:block; font-size:.8em; margin:0; line-height:1.6em; cursor:pointer; }
.button.button_on { background:rgba(91,255,255,.5); border-color:#91ffff; color:#092341; }
.button p.text_on, .button.button_on p.text_off { display:none; }
.button.button_on p.text_on { display:block; }
.theme_selector { position:absolute; top:1.5em; right:1.5em; }
.theme_selector div { width:3em; height:3em; padding:1px; border:2px solid #297583; display:inline-block; }
.theme_selector div:first-child { margin-right:.1em; border-radius:50% 0 0 50%; }
.theme_selector div:last-child { border-radius:0 50% 50% 0;  }
.theme_selector div a { display:block; border:none; width:2.3em; line-height:2.3em; text-align:center; text-decoration:none; color:#297583; font-weight:bold; font-size:1.3em; background:rgba(91,255,255,0); }
.theme_selector div.selected { border:2px solid rgba(91,255,255,.5); background:rgba(91,255,255,.5); }
.theme_selector div.selected a { color:rgba(91,255,255,.75); }

.orbit_1 { animation: orbit 17.47s linear infinite; -webkit-animation: orbit 17.47s linear infinite; }
.orbit_2 { animation: orbit 24.16s linear infinite; -webkit-animation: orbit 24.16s linear infinite; }
.orbit_3 { animation: orbit 29.39s linear infinite; -webkit-animation: orbit 29.39s linear infinite; }
.orbit_4 { animation: orbit 50.7s linear infinite; -webkit-animation: orbit 50.7s linear infinite; }
.orbit_5 { animation: orbit 126.32s linear infinite; -webkit-animation: orbit 126.32s linear infinite; }
.orbit_1 > div { animation: reverse_orbit 17.47s linear infinite; -webkit-animation: reverse_orbit 17.47s linear infinite; }
.orbit_2 > div { animation: reverse_orbit 24.16s linear infinite; -webkit-animation: reverse_orbit 24.16s linear infinite; }
.orbit_3 > div { animation: reverse_orbit 29.39s linear infinite; -webkit-animation: reverse_orbit 29.39s linear infinite; }
.orbit_4 > div { animation: reverse_orbit 50.7s linear infinite; -webkit-animation: reverse_orbit 50.7s linear infinite; }
.orbit_5 > div { animation: reverse_orbit 126.32s linear infinite; -webkit-animation: reverse_orbit 126.32s linear infinite; }
.sun_glow_bg { animation: orbit 107.46s linear infinite; -webkit-animation: orbit 107.46s linear infinite; }
@keyframes orbit { 100% {transform:rotate(360deg); -ms-transform:rotate(360deg); } }
@keyframes reverse_orbit { 100% {transform:rotate(-360deg); -ms-transform:rotate(-360deg); } }
@-webkit-keyframes orbit { 100% {-webkit-transform:rotate(360deg); } }
@-webkit-keyframes reverse_orbit { 100% {-webkit-transform:rotate(-360deg); } }
.show_labels { opacity:1; }

#sun_glow_mid { animation: sunglow 12.3s linear infinite; -webkit-animation: sunglow 12.3s linear infinite; }
#sun_glow_top { animation: sunglow 16s linear 5s infinite; -webkit-animation: sunglow 16s linear 5s infinite; }
@keyframes sunglow { 
    5% { transform:scale(.7); opacity:1; } 
    11% { transform:scale(1.1); opacity:1; } 
    19% { transform:scale(1.3); opacity:.5; } 
    21% { transform:scale(1.7); opacity:.5; } 
    23% { transform:scale(1.5); opacity:.5; } 
    24% { transform:scale(1.4); opacity:.6; } 
    25% { transform:scale(1.5); opacity:.6; } 
    28% { transform:scale(1.4); opacity:.6; } 
    30% { transform:scale(1.5); opacity:.6; } 
    37% { transform:scale(1.1); opacity:.5; }
    42% { transform:scale(.7); opacity:.75; } 
    50% { transform:scale(.5); opacity:.5; } 
    54% { transform:scale(.6); opacity:.6; } 
    58% { transform:scale(.5); opacity:.5; } 
    62% { transform:scale(.6); opacity:.6; } 
    66% { transform:scale(.5); opacity:.4; } 
    68% { transform:scale(.6); opacity:.3; } 
    72% { transform:scale(.9); opacity:.8; } 
    84% { transform:scale(1); opacity:1; } 
    87% { transform:scale(1.2); opacity:1; } 
    90% { transform:scale(1); opacity:1; } 
    94% { transform:scale(1); opacity:1; } 
    97% { transform:scale(1.1); opacity:1; } 
    100% { transform:scale(1); opacity:1; } 
}
@-webkit-keyframes sunglow { 
    5% { -webkit-transform:scale(.7); opacity:1; } 
    11% { -webkit-transform:scale(1.1); opacity:1; } 
    19% { -webkit-transform:scale(1.3); opacity:.5; } 
    21% { -webkit-transform:scale(1.7); opacity:.5; } 
    23% { -webkit-transform:scale(1.5); opacity:.5; } 
    24% { -webkit-transform:scale(1.4); opacity:.6; } 
    25% { -webkit-transform:scale(1.5); opacity:.6; } 
    28% { -webkit-transform:scale(1.4); opacity:.6; } 
    30% { -webkit-transform:scale(1.5); opacity:.6; } 
    37% { -webkit-transform:scale(1.1); opacity:.5; }
    42% { -webkit-transform:scale(.7); opacity:.75; } 
    50% { -webkit-transform:scale(.5); opacity:.5; } 
    54% { -webkit-transform:scale(.55); opacity:.6; } 
    58% { -webkit-transform:scale(.5); opacity:.5; } 
    62% { -webkit-transform:scale(.55); opacity:.6; } 
    66% { -webkit-transform:scale(.5); opacity:.4; } 
    68% { -webkit-transform:scale(.6); opacity:.3; } 
    72% { -webkit-transform:scale(.9); opacity:.8; } 
    84% { -webkit-transform:scale(1); opacity:1; } 
    87% { -webkit-transform:scale(1.2); opacity:1; } 
    90% { -webkit-transform:scale(1); opacity:1; } 
    94% { -webkit-transform:scale(1); opacity:1; } 
    97% { -webkit-transform:scale(1.1); opacity:1; } 
    100% { -webkit-transform:scale(1); opacity:1; } 
}