Widget:Planets

 Serenade Arctis Resurgence Mars Desta Fatalis Pilo 2D 3D Serenade</dt> <dd> </dd> </dl> <dt>Arctis</a></dt> <dd> </dd> </dl> <dt>Resurgence</a></dt> <dd> </dd> </dl> <dt>Mars</a></dt> <dd> </dd> </dl> <dt>Desta Fatalis</a></dt> <dd> </dd> </dl> <dt>Pilo</a></dt> <dd> </dd> </dl> position: relative; width: 100%; font-family: 'helioscondbold',Arial,"Helvetica CY",Helvetica,sans-serif; }
 * 1) game_universe {

position: relative; z-index: 1; overflow: hidden; width: 100%; height: 550px; font-size: 200%; }
 * 1) universe {

position: relative; width: 100%; height: 100%; }
 * 1) galaxy {

position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; }
 * 1) solar-system {

.orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; transform-style: preserve-3d; animation-name: orbit; -moz-animation-name: orbit; -webkit-animation-name: orbit; animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; }

.orbit .orbit { animation-name: suborbit; -moz-animation-name: suborbit; -webkit-animation-name: suborbit; }

.pos { position: absolute; top: 50%; width: 2em; height: 2em; margin-top: -1em; margin-left: -1em; transform-style: preserve-3d; animation-name: invert; -moz-animation-name: invert; -webkit-animation-name: invert; animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; }

.planet, position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; margin-top: -.5em; margin-left: -.5em; border-radius: 50%; transform-style: preserve-3d; }
 * sun,
 * 1) resurgence .moon {

background-color: #FB7209; background-repeat: no-repeat; background-size: cover; box-shadow: 0 0 60px rgba(255, 160, 60, 0.4); }
 * 1) sun {

.planet { background-color: #202020; background-repeat: no-repeat; background-size: cover; animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; }

z-index: 1; }
 * 1) sun {

z-index: 2; }
 * 1) serenade {

z-index: 3; }
 * 1) artics {

z-index: 4; }
 * 1) resurgence {

z-index: 5; }
 * 1) moon {

z-index: 6; }
 * 1) mars {

z-index: 7; }
 * 1) desta {

z-index: 8; }
 * 1) pilo {

@-webkit-keyframes orbit { 0% {		transform: rotateZ(0deg); }

100% {		transform: rotateZ(-360deg); } }

@keyframes orbit { 0% {		transform: rotateZ(0deg); }

100% {		transform: rotateZ(-360deg); } }

@-webkit-keyframes suborbit { 0% {		transform: rotateX(90deg) rotateZ(0deg); }

100% {		transform: rotateX(90deg) rotateZ(-360deg); } }

@keyframes suborbit { 0% {		transform: rotateX(90deg) rotateZ(0deg); }

100% {		transform: rotateX(90deg) rotateZ(-360deg); } }

@-webkit-keyframes invert { 0% {		transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }

100% {		transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }

@keyframes invert { 0% {		transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }

100% {		transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }

.view-3D .opening #sun, .view-3D .opening .orbit, .view-3D .opening .pos, .view-3D .opening .planet, .view-3D .opening .satelite, .view-3D .opening .ring { transition-duration: 4s; }

box-shadow: 0 0 0 rgba(255, 160, 60, 0); }
 * 1) universe.opening #sun {

.view-2D.zoom-large #sun { transform-style: flat; }

.view-2D.zoom-large .orbit { transform-style: flat; }

.view-2D #sun, .view-2D .ring { transform: rotateX(0deg); }

.view-2D .planet, .view-2D .moon { transform: rotateX(90deg); }

.view-3D.zoom-large #sun { transform-style: preserve-3d; }

.view-3D.zoom-large .orbit { transform-style: preserve-3d; }

.view-3D #solar-system { transform: rotateX(75deg); }

.view-3D #sun { transform: rotateX(-90deg); }

.view-3D .ring { transform: rotateX(90deg); }

.view-3D .planet, .view-3D .moon { transform: rotateX(0deg); }

.zoom-large #solar-system { width: 100%; }

.zoom-large.view-2D #universe.scale-stretched { font-size: 130%; }

.zoom-large.view-2D .scale-stretched #solar-system { font-size: 26%; }

.zoom-large.view-3D .scale-stretched #solar-system { font-size: 20%; }

.zoom-large.view-2D .scale-d #solar-system { font-size: 22%; }

.zoom-large.view-3D .scale-d #solar-system { font-size: 48%; }

.zoom-large.view-2D .scale-s #solar-system { font-size: 7%; }

.zoom-large.view-3D .scale-s #solar-system { font-size: 14%; }

animation-duration: 6.89016s; -moz-animation-duration: 6.89016s; -webkit-animation-duration: 6.89016s; }
 * 1) serenade .pos,
 * 2) serenade .planet,
 * 3) serenade.orbit {

animation-duration: 7.38237s; -moz-animation-duration: 7.38237s; -webkit-animation-duration: 7.38237s; }
 * 1) artics .pos,
 * 2) artics .planet,
 * 3) artics.orbit {

animation-duration: 12.00021s; -moz-animation-duration: 12.00021s; -webkit-animation-duration: 12.00021s; }
 * 1) resurgence .pos,
 * 2) resurgence .planet,
 * 3) resurgence.orbit {

animation-duration: .89764s; -moz-animation-duration: .89764s; -webkit-animation-duration: .89764s; }
 * 1) resurgence .orbit .pos,
 * 2) resurgence .orbit {

animation-duration: 22.57017s; -moz-animation-duration: 22.57017s; -webkit-animation-duration: 22.57017s; }
 * 1) mars .pos,
 * 2) mars .planet,
 * 3) mars.orbit {

animation-duration: 42.35138s; -moz-animation-duration: 42.35138s; -webkit-animation-duration: 42.35138s; }
 * 1) desta .pos,
 * 2) desta .planet,
 * 3) desta.orbit {

animation-duration: 68.20215s; -moz-animation-duration: 68.20215s; -webkit-animation-duration: 68.20215s; }
 * 1) pilo .pos,
 * 2) pilo .planet,
 * 3) pilo.orbit {

.scale-stretched #sun { font-size: .2em; }

.scale-stretched #serenade .planet { font-size: 8.5em; }

.scale-stretched #artics .planet { font-size: 11.72em; }

.scale-stretched #resurgence .planet { font-size: 10.92em; }

.scale-stretched #resurgence .moon { font-size: 4.2em; }

.scale-stretched #mars .planet { font-size: 10.9em; }

.scale-stretched #desta .planet { font-size: 13em; }

.scale-stretched #pilo .planet { font-size: 10.68em; }

.scale-stretched #serenade.orbit { width: 22em; height: 22em; margin-top: -11em; margin-left: -11em; }

.scale-stretched #artics.orbit { width: 40em; height: 40em; margin-top: -20em; margin-left: -20em; }

.scale-stretched #resurgence.orbit { width: 56em; height: 56em; margin-top: -28em; margin-left: -28em; }

.scale-stretched #resurgence .orbit { width: 6em; height: 6em; margin-top: -3em; margin-left: -3em; }

.scale-stretched #mars.orbit { width: 70em; height: 70em; margin-top: -35em; margin-left: -35em; }

.scale-stretched #desta.orbit { width: 80em; height: 80em; margin-top: -40em; margin-left: -40em; }

.scale-stretched #pilo.orbit { width: 100em; height: 100em; margin-top: -50em; margin-left: -50em; }

.set-speed #sun dl.infos dd:after { content: 'You are here'; }

.set-speed #serenade dl.infos dd:after { content: 'Desert/sandstorms'; }

.set-speed #artics dl.infos dd:after { content: 'Icy world/blizzards'; }

.set-speed #resurgence dl.infos dd:after { content: 'Plains'; }

.set-speed #desta dl.infos dd:after { content: '“Dead” world/electromagnetic storms'; }

.set-speed #mars dl.infos dd:after { content: 'The Martian world/tornadoes'; }

.set-speed #pilo dl.infos dd:after { content: 'Volcanic/eruptions'; }

left: 50%; top: -1%; }
 * 1) serenade .pos {

animation-name: shadow-serenade; -moz-animation-name: shadow-serenade; -webkit-animation-name: shadow-serenade; }
 * 1) serenade .planet {

@-webkit-keyframes shadow-serenade { 0% {		box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5); }

25% {		box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5); }

50% {		box-shadow: inset 13px -5px 4px rgba(0, 0, 0, 0.5); }

50.01% {		box-shadow: inset -13px -5px 4px rgba(0, 0, 0, 0.5); }

75% {		box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5); }

100% {		box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5); } }

@keyframes shadow-serenade { 0% {		box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5); }

25% {		box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5); }

50% {		box-shadow: inset 13px -5px 4px rgba(0, 0, 0, 0.5); }

50.01% {		box-shadow: inset -13px -5px 4px rgba(0, 0, 0, 0.5); }

75% {		box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5); }

100% {		box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5); } }

.scaled.view-2D #serenade .planet, .scaled.view-3D #serenade .planet { box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5); }

left: 0; top: 50%; }
 * 1) artics .pos {

animation-name: shadow-artics; -moz-animation-name: shadow-artics; -webkit-animation-name: shadow-artics; }
 * 1) artics .planet {

@-webkit-keyframes shadow-artics { 0% {		box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5); }

25% {		box-shadow: inset 22px -20px 10px rgba(0, 0, 0, 0.5); }

25.5% {		box-shadow: inset -22px -20px 10px rgba(0, 0, 0, 0.5); }

50% {		box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5); }

75% {		box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5); }

100% {		box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5); } }

@keyframes shadow-artics { 0% {		box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5); }

25% {		box-shadow: inset 22px -20px 10px rgba(0, 0, 0, 0.5); }

25.5% {		box-shadow: inset -22px -20px 10px rgba(0, 0, 0, 0.5); }

50% {		box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5); }

75% {		box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5); }

100% {		box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5); } }

.scaled.view-2D #artics .planet, .scaled.view-3D #artics .planet { box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5); }

left: 100%; top: 50%; }
 * 1) resurgence .pos {

animation-name: shadow-resurgence; -moz-animation-name: shadow-resurgence; -webkit-animation-name: shadow-resurgence; }
 * 1) resurgence .planet {

@-webkit-keyframes shadow-resurgence { 0% {		box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5); }

25% {		box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5); }

50% {		box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5); }

75% {		box-shadow: inset 24px -20px 15px rgba(0, 0, 0, 0.5); }

75.01% {		box-shadow: inset -24px -20px 15px rgba(0, 0, 0, 0.5); }

100% {		box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5); } }

@keyframes shadow-resurgence { 0% {		box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5); }

25% {		box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5); }

50% {		box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5); }

75% {		box-shadow: inset 24px -20px 15px rgba(0, 0, 0, 0.5); }

75.01% {		box-shadow: inset -24px -20px 15px rgba(0, 0, 0, 0.5); }

100% {		box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5); } }

.scaled.view-2D #resurgence .planet, .scaled.view-3D #resurgence .planet { box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5); }

left: 100%; top: 50%; }
 * 1) resurgence .orbit .pos {

left: 50%; top: 100%; }
 * 1) mars .pos {

animation-name: shadow-mars; -moz-animation-name: shadow-mars; -webkit-animation-name: shadow-mars; }
 * 1) mars .planet {

@-webkit-keyframes shadow-mars { 0% {		box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5); }

25% {		box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5); }

50% {		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); }

75% {		box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5); }

99.99% {		box-shadow: inset 18px -10px 10px rgba(0, 0, 0, 0.5); }

100% {		box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5); } }

@keyframes shadow-mars { 0% {		box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5); }

25% {		box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5); }

50% {		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); }

75% {		box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5); }

99.99% {		box-shadow: inset 18px -10px 10px rgba(0, 0, 0, 0.5); }

100% {		box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5); } }

.scaled.view-2D #mars .planet, .scaled.view-3D #mars .planet { box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5); }

left: 100%; top: 50%; }
 * 1) desta .pos {

animation-name: shadow-desta; -moz-animation-name: shadow-desta; -webkit-animation-name: shadow-desta; }
 * 1) desta .planet {

@-webkit-keyframes shadow-desta { 0% {		box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5); }

25% {		box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.5); }

50% {		box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5); }

75% {		box-shadow: inset 94px -30px 40px rgba(0, 0, 0, 0.5); }

75.01% {		box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5); }

100% {		box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5); } }

@keyframes shadow-desta { 0% {		box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5); }

25% {		box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.5); }

50% {		box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5); }

75% {		box-shadow: inset 94px -30px 40px rgba(0, 0, 0, 0.5); }

75.01% {		box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5); }

100% {		box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5); } }

.scaled.view-2D #desta .planet, .scaled.view-3D #desta .planet { box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5); }

left: 0; top: 50%; }
 * 1) pilo .pos {

animation-name: shadow-pilo; -moz-animation-name: shadow-pilo; -webkit-animation-name: shadow-pilo; }
 * 1) pilo .planet {

@-webkit-keyframes shadow-pilo { 0% {		box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5); }

25% {		box-shadow: inset 40px -15px 40px rgba(0, 0, 0, 0.5); }

25.01% {		box-shadow: inset -40px -15px 40px rgba(0, 0, 0, 0.5); }

50% {		box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5); }

75% {		box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); }

100% {		box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5); } }

@keyframes shadow-pilo { 0% {		box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5); }

25% {		box-shadow: inset 40px -15px 40px rgba(0, 0, 0, 0.5); }

25.01% {		box-shadow: inset -40px -15px 40px rgba(0, 0, 0, 0.5); }

50% {		box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5); }

75% {		box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); }

100% {		box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5); } }

.scaled.view-2D #pilo .planet, .scaled.view-3D #pilo .planet { box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5); }

dl.infos { position: absolute; display: block; opacity: 0; width: 200px; height: 100%; margin-top: -90%; margin-left: 90%; padding-left: 100%; transform-origin: 100% 100%; transform-style: preserve-3d; transform: rotateX(90deg); }

dl.infos:before { position: absolute; content: ''; width: 15px; height: 30px; left: 15px; bottom: 0; border-top: 1px solid #fff; border-left: 1px solid #fff; transform-style: preserve-3d; transform: skew(-45deg, 0deg); box-shadow: inset 1px 1px #000; }

dl.infos dt { position: absolute; left: 50px; margin-bottom: 15px; bottom: 30px; color: #ffc000; font-size: 22px; line-height: 22px; text-shadow: 1px 1px 2px #000; z-index: 999999; }

dl.infos dd:after { position: absolute; left: 50px; bottom: 30px; width: 300px; color: #FFF; font-size: 14px; text-shadow: 1px 1px 2px #000; }

bottom: -16px; }
 * 1) desta dl.infos dd:after {

bottom: 2px; }
 * 1) serenade dl.infos dd:after {

dl.infos dd span:after { position: absolute; left: 50px; bottom: 14px; width: 300px; color: #FFF; font-size: 11px; text-shadow: 1px 1px 2px #000; }

.sun #sun .infos, .serenade #serenade .infos, .artics #artics .infos, .resurgence #resurgence .infos, .mars #mars .infos, .desta #desta .infos, .pilo #pilo .infos { display: block; opacity: 1; transform: rotateX(0deg); }

.serenade #serenade.orbit, .artics #artics.orbit, .resurgence #resurgence.orbit, .mars #mars.orbit, .desta #desta.orbit, .pilo #pilo.orbit { border: 1px solid rgba(255, 255, 255, 0.8); }

.hide-UI h1, .hide-UI #data, .hide-UI dl.infos, .hide-UI #view { opacity: 0 !important; margin-top: -30px; }

.hide-UI #data { margin-bottom: -30px; }

.hide-UI .orbit { border: 1px solid rgba(255, 255, 255, 0.2) !important; }

left: 0; }
 * 1) toggle-data {

z-index: 99; background: rgba(0, 0, 0, 0.4); opacity: 1; top: 49px; padding: 16px; }
 * 1) data {

.data-close #data { left: -100%; }

.data-open #data { left: 0; }

margin-bottom: 1px; padding: 6px 9px; font-size: 16px; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; }
 * 1) data a {

color: #ffc000; }
 * 1) data a.active {

float: right; cursor: pointer; color: #ababac; }
 * 1) view {

margin: 1px 4px 0; float: left; }
 * 1) view span {

color: #FFF; }
 * 1) view span.active {

.switch { position: relative; display: inline-block; font-size: 1.6em; font-weight: 700; color: #ccc; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8); height: 18px; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); background: #ababac; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1),inset 0 1px 3px 0 rgba(0, 0, 0, 0.1); cursor: pointer; padding: 0 20px; border-radius: 40px; }

.switch span { display: inline-block; width: 35px; }

.switch span.on { color: #33d2da; }

.switch .toggle { position: absolute; top: 1px; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.3); background: #fff; z-index: 999; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; -ms-transition: all .15s ease-in-out; border-radius: 40px; width: 14px; height: 14px; }

.switch.on .toggle { left: 3%; }

.switch.off .toggle { left: 58%; }

.pos { transition-property: top,left; }

.orbit, .planet, .satelite, .ring { transition-property: width,height,top,left,margin-left,margin-top,webkit-transform; }
 * 1) solar-system,

.icon { transition-property: width,height,webkit-transform; }
 * sun,

.orbit, .pos, .planet, .satelite, .ring, .infos, .icon { transition-duration: .8s; transition-timing-function: ease-in-out; }
 * 1) solar-system,
 * sun,

.planet, .satelite, .ring { transition-delay: 0; }
 * 1) solar-system,
 * sun,

.pos { transition-delay: 1s; }

.opening #solar-system, .opening #sun, .opening .orbit, .opening .pos, .opening .planet, .opening .satelite, .opening .ring, .opening .infos, .opening #data, .opening dl.infos, .opening #view { transition-duration: 0; transition-delay: 0; }

.opening .pos { transition-delay: 0; }

transition-property: opacity,margin; transition-duration: .8s; transition-timing-function: ease-in-out; }
 * 1) data,
 * 2) view {

transition-delay: .7s; }
 * 1) data {

transition-delay: 1s; }
 * 1) view {

background: transparent url(http://etherium-thegame.com/img/game/background/background_planets.jpg) top left no-repeat; background-size: cover; }
 * 1) game_universe {

background: rgba(0, 0, 0, 0.4); }
 * 1) universe {

background-image: url(http://etherium-thegame.com/img/game/background/planet_serenade.jpg); }
 * 1) serenade .planet {

background-image: url(http://etherium-thegame.com/img/game/background/planet_artics.jpg); }
 * 1) artics .planet {

background-image: url(http://etherium-thegame.com/img/game/background/planet_resurgence.jpg); }
 * 1) resurgence .planet {

background-color: #fff; }
 * 1) resurgence .moon {

background-image: url(http://etherium-thegame.com/img/game/background/planet_mars.jpg); }
 * 1) mars .planet {

background-image: url(http://etherium-thegame.com/img/game/background/planet_desta.jpg); }
 * 1) desta .planet {

background-image: url(http://etherium-thegame.com/img/game/background/planet_pilo.jpg); }
 * 1) pilo .planet {

@media only screen and (min-width: 769px) and (max-width: 1024px) { #data a { padding: 3px 5px; font-size: 14px; } }

@media only screen and (max-width: 650px) { #universe { font-size: 110%; }	#data { width: 100%; padding-bottom: 40px; }	#data a { line-height: 30px; }	#view { width: 100%; height: 60px; margin-top: 8px; } } <script type="text/javascript"> if( window.innerWidth < 620 ) { $( '#game_universe' ) .removeClass( 'view-3D' ) .addClass( 'view-2D' ); $( '#view .switch' ) .toggleClass( 'on' ) .toggleClass( 'off' ); } $( '#view .switch' ).click( function { 	$( '#game_universe' )		.toggleClass( 'view-3D view-2D' );	$( this )		.toggleClass( 'on' )		.toggleClass( 'off' ); }); $( '#data a' ).click( function( e ) {	$( '#solar-system' )		.removeClass		.addClass( $( this ).attr( 'class' ) );	$( this )		.parent			.find( 'a' )				.removeClass( 'active' );	$( this ).addClass( 'active' );	e.preventDefault; });