Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  
<head>
<meta name="description" content="WK 3D Solar System For Webkit" />
  
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable = no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title dir="ltr">WK 3D CSS Solar System</title>
  
<style>
​
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
  
  @font-face 
    {
    font-family: 'Vladimir';
    src: url("https://dl.dropboxusercontent.com/u/236154657/vladimir-webfont.eot");
    src: url("https://dl.dropboxusercontent.com/u/236154657/vladimir-webfont.eot?#iefix") format('embedded-opentype'),url("https://dl.dropboxusercontent.com/u/236154657/vladimir-webfont.woff") format('woff'),url("https://dl.dropboxusercontent.com/u/236154657/vladimir-webfont.ttf") format('truetype');
    };
​
  
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0; }
  
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }
​
body {
  line-height: 1; }
​
ol, ul {
  list-style: none; }
​
blockquote, q {
  quotes: none; }
​
blockquote:before, blockquote:after, q:before, q:after {
  content: none; }
​
table {
  
  -moz-border-collapse: collapse;
  -webkit-border-collapse: collapse;
  -o-border-collapse: collapse;
  -ms-border-collapse: collapse;
  border-collapse: collapse;
  -moz-border-spacing: 0; 
  -webkit-border-spacing: 0; 
  -o-border-spacing: 0; 
  -ms-border-spacing: 0; 
  border-spacing: 0; }
  
  * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box; 
  -ms-box-sizing: border-box; 
  box-sizing: border-box; }
  
  body {
  font-size: 10px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  width: 1611px;
  height: 601px;
  background-color: transparent; 
  }
  
  #universe  {
  z-index: 1;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-position: center 40%;
  background-repeat: no-repeat;
  background-size: cover; }
  
​
  
  
  #descriptionls {
    
    display:block;
    opacity:1;
    z-index: 98;
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    width:1610px;
    height:540px;
    margin-top:60px;
    margin-left:0px;
    
  }
  
    #descriptionls span {
    
    color:#FFF;
    
  }
  
    #lstextslide {
      
      position:absolute;
      display: table-cell;
      font-size:35px;
      text-align:center;
      line-height:40px;
      vertical-align: middle;
      width:400px;
      height:300px;
      margin-left:450px;
      margin-top:100px;
    
    
  }
  
      #join {
    
      z-index: 99;
      position:absolute;
      color:#0CF;
      margin-left:600px;
      margin-top:300px;
      font-size:17px;
      font-weight:300;
        
    
  }
  
    #lsinsert {
    
    padding:20px;
    position:absolute;
    width:1000px;
    height:400px;
    margin-top:33px;
    margin-left:300px;
    background: #fff url('http://secure.cart32.com/WarrenKahn/Insert-LifeSkills2.png');
    background-repeat:no-repeat;
    background-position:center center;
    opacity:0.8;
        filter:Alpha(opacity=80); /* IE8 and earlier */
    overflow:hidden;
    -webkit-border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    
  }
  
  
    #descriptioncr {
    
    display:block;
    opacity:1;
    z-index: 98;
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    width:1610px;
    height:540px;
    margin-top:60px;
    margin-left:0px;
    
  }
  
      #descriptioncr span {
    
    color:#FFF;
    
  }
  
      #crtextslide {
      
      position:absolute;
      display: table-cell;
      font-size:35px;
      text-align:center;
      line-height:40px;
      vertical-align: middle;
      width:400px;
      height:300px;
      margin-left:450px;
      margin-top:100px;
    
    
  }
  
      #crinsert {
    
    padding:20px;
    position:absolute;
    width:1000px;
    height:400px;
    margin-top:33px;
    margin-left:300px;
    background: #fff url('http://secure.cart32.com/WarrenKahn/Insert-Career.png');
    background-repeat:no-repeat;
    background-position:center center;
    opacity:0.8;
        filter:Alpha(opacity=80); /* IE8 and earlier */
    overflow:hidden;
    -webkit-border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    
  }
  
    #descriptionpr {
    
    display:block;
    opacity:1;
    z-index: 98;
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    width:1610px;
    height:540px;
    margin-top:60px;
    margin-left:0px;
    
  }
  
      #descriptionpr span {
    
    color:#FFF;
    
  }
  
      #prtextslide {
      
      position:absolute;
      display: table-cell;
      font-size:35px;
      text-align:center;
      line-height:40px;
      vertical-align: middle;
      width:400px;
      height:300px;
      margin-left:450px;
      margin-top:100px;
    
    
  }
  
      #prinsert {
    
    padding:20px;
    position:absolute;
    width:1000px;
    height:400px;
    margin-top:33px;
    margin-left:300px;
    background: #fff url('http://secure.cart32.com/WarrenKahn/Insert-Parenting.png');
    background-repeat:no-repeat;
    background-position:center center;
    opacity:0.8;
        filter:Alpha(opacity=80); /* IE8 and earlier */
    overflow:hidden;
    -webkit-border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    
  }
  
      #descriptionst {
    
    display:block;
    opacity:1;
    z-index: 98;
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    width:1610px;
    height:540px;
    margin-top:60px;
    margin-left:0px;
    
  }
  
      #descriptionst span {
    
    color:#FFF;
    
  }
  
      #sttextslide {
      
      position:absolute;
      display: table-cell;
      font-size:35px;
      text-align:center;
      line-height:40px;
      vertical-align: middle;
      width:400px;
      height:300px;
      margin-left:450px;
      margin-top:100px;
    
    
  }
  
      #stinsert {
    
    padding:20px;
    position:absolute;
    width:1000px;
    height:400px;
    margin-top:33px;
    margin-left:300px;
    background: #fff url('http://secure.cart32.com/WarrenKahn/Insert-Stress.png');
    background-repeat:no-repeat;
    background-position:center center;
    opacity:0.8;
        filter:Alpha(opacity=80); /* IE8 and earlier */
    overflow:hidden;
    -webkit-border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    
  }
  
      #descriptionsp {
    
    display:block;
    opacity:1;
    z-index: 98;
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    width:1610px;
    height:540px;
    margin-top:60px;
    margin-left:0px;
    
  }
  
      #descriptionsp span {
    
    color:#FFF;
    
  }
  
      #sptextslide {
      
      position:absolute;
      display: table-cell;
      font-size:35px;
      text-align:center;
      line-height:40px;
      vertical-align: middle;
      width:400px;
      height:300px;
      margin-left:450px;
      margin-top:100px;
    
    
  }
  
      #spinsert {
    
    padding:20px;
    position:absolute;
    width:1000px;
    height:400px;
    margin-top:33px;
    margin-left:300px;
    background: #fff url('http://secure.cart32.com/WarrenKahn/Insert-Spirituality.png');
    background-repeat:no-repeat;
    background-position:center center;
    opacity:0.8;
        filter:Alpha(opacity=80); /* IE8 and earlier */
    overflow:hidden;
    -webkit-border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    
  }
  
  
  #ca-close1 {
    position: absolute;
    top: 10px;
    right: 10px;
    background: url('http://secure.cart32.com/WarrenKahn/cross.png') no-repeat scroll center center transparent;
    width: 27px;
    height: 27px;
    
    outline: medium none;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    opacity: 0.7;
}
  
    #ca-close2 {
    position: absolute;
    top: 10px;
    right: 10px;
    background: url('http://secure.cart32.com/WarrenKahn/cross.png') no-repeat scroll center center transparent;
    width: 27px;
    height: 27px;
    
    outline: medium none;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    opacity: 0.7;
}
  
    #ca-close3 {
    position: absolute;
    top: 10px;
    right: 10px;
    background: url('http://secure.cart32.com/WarrenKahn/cross.png') no-repeat scroll center center transparent;
    width: 27px;
    height: 27px;
    
    outline: medium none;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    opacity: 0.7;
}
  
    #ca-close4 {
    position: absolute;
    top: 10px;
    right: 10px;
    background: url('http://secure.cart32.com/WarrenKahn/cross.png') no-repeat scroll center center transparent;
    width: 27px;
    height: 27px;
    
    outline: medium none;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    opacity: 0.7;
}
  
    #ca-close5 {
    position: absolute;
    top: 10px;
    right: 10px;
    background: url('http://secure.cart32.com/WarrenKahn/cross.png') no-repeat scroll center center transparent;
    width: 27px;
    height: 27px;
    
    outline: medium none;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    opacity: 0.7;
}
  
  a {
    color: #000;
    text-decoration: none;
}
​
  #galaxy {
  position: fixed;
  width: 100%;
  height: 100%;
  perspective: 4000;
  -webkit-perspective; 4000; }
  
  #solar-system {
  position: absolute;
  width: 100%;
  height: 100%;
  -moz-transform-style: preserve-3d; 
  -webkit-transform-style: preserve-3d; 
  -o-transform-style: preserve-3d; 
  transform-style: preserve-3d;  }
  
  .orbit {
  position: absolute;
  top: 37%;
  left: 48%;
  border: 0px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  -moz-transform-style: preserve-3d; 
  -webkit-transform-style: preserve-3d; 
  -o-transform-style: preserve-3d; 
  transform-style: preserve-3d;
  -moz-animation-name: orbit;
  -webkit-animation-name: orbit;
  -o-animation-name: orbit;
  -ms-animation-name: orbit;
  animation-name: orbit;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -moz-animation-timing-function: linear; 
  -webkit-animation-timing-function: linear; 
  -o-animation-timing-function: linear; 
  -ms-animation-timing-function: linear; 
  animation-timing-function: linear; }
  
​
    .orbit .orbit {
  -moz-animation-name: suborbit; 
  -webkit-animation-name: suborbit; 
  -o-animation-name: suborbit; 
  -ms-animation-name: suborbit; 
  animation-name: suborbit; }
​
  
  .pos {
  position: absolute;
  top: 50%;
  width: 6em;
  height: 6em;
  margin-top: -1em;
  margin-left: -1em;
  -moz-transform-style: preserve-3d; 
  -webkit-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-animation-name: invert;
  -webkit-animation-name: invert;
  -o-animation-name: invert;
  -ms-animation-name: invert;
  animation-name: invert;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -moz-animation-timing-function: linear; 
  -webkit-animation-timing-function: linear; 
  -o-animation-timing-function: linear; 
  -ms-animation-timing-function: linear; 
  animation-timing-function: linear;   }
  
  #sun{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 219px;
  margin-top: -120px;
  margin-left: -120px;
  border-radius: 50%;
  -moz-transform-style: preserve-3d; 
  -webkit-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;  }
  
  .planet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 3em;
  margin-top: -0.5em;
  margin-left: -0.5em;
  border-radius: 50%;
   -moz-transform-style: preserve-3d; 
  -webkit-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;  }
  
​
  #earth .moon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 3em;
  margin-top: -0.5em;
  margin-left: -0.5em;
  border-radius: 50%;
  -moz-transform-style: preserve-3d; 
  -webkit-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;  }
  
  #sun {
  background-color: rgba(153, 211, 237, 0.4);
  background-image:url('https://dl.dropboxusercontent.com/u/236154657/Popup_Circle_New3.png');
  background-repeat: no-repeat;
  background-position:center; 
  background-size: cover;
  -moz-box-shadow: 0px 0px 40px 60px rgba(153, 211, 237, 0.4);  
  -webkit-box-shadow: 0px 0px 40px 60px rgba(153, 211, 237, 0.4);  
  -o-box-shadow: 0px 0px 40px 60px rgba(153, 211, 237, 0.4);  
  -ms-box-shadow: 0px 0px 40px 60px rgba(153, 211, 237, 0.4);  
  box-shadow: 0px 0px 40px 60px rgba(153, 211, 237, 0.4);  }
  
  .planet {
  background-color: #202020;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  animation-timing-function: linear;  }
  
  .ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%; }
  
  #saturn .ring {
  width: 2em;
  height: 2em;
  margin-top: -1em;
  margin-left: -1em;
  border: 0.3em solid rgba(160, 147, 130, 0.7);
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -moz-animation-timing-function: linear; 
  -webkit-animation-timing-function: linear; 
  -o-animation-timing-function: linear; 
  -ms-animation-timing-function: linear; 
  animation-timing-function: linear;  }
  
  #saturn .ring:after {
  border-radius: 50%;
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 2.2em;
  height: 2.2em;
  margin-top: -1.1em;
  margin-left: -1.1em;
  border: 0.07em solid rgba(160, 147, 130, 0.5);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box; 
  -o-box-sizing: border-box; 
  -ms-box-sizing: border-box; 
  box-sizing: border-box; }
  
  
  /* --------------------------------------------------------------------------- planets index */
#mercury {
  z-index: 10; }
​
#venus {
  z-index: 9; }
​
#earth {
  z-index: 8; }
​
#moon {
  z-index: 7; }
​
#mars {
  z-index: 6; }
​
#jupiter {
  z-index: 5; }
​
#saturn {
  z-index: 4; }
​
#uranus {
  z-index: 3; }
​
#neptune {
  z-index: 2; }
​
#sun {
  z-index: 1; }
  
  /* --------------------------------------------------------------------------- animations */
  
@-webkit-keyframes orbit {
  0% {
    -webkit-transform: rotateZ(0deg); }
 
  100% {
    -webkit-transform: rotateZ(-360deg); } }
  
@-moz-keyframes orbit {
  0% {
    -moz-transform: rotateZ(0deg); }
 
  100% {
    -moz-transform: rotateZ(-360deg); } }
  
@keyframes orbit {
  0% {
    transform: rotateZ(0deg); }
 
  100% {
    transform: rotateZ(-360deg); } }
  
  
  
@-webkit-keyframes suborbit {
  0% {
    -webkit-transform: rotateX(90deg) rotateZ(0deg); }
​
  100% {
    -webkit-transform: rotateX(90deg) rotateZ(-360deg); } }
​
@-moz-keyframes suborbit {
  0% {
    -moz-transform: rotateX(90deg) rotateZ(0deg); }
​
  100% {
    -moz-transform: rotateX(90deg) rotateZ(-360deg); } }
  
@keyframes suborbit {
  0% {
    transform: rotateX(90deg) rotateZ(0deg); }
​
  100% {
    transform: rotateX(90deg) rotateZ(-360deg); } }
  
  
  
@-webkit-keyframes invert {
  0% {
    -webkit-transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
​
  100% {
    -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }
  
@-moz-keyframes invert {
  0% {
    -moz-transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
​
  100% {
    -moz-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); } }
  
  /* --------------------------------------------------------------------------- opening */
.view-3D .opening #sun,
.view-3D .opening .orbit,
.view-3D .opening .pos,
.view-3D .opening .planet,
.view-3D .opening .satelite,
.view-3D .opening .ring {
  -moz-transition-duration: 4s; 
  -webkit-transition-duration: 4s; 
  -o-transition-duration: 4s; 
  -ms-transition-duration: 4s; 
  transition-duration: 4s; }
​
#universe.opening #sun {
  -moz-box-shadow: 0 0 0 rgba(255, 160, 60, 0); 
  -webkit-box-shadow: 0 0 0 rgba(255, 160, 60, 0); 
  -o-box-shadow: 0 0 0 rgba(255, 160, 60, 0); 
  -ms-box-shadow: 0 0 0 rgba(255, 160, 60, 0); 
  box-shadow: 0 0 0 rgba(255, 160, 60, 0); }
  
  /* --------------------------------------------------------------------------- 2D view */
  
.view-2D.zoom-large #sun {
  -moz-transform-style: flat; 
  -webkit-transform-style: flat; 
  -o-transform-style: flat; 
  -ms-transform-style: flat; 
  transform-style: flat; }
​
.view-2D.zoom-large .orbit {
 -moz-transform-style: flat; 
  -webkit-transform-style: flat; 
  -o-transform-style: flat; 
  -ms-transform-style: flat; 
  transform-style: flat;  }
​
.view-2D #sun,
.view-2D .ring {
  -moz-transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg); 
  -o-transform: rotateX(0deg); 
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg); }
​
.view-2D .planet,
.view-2D .moon {
  -moz-transform: rotateX(90deg); 
  -webkit-transform: rotateX(90deg);
  -o-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
​
}
​
/* --------------------------------------------------------------------------- 3D view */
.view-3D.zoom-large #sun {
  -moz-transform-style: preserve-3d; 
  -webkit-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d; }
​
.view-3D.zoom-large .orbit {
  -moz-transform-style: preserve-3d; 
  -webkit-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d; }
​
.view-3D #solar-system {
  -moz-transform: rotateX(75deg); 
  -webkit-transform: rotateX(75deg); 
  -o-transform: rotateX(75deg); 
  -ms-transform: rotateX(75deg); 
  transform: rotateX(75deg); }
​
.view-3D #sun {
  -moz-transform: rotateX(-90deg); 
  -webkit-transform: rotateX(-90deg); 
  -o-transform: rotateX(-90deg); 
  -ms-transform: rotateX(-90deg); 
  transform: rotateX(-90deg); }
​
.view-3D .ring {
  -moz-transform: rotateX(90deg); 
  -webkit-transform: rotateX(90deg); 
  -o-transform: rotateX(90deg); 
  -ms-transform: rotateX(90deg); 
  transform: rotateX(90deg); }
​
.view-3D .planet,
.view-3D .moon {
  -moz-transform: rotateX(0deg); 
  -webkit-transform: rotateX(0deg); 
  -o-transform: rotateX(0deg); 
  -ms-transform: rotateX(0deg); 
  transform: rotateX(0deg); }
  
  /* --------------------------------------------------------------------------- large zoom */
.zoom-large #solar-system {
  width: 100%; }
​
.zoom-large.view-2D .scale-stretched #solar-system {
  font-size: 26%; }
​
.zoom-large.view-3D .scale-stretched #solar-system {
  font-size: 62%; }
​
.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%; }
  
  /* --------------------------------------------------------------------------- close zoom */
.zoom-close #solar-system {
  width: 200%;
  font-size: 100%; }
​
.zoom-close .scale-stretched #solar-system {
  margin-left: -100%; }
​
.zoom-close .scale-d #solar-system {
  margin-left: -106%; }
​
.zoom-close.view-2D .scale-d #solar-system {
  font-size: 84%; }
​
.zoom-close.view-3D .scale-d #solar-system {
  font-size: 84%; }
​
.zoom-close .scale-s #solar-system {
  margin-left: -145%; }
​
.zoom-close.view-2D .scale-s #solar-system {
  font-size: 40%; }
​
.zoom-close.view-3D .scale-s #solar-system {
  font-size: 40%; }
​
.zoom-close .orbit,
.zoom-close .pos,
.zoom-close .planet,
.zoom-close .satelite,
.zoom-close .ring {
  -moz-animation-play-state: paused!important;
  -webkit-animation-play-state: paused!important;
  -o-animation-play-state: paused!important;
  -ms-animation-play-state: paused!important;
  animation-play-state: paused!important;
  
  -moz-animation-duration: 0s!important;
  -webkit-animation-duration: 0s!important;
  -o-animation-duration: 0s!important;
  -ms-animation-duration: 0s!important;
  animation-duration: 0s!important;
  
  -moz-animation: none!important; 
  -webkit-animation: none!important; 
  -o-animation: none!important; 
  -ms-animation: none!important; 
  animation: none!important; }
​
.zoom-close.view-2D .planet,
.zoom-close.view-2D .moon {
  -moz-transform: rotateX(0deg); 
  -webkit-transform: rotateX(0deg); 
  -o-transform: rotateX(0deg); 
  -ms-transform: rotateX(0deg); 
  transform: rotateX(0deg); }
​
.zoom-close.view-3D .planet {
  -moz-transform: rotateX(-90deg); 
  -webkit-transform: rotateX(-90deg); 
  -o-transform: rotateX(-90deg); 
  -ms-transform: rotateX(-90deg); 
  transform: rotateX(-90deg); }
​
.zoom-close.view-3D .moon {
  -moz-transform: rotateX(90deg); 
  -webkit-transform: rotateX(90deg); 
  -o-transform: rotateX(90deg); 
  -ms-transform: rotateX(90deg); 
  transform: rotateX(90deg); }
​
.zoom-close .pos {
  left: 100%!important;
  top: 50%!important; }
​
/* --------------------------------------------------------------------------- data */
/* --------------------------------------------------------------------------- speed */
/* sideral years */
#mercury .pos,
#mercury .planet,
#mercury.orbit {
  -moz-animation-duration: 50s; 
  -webkit-animation-duration: 50s; 
  -o-animation-duration: 50s; 
  -ms-animation-duration: 50s; 
  animation-duration: 50s; }
​
#venus .pos,
#venus .planet,
#venus.orbit {
  -moz-animation-duration: 48s; 
  -webkit-animation-duration: 48s; 
  -o-animation-duration: 48s; 
  -ms-animation-duration: 48s; 
  animation-duration: 48s; }
​
#earth .pos,
#earth .planet,
#earth.orbit {
  -moz-animation-duration: 12.00021s; 
  -webkit-animation-duration: 12.00021s; 
  -o-animation-duration: 12.00021s; 
  -ms-animation-duration: 12.00021s; 
  animation-duration: 12.00021s; }
​
#earth .orbit .pos,
#earth .orbit {
  -moz-animation-duration: 3.89764s; 
  -webkit-animation-duration: 3.89764s; 
  -o-animation-duration: 3.89764s; 
  -ms-animation-duration: 3.89764s; 
  animation-duration: 3.89764s; }
​
#mars .pos,
#mars .planet,
#mars.orbit {
  -moz-animation-duration: 22.57017s; 
  -webkit-animation-duration: 22.57017s;
  -o-animation-duration: 22.57017s;
  -ms-animation-duration: 22.57017s;
  animation-duration: 22.57017s; }
​
#jupiter .pos,
#jupiter .planet,
#jupiter.orbit {
  -moz-animation-duration: 142.35138s; 
  -webkit-animation-duration: 142.35138s; 
  -o-animation-duration: 142.35138s; 
  -ms-animation-duration: 142.35138s; 
  animation-duration: 142.35138s; }
​
#saturn .pos,
#saturn .planet,
#saturn.orbit,
#saturn .ring {
  -moz-animation-duration: 200.36998s; 
  -webkit-animation-duration: 200.36998s; 
  -o-animation-duration: 200.36998s; 
  -ms-animation-duration: 200.36998s; 
  animation-duration: 200.36998s; }
​
#uranus .pos,
#uranus .planet,
#uranus.orbit {
  -moz-animation-duration: 1500.20215s; 
  -webkit-animation-duration: 1500.20215s;
  -o-animation-duration: 1500.20215s;
  -ms-animation-duration: 1500.20215s;
  animation-duration: 1500.20215s; }
​
#neptune .pos,
#neptune .planet,
#neptune.orbit {
  -moz-animation-duration: 1977.49584s; 
  -webkit-animation-duration: 1977.49584s;
  -o-animation-duration: 1977.49584s;
  -ms-animation-duration: 1977.49584s;
  animation-duration: 1977.49584s; }
  
  /* --------------------------------------------------------------------------- planets sizes */
  /* --------------------------------------------------------------------------- stretched sizes */
.scale-stretched #sun {
  font-size: 24em; }
​
.scale-stretched #mercury .planet {
  font-size: 43px; }
​
.scale-stretched #venus .planet {
  font-size: 47.72px; }
​
.scale-stretched #earth .planet {
  font-size: 18px; }
​
.scale-stretched #earth .moon {
  font-size: 6px; }
​
.scale-stretched #mars .planet {
  font-size: 12px; }
​
.scale-stretched #jupiter .planet {
  font-size: 58px; }
​
.scale-stretched #saturn .planet {
  font-size: 54px; }
​
.scale-stretched #uranus .planet {
  font-size: 40px; }
​
.scale-stretched #neptune .planet {
  font-size: 22px; }
  /* --------------------------------------------------------------------------- scaled sizes */
  /*
(planets radius * 2) * ratio
*/
 /*$distanceScaleRatio:   0.000075em;*/
  /* --------------------------------------------------------------------------- planets distance scale sizes */
.scale-d #sun {
  font-size: 41.73048em; }
​
.scale-d #mercury .planet {
  font-size: 0.14634em; }
​
.scale-d #venus .planet {
  font-size: 0.36306em; }
​
.scale-d #earth .planet {
  font-size: 0.38226em; }
​
.scale-d #earth .moon {
  font-size: 0.08226em; }
​
.scale-d #mars .planet {
  font-size: 0.20334em; }
​
.scale-d #jupiter .planet {
  font-size: 4.19466em; }
​
.scale-d #saturn .planet {
  font-size: 3.49392em; }
​
.scale-d #uranus .planet {
  font-size: 4.52172em; }
​
.scale-d #neptune .planet {
  font-size: 1.47732em; }
  
  /* --------------------------------------------------------------------------- planet size scale sizes */
.scale-s #sun {
  font-size: 417.3048em; }
​
.scale-s #mercury .planet {
  font-size: 1.4634em; }
​
.scale-s #venus .planet {
  font-size: 3.6306em; }
​
.scale-s #earth .planet {
  font-size: 3.8226em; }
​
.scale-s #earth .moon {
  font-size: 0.8226em; }
​
.scale-s #mars .planet {
  font-size: 2.0334em; }
​
.scale-s #jupiter .planet {
  font-size: 41.9466em; }
​
.scale-s #saturn .planet {
  font-size: 34.9392em; }
​
.scale-s #uranus .planet {
  font-size: 15.2172em; }
​
.scale-s #neptune .planet {
  font-size: 14.7732em; }
  
  /* --------------------------------------------------------------------------- stretched orbits */
.scale-stretched #mercury.orbit {
  width: 1080px;
  height: 1080px;
  margin-top: -540px;
  margin-left: -575px; }
​
.scale-stretched #venus.orbit {
  width: 1080px;
  height: 1080px;
  margin-top: -540px;
  margin-left: -575px; }
​
.scale-stretched #earth.orbit {
  width: 270px;
  height: 270px;
  margin-top: -100px;
  margin-left: -135px; }
​
.scale-stretched #earth .orbit {
  width: 6em;
  height: 6em;
  margin-top: -3em;
  margin-left: -3em; }
​
.scale-stretched #mars.orbit {
  width: 300px;
  height: 300px;
  margin-top: -90px;
  margin-left: -150px; }
​
.scale-stretched #jupiter.orbit {
  width: 100em;
  height: 100em;
  margin-top: -50em;
  margin-left: -50em; }
​
.scale-stretched #saturn.orbit {
  width: 150em;
  height: 150em;
  margin-top: -75em;
  margin-left: -75em; }
​
.scale-stretched #uranus.orbit {
  width: 500px;
  height: 500px;
  margin-top: -100em;
  margin-left: -93em; }
​
.scale-stretched #neptune.orbit {
  width: 210em;
  height: 210em;
  margin-top: -105em;
  margin-left: -105em; }
  
  /* --------------------------------------------------------------------------- scaled orbits */
  /* --------------------------------------------------------------------------- distance scale orbits */
.scale-d #mercury.orbit {
  width: 44.74176em;
  height: 44.74176em;
  margin-top: -22.37088em;
  margin-left: -22.37088em; }
​
.scale-d #venus.orbit {
  width: 47.35737em;
  height: 47.35737em;
  margin-top: -23.67869em;
  margin-left: -23.67869em; }
​
.scale-d #earth.orbit {
  width: 49.50959em;
  height: 49.50959em;
  margin-top: -24.75479em;
  margin-left: -24.75479em; }
​
.scale-d #mars.orbit {
  width: 53.58356em;
  height: 53.58356em;
  margin-top: -26.79178em;
  margin-left: -26.79178em; }
​
.scale-d #jupiter.orbit {
  width: 82.2042em;
  height: 82.2042em;
  margin-top: -41.1021em;
  margin-left: -41.1021em; }
​
.scale-d #saturn.orbit {
  width: 115.91713em;
  height: 115.91713em;
  margin-top: -57.95857em;
  margin-left: -57.95857em; }
​
.scale-d #uranus.orbit {
  width: 191.00471em;
  height: 191.00471em;
  margin-top: -95.50235em;
  margin-left: -95.50235em; }
​
.scale-d #neptune.orbit {
  width: 275.64709em;
  height: 275.64709em;
  margin-top: -137.82355em;
  margin-left: -137.82355em; }
​
/* Moon */
.scale-d #earth .orbit {
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em; }
  
  /* --------------------------------------------------------------------------- size scale orbits */
.scale-s #mercury.orbit {
  width: 441.3048em;
  height: 441.3048em;
  margin-top: -220.6524em;
  margin-left: -220.6524em; }
​
.scale-s #venus.orbit {
  width: 457.3048em;
  height: 457.3048em;
  margin-top: -228.6524em;
  margin-left: -228.6524em; }
​
.scale-s #earth.orbit {
  width: 473.3048em;
  height: 473.3048em;
  margin-top: -236.6524em;
  margin-left: -236.6524em; }
​
.scale-s #mars.orbit {
  width: 489.3048em;
  height: 489.3048em;
  margin-top: -244.6524em;
  margin-left: -244.6524em; }
​
.scale-s #jupiter.orbit {
  width: 561.3048em;
  height: 561.3048em;
  margin-top: -280.6524em;
  margin-left: -280.6524em; }
​
.scale-s #saturn.orbit {
  width: 705.3048em;
  height: 705.3048em;
  margin-top: -352.6524em;
  margin-left: -352.6524em; }
​
.scale-s #uranus.orbit {
  width: 817.3048em;
  height: 817.3048em;
  margin-top: -408.6524em;
  margin-left: -408.6524em; }
​
.scale-s #neptune.orbit {
  width: 881.3048em;
  height: 881.3048em;
  margin-top: -440.6524em;
  margin-left: -440.6524em; }
​
/* Moon */
.scale-s #earth .orbit {
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em; }
  
  /* --------------------------------------------------------------------------- text infos data */
  /* --------------------------------------------------------------------------- speed */
.set-speed dl.infos dd span:after {
  content: 'Learn more'; }
​
.set-speed #sun dl.infos dd:after {
  content: '0 km/h'; }
​
.set-speed #mercury dl.infos dd:after {
  content: 'LIFE SKILLS'; }
​
.set-speed #venus dl.infos dd:after {
  content: 'PARENTING'; }
​
.set-speed #earth dl.infos dd:after {
  content: '107,218 km/h'; }
​
.set-speed #mars dl.infos dd:after {
  content: '86,677 km/h'; }
​
.set-speed #jupiter dl.infos dd:after {
  content: 'CAREER'; }
​
.set-speed #saturn dl.infos dd:after {
  content: 'STRESS'; }
​
.set-speed #uranus dl.infos dd:after {
  content: 'SPIRITUALITY'; }
​
.set-speed #neptune dl.infos dd:after {
  content: '19,566 km/h'; }
  
  /* --------------------------------------------------------------------------- size */
.set-size dl.infos dd span:after {
  content: 'Equatorial Circumference'; }
​
.set-size #sun dl.infos dd:after {
  content: '4,370,005 km'; }
​
.set-size #mercury dl.infos dd:after {
  content: '15,329 km'; }
​
.set-size #venus dl.infos dd:after {
  content: '38,024 km'; }
​
.set-size #earth dl.infos dd:after {
  content: '40,030 km'; }
​
.set-size #mars dl.infos dd:after {
  content: '21,296 km'; }
​
.set-size #jupiter dl.infos dd:after {
  content: '439,263 km'; }
​
.set-size #saturn dl.infos dd:after {
  content: '365,882 km'; }
​
.set-size #uranus dl.infos dd:after {
  content: '159,354 km'; }
​
.set-size #neptune dl.infos dd:after {
  content: '154,704 km'; }
  
  /* --------------------------------------------------------------------------- distance */
.set-distance dl.infos dd span:after {
  content: 'From Sun'; }
​
.set-distance #sun dl.infos dd span:after {
  content: 'From Earth'; }
​
.set-distance #sun dl.infos dd:after {
  content: '149,598,262 km'; }
​
.set-distance #mercury dl.infos dd:after {
  content: '57,909,227 km'; }
​
.set-distance #venus dl.infos dd:after {
  content: '108,209,475 km'; }
​
.set-distance #earth dl.infos dd:after {
  content: '149,598,262 km'; }
​
.set-distance #mars dl.infos dd:after {
  content: '227,943,824 km'; }
​
.set-distance #jupiter dl.infos dd:after {
  content: '778,340,821 km'; }
​
.set-distance #saturn dl.infos dd:after {
  content: '1,426,666,422 km'; }
​
.set-distance #uranus dl.infos dd:after {
  content: '2,870,658,186 km'; }
​
.set-distance #neptune dl.infos dd:after {
  content: '4,498,396,441 km'; }
  
  /* --------------------------------------------------------------------------- planets starting position and lighting effect */
  
  /* --------------------------------------------------------------------------- mercury ; pos: Top */
#mercury .pos {
  left: 50%;
  top: -1%; }
​
#mercury .planet {
  -moz-animation-name: shadow-mercury; 
  -webkit-animation-name: shadow-mercury; 
  -o-animation-name: shadow-mercury; 
  -ms-animation-name: shadow-mercury; 
  animation-name: shadow-mercury; }
  
​
@-webkit-keyframes shadow-mercury {
  0% {
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  25% {
    -webkit-box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  50% {
    -webkit-box-shadow: inset 13px -5px 4px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  50.01% {
    -webkit-box-shadow: inset -13px -5px 4px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  75% {
    -webkit-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  100% {
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ } }
  
  @-moz-keyframes shadow-mercury {
  0% {
    -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  25% {
    -moz-box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  50% {
    -moz-box-shadow: inset 13px -5px 4px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  50.01% {
    -moz-box-shadow: inset -13px -5px 4px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  75% {
    -moz-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  100% {
    -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ } }
  
    @keyframes shadow-mercury {
  0% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  25% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  50% {
    box-shadow: inset 13px -5px 4px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  50.01% {
    box-shadow: inset -13px -5px 4px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  75% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  100% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ } }
  
.scaled.view-2D #mercury .planet,
.scaled.view-3D #mercury .planet {
  -moz-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  -o-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  
  /* RIGHT */ }
  
/* --------------------------------------------------------------------------- venus ; pos: Left */
#venus .pos {
  left: 0;
  top: 50%; }
​
#venus .planet {
  -moz-animation-name: shadow-venus;
  -webkit-animation-name: shadow-venus;
  -o-animation-name: shadow-venus;
  -ms-animation-name: shadow-venus;
  animation-name: shadow-venus; }
​
@-webkit-keyframes shadow-venus {
  0% {
    -webkit-box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  25% {
    -webkit-box-shadow: inset 22px -20px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  25.5% {
    -webkit-box-shadow: inset -22px -20px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  50% {
    -webkit-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  75% {
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  100% {
    -webkit-box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ } }
  
  @-moz-keyframes shadow-venus {
  0% {
    -moz-box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  25% {
    -moz-box-shadow: inset 22px -20px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  25.5% {
    -moz-box-shadow: inset -22px -20px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  50% {
    -moz-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  75% {
    -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  100% {
    -moz-box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ } }
  
    @keyframes shadow-venus {
  0% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  25% {
    box-shadow: inset 22px -20px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  25.5% {
    box-shadow: inset -22px -20px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  50% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  75% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  100% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ } }
​
.scaled.view-2D #venus .planet,
.scaled.view-3D #venus .planet {
  -moz-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  -o-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  
  /* RIGHT */ }
  
 /* --------------------------------------------------------------------------- earth ; pos: Right */
#earth .pos {
  left: 100%;
  top: 50%; }
​
#earth .planet {
  -moz-animation-name: shadow-earth; 
  -webkit-animation-name: shadow-earth;
  -o-animation-name: shadow-earth;
  -ms-animation-name: shadow-earth;
  animation-name: shadow-earth; }
​
@-webkit-keyframes shadow-earth {
  0% {
    -webkit-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  25% {
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  50% {
    -webkit-box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  75% {
    -webkit-box-shadow: inset 24px -20px 15px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  75.01% {
    -webkit-box-shadow: inset -24px -20px 15px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  100% {
    -webkit-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ } }
  
  @-moz-keyframes shadow-earth {
  0% {
    -moz-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  25% {
    -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  50% {
    -moz-box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  75% {
    -moz-box-shadow: inset 24px -20px 15px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  75.01% {
    -moz-box-shadow: inset -24px -20px 15px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  100% {
    -moz-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ } }
  
  @keyframes shadow-earth {
  0% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  25% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  50% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  75% {
    box-shadow: inset 24px -20px 15px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  75.01% {
    box-shadow: inset -24px -20px 15px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  100% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ } } 
​
.scaled.view-2D #earth .planet,
.scaled.view-3D #earth .planet {
  -moz-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  -o-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  
  /* RIGHT */ } 
  
  /* --------------------------------------------------------------------------- moon */
#earth .orbit .pos {
  left: 100%;
  top: 50%; }
  
  /* --------------------------------------------------------------------------- mars ; pos: Bottom */
#mars .pos {
  left: 50%;
  top: 100%; }
​
#mars .planet {
  -moz-animation-name: shadow-mars; 
  -webkit-animation-name: shadow-mars; 
  -o-animation-name: shadow-mars; 
  -ms-animation-name: shadow-mars; 
  animation-name: shadow-mars; }
​
@-webkit-keyframes shadow-mars {
  0% {
    -webkit-box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  25% {
    -webkit-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  50% {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  75% {
    -webkit-box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  99.99% {
    -webkit-box-shadow: inset 18px -10px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  100% {
    -webkit-box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ } }
  
  @-moz-keyframes shadow-mars {
  0% {
    -moz-box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  25% {
    -moz-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  50% {
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  75% {
    -moz-box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  99.99% {
    -moz-box-shadow: inset 18px -10px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  100% {
    -moz-box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ } }
  
  @keyframes shadow-mars {
  0% {
    box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  25% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  50% {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  75% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  99.99% {
    box-shadow: inset 18px -10px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  100% {
    box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ } }
  
.scaled.view-2D #mars .planet,
.scaled.view-3D #mars .planet {
  -moz-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  -o-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  
  /* RIGHT */ }
  
  /* --------------------------------------------------------------------------- jupiter ; pos: Right */
#jupiter .pos {
  left: 100%;
  top: 50%; }
​
#jupiter .planet {
  -moz-animation-name: shadow-jupiter;
  -webkit-animation-name: shadow-jupiter;
  -o-animation-name: shadow-jupiter;
  -ms-animation-name: shadow-jupiter;
  animation-name: shadow-jupiter; }
​
@-webkit-keyframes shadow-jupiter {
  0% {
    -webkit-box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  25% {
    -webkit-box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  50% {
    -webkit-box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  75% {
    -webkit-box-shadow: inset 94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  75.01% {
    -webkit-box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  100% {
    -webkit-box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ } }
  
  @-moz-keyframes shadow-jupiter {
  0% {
    -moz-box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  25% {
    -moz-box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  50% {
    -moz-box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  75% {
    -moz-box-shadow: inset 94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  75.01% {
    -moz-box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  100% {
    -moz-box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ } }
  
  @keyframes shadow-jupiter {
  0% {
    box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  25% {
    box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  50% {
    box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  75% {
    box-shadow: inset 94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  75.01% {
    box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  100% {
    box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ } }
  
.scaled.view-2D #jupiter .planet,
.scaled.view-3D #jupiter .planet {
  -moz-box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
  -o-box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
  box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5); 
  
  /* RIGHT */ }
  
  /* --------------------------------------------------------------------------- saturn ; pos: Left */
#saturn .pos {
  left: 0%;
  top: 50%; }
​
#saturn .planet {
  -moz-animation-name: shadow-saturn; 
  -webkit-animation-name: shadow-saturn;
  -o-animation-name: shadow-saturn;
  -ms-animation-name: shadow-saturn;
  animation-name: shadow-saturn; }
​
@-webkit-keyframes shadow-saturn {
  0% {
    -webkit-box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  25% {
    -webkit-box-shadow: inset 80px -30px 50px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  25.01% {
    -webkit-box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  50% {
    -webkit-box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  75% {
    -webkit-box-shadow: inset -2px 3px 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  100% {
    -webkit-box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ } }
  
  @-moz-keyframes shadow-saturn {
  0% {
    -moz-box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  25% {
    -moz-box-shadow: inset 80px -30px 50px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  25.01% {
    -moz-box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  50% {
    -moz-box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  75% {
    -moz-box-shadow: inset -2px 3px 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  100% {
    -moz-box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ } }
  
  @keyframes shadow-saturn {
  0% {
    box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  25% {
    box-shadow: inset 80px -30px 50px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  25.01% {
    box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  50% {
    box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  75% {
    box-shadow: inset -2px 3px 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  100% {
    box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ } }
  
.scaled.view-2D #saturn .planet,
.scaled.view-3D #saturn .planet {
  -moz-box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
  -o-box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
  box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
  
  /* RIGHT */ }
  
  /* --------------------------------------------------------------------------- uranus ; pos: Left */
#uranus .pos {
  left: 0;
  top: 50%; }
​
#uranus .planet {
  -moz-animation-name: shadow-uranus; 
  -webkit-animation-name: shadow-uranus;
  -o-animation-name: shadow-uranus;
  -ms-animation-name: shadow-uranus;
  animation-name: shadow-uranus; }
​
@-webkit-keyframes shadow-uranus {
  0% {
    -webkit-box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  25% {
    -webkit-box-shadow: inset 40px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  25.01% {
    -webkit-box-shadow: inset -40px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  50% {
    -webkit-box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  75% {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  100% {
    -webkit-box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ } }
  
  @-moz-keyframes shadow-uranus {
  0% {
    -moz-box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  25% {
    -moz-box-shadow: inset 40px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  25.01% {
    -moz-box-shadow: inset -40px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  50% {
    -moz-box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  75% {
    -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  100% {
    -moz-box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ } }
  
  @keyframes shadow-uranus {
  0% {
    box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  25% {
    box-shadow: inset 40px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  25.01% {
    box-shadow: inset -40px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  50% {
    box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  75% {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  100% {
    box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ } }
​
.scaled.view-2D #uranus .planet,
.scaled.view-3D #uranus .planet {
  -moz-box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
  -o-box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
  box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
  
  /* RIGHT */ }
  
  /* --------------------------------------------------------------------------- neptune ; pos: Top */
#neptune .pos {
  left: 50%;
  top: 0; }
​
#neptune .planet {
  -moz-animation-name: shadow-neptune;
  -webkit-animation-name: shadow-neptune;
  -o-animation-name: shadow-neptune;
  -ms-animation-name: shadow-neptune;
  animation-name: shadow-neptune; }
​
@-webkit-keyframes shadow-neptune {
  0% {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  25% {
    -webkit-box-shadow: inset 12px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  50% {
    -webkit-box-shadow: inset 50px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  50.01% {
    -webkit-box-shadow: inset -50px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  75% {
    -webkit-box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  100% {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    /* TOP */ } }
  
  @-moz-keyframes shadow-neptune {
  0% {
    -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  25% {
    -moz-box-shadow: inset 12px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  50% {
    -moz-box-shadow: inset 50px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  50.01% {
    -moz-box-shadow: inset -50px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  75% {
    -moz-box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  100% {
    -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    /* TOP */ } }
  
  @keyframes shadow-neptune {
  0% {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }
​
  25% {
    box-shadow: inset 12px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }
​
  50% {
    box-shadow: inset 50px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  50.01% {
    box-shadow: inset -50px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }
​
  75% {
    box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }
​
  100% {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    /* TOP */ } }
​
.scaled.view-2D #neptune .planet,
.scaled.view-3D #neptune .planet {
  -moz-box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
  -o-box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
  box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
   
  /* RIGHT */ }
  
  /* --------------------------------------------------------------------------- DEBUG 
.pos, 
.planet, 
.orbit,
.ring { 
  -moz-animation-duration: 20s!important; 
  -webkit-animation-duration: 20s!important; 
  -o-animation-duration: 20s!important; 
  -ms-animation-duration: 20s!important; 
  animation-duration: 20s!important; }
​
/* 
  
 /* --------------------------------------------------------------------------- navigation styles */
  
  dl.infos {
  position: absolute;
  display: block;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin-top: -90%;
  margin-left: 90%;
  padding-left: 100%;
  -moz-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transform: rotateX(90deg); 
  -webkit-transform: rotateX(90deg);
  -o-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg); }
  
  dl.infos:before {
  position: absolute;
  content: '';
  width: 15px;
  height: 30px;
  left: 15px;
  bottom: 0;
  border-top: 1px solid white;
  border-left: 1px solid white;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transform: skew(-45deg, 0deg);
  -webkit-transform: skew(-45deg, 0deg);
  -o-transform: skew(-45deg, 0deg);
  -ms-transform: skew(-45deg, 0deg);
  transform: skew(-45deg, 0deg);  
  -moz-box-shadow: inset 1px 1px black; 
  -webkit-box-shadow: inset 1px 1px black; 
  -o-box-shadow: inset 1px 1px black; 
  -ms-box-shadow: inset 1px 1px black; 
  box-shadow: inset 1px 1px black; }
  
dl.infos dt {
  position: absolute;
  left: 50px;
  margin-bottom: 26px;
  bottom: 30px;
  color: #FFF;
  font-size: 14px;
  text-shadow: 1px 1px 2px black; }
  
  dl.infos dd:after {
  position: absolute;
  left: 50px;
  bottom: 30px;
  width: 300px;
  color: #FFF;
  font-size: 22px;
  text-shadow: 1px 1px 2px black; }
  
  dl.infos dd span:after {
  position: absolute;
  left: 50px;
  bottom: 14px;
  width: 300px;
  color: #FFF;
  font-size: 11px;
  text-shadow: 1px 1px 2px black; }
  
  .sun #sun .infos,
.mercury #mercury .infos,
.venus #venus .infos,
.earth #earth .infos,
.mars #mars .infos,
.jupiter #jupiter .infos,
.saturn #saturn .infos,
.uranus #uranus .infos,
.neptune #neptune .infos {
  display: block;
  opacity: 1;
  -moz-transform: rotateX(0deg); 
  -webkit-transform: rotateX(0deg); 
  -o-transform: rotateX(0deg); 
  -ms-transform: rotateX(0deg); 
  transform: rotateX(0deg); 
z-index:97;
}
​
  .mercury #mercury.orbit,
.venus #venus.orbit,
.earth #earth.orbit,
.mars #mars.orbit,
.jupiter #jupiter.orbit,
.saturn #saturn.orbit,
.uranus #uranus.orbit,
.neptune #neptune.orbit {
  border: 0px solid rgba(255, 255, 255, 0.8); 
z-index:97;
}
  
  .hide-UI h1,
.hide-UI #data,
.hide-UI dl.infos,
.hide-UI #controls {
  opacity: 0!important;
  margin-top: -30px; }
  
  .hide-UI #data {
  margin-bottom: -30px; }
  
  .hide-UI .orbit {
  border: 0px solid rgba(255, 255, 255, 0.2) !important; }
  
  h1 {
  width: 100%;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8); }
​
#navbar, #controls, #data {
  background: rgba(0, 0, 0, 0.4); }
  
  #navbar {
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0;
  padding: 16px;
  width: 100%;
  height: 48px; }
​
#navbar a, #data a, #controls label {
  color: rgba(255, 255, 255, 0.6);
  display: block;
  position: relative;
  text-decoration: none; }
  
  #navbar a:hover, #data a:hover, #controls label:hover {
  color: #FFF; }
​
#data a.active {
  color: #0CF; }
  
  #navbar a {
  position: absolute;
  top: 0;
  height: 48px;
  padding: 16px;
  font-size: 14px; }
​
#toggle-data {
  left: 0; }
  
  #toggle-controls {
  right: 0; }
​
#data, #controls {
  z-index: 99;
  position: fixed;
  opacity: 1;
  top: 49px;
  padding: 16px; }
  
  .data-close #data {
  left: -100%; }
​
.data-open #data {
  left: 0px; }
​
.controls-close #controls {
  right: -100%; }
​
.controls-open #controls {
  right: 0px; }
  
  #data a {
  margin-bottom: 1px;
  padding: 6px 10px;
  font-size: 18px; }
​
#controls label {
  opacity: .6;
  height: 24px;
  margin-bottom: 28px; }
​
#controls label:hover {
  opacity: 1; }
​
#controls label:before {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  text-align: center;
  color: #FFF;
  z-index: 99; }
  
  #controls label span {
  display: block;
  margin-left: 36px;
  padding-top: 4px;
  font-size: 18px;
  color: #FFF; }
​
#controls input {
  display: block;
  appearance: none; }
  
  #controls input[type="radio"]:before {
  content: '';
  display: block;
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid #FFF;
  border-radius: 16px; }
​
#controls input:checked[type="radio"]:after {
  content: '';
  display: block;
  top: 3px;
  margin-left: 3px;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #FFF;
  z-index: 99; }
  
  #controls input[type="checkbox"]:before {
  content: '';
  display: block;
  position: absolute;
  width: 100px;
  height: 22px;
  border: 2px solid #FFF;
  border-radius: 16px; }
​
#controls input[type="checkbox"]:after {
  content: '';
  display: block;
  top: 3px;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #FFF;
  z-index: 99; }
  
  #controls label.set-view:before {
  font: bold small-caps 11px/20px sans-serif; }
​
.view-3D #controls label.set-view:before {
  content: '2D';
  margin-left: 82px; }
​
.view-2D #controls label.set-view:before {
  content: '3D';
  margin-left: 7px; }
​
.view-3D #controls .set-view input:after {
  margin-left: 3px; }
​
.view-2D #controls .set-view input:after {
  margin-left: 81px; }
​
#controls label.set-zoom:before {
  font: normal small-caps 18px/14px sans-serif; }
​
.zoom-large #controls label.set-zoom:before {
  content: '+';
  margin-left: 82px; }
​
.zoom-close #controls label.set-zoom:before {
  content: '-';
  margin-left: 7px; }
​
.zoom-large #controls .set-zoom input:after {
  margin-left: 3px; }
​
.zoom-close #controls .set-zoom input:after {
  margin-left: 81px; }
  
  /* --------------------------------------------------------------------------- transitions */
.pos {
  -moz-transition-property: top, left; 
  -webkit-transition-property: top, left;
  -o-transition-property: top, left;
  -ms-transition-property: top, left;
  transition-property: top, left; }
​
#solar-system, .orbit,
.planet,
.satelite,
.ring {
  transition-property: width, height, top, left, margin-left, margin-top, webkit-transform; }
​
#sun, .icon {
  transition-property: width, height, webkit-transform; }
​
#solar-system,
#sun,
.orbit,
.pos,
.planet,
.satelite,
.ring,
.infos,
.icon {
  -moz-transition-duration: .8s;
  -webkit-transition-duration: .8s;
  -o-transition-duration: .8s;
  -ms-transition-duration: .8s;
  transition-duration: .8s;
  -moz-transition-timing-function: ease-in-out; 
  -webkit-transition-timing-function: ease-in-out; 
  -o-transition-timing-function: ease-in-out; 
  -ms-transition-timing-function: ease-in-out; 
  transition-timing-function: ease-in-out;  }
​
#solar-system,
#sun,
.planet,
.satelite,
.ring {
  -moz-transition-delay: 0s; 
  -webkit-transition-delay: 0s; 
  -o-transition-delay: 0s; 
  -ms-transition-delay: 0s; 
  transition-delay: 0s;  }
​
.pos {
  -moz-transition-delay: 1s; 
  -webkit-transition-delay: 1s; 
  -o-transition-delay: 1s; 
  -ms-transition-delay: 1s; 
  transition-delay: 1s; 
}
​
.opening #solar-system,
.opening #sun,
.opening .orbit,
.opening .pos,
.opening .planet,
.opening .satelite,
.opening .ring,
.opening .infos,
.opening h1,
.opening #data,
.opening dl.infos,
.opening #controls {
  -moz-transition-duration: 0s;
  -webkit-transition-duration: 0s;
  -o-transition-duration: 0s;
  -ms-transition-duration: 0s;
  transition-duration: 0s;
  -moz-transition-delay: 0s; 
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s; }
​
.opening .pos {
  transition-delay: 0s; }
​
h1, #data, #controls {
  -moz-transition-property: opacity, margin;
  -webkit-transition-property: opacity, margin;
  -o-transition-property: opacity, margin;
  -ms-transition-property: opacity, margin;
  transition-property: opacity, margin;
  -moz-transition-duration: .8s;
  -webkit-transition-duration: .8s;
  -o-transition-duration: .8s;
  -ms-transition-duration: .8s;
  transition-duration: .8s;
  -moz-transition-timing-function: ease-in-out; 
  -webkit-transition-timing-function: ease-in-out; 
  -o-transition-timing-function: ease-in-out; 
  -ms-transition-timing-function: ease-in-out; 
  transition-timing-function: ease-in-out;  }
​
h1 {
  -moz-transition-delay: .35s; 
  -webkit-transition-delay: .35s; 
  -o-transition-delay: .35s; 
  -ms-transition-delay: .35s; 
  transition-delay: .35s; }
​
#data {
  -moz-transition-delay: .7s; 
  -webkit-transition-delay: .7s; 
  -o-transition-delay: .7s; 
  -ms-transition-delay: .7s; 
  transition-delay: .7s; }
​
#controls {
  -moz-transition-delay: 1s; 
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  -ms-transition-delay: 1s;
  transition-delay: 1s; }
  
  /* --------------------------------------------------------------------------- images */
​
​
#mercury .planet {
  background-image: url('http://secure.cart32.com/WarrenKahn/Planet1e.png'); }
​
#venus .planet {
  background-image: url('http://secure.cart32.com/WarrenKahn/Planet8d.png'); }
​
#earth .planet {
  background-image: url('http://secure.cart32.com/WarrenKahn/Planet1d.png'); }
​
#earth .moon {
  background-color: white; }
​
#mars .planet {
  background-image: url(''); }
​
#jupiter .planet {
  background-image: url('http://secure.cart32.com/WarrenKahn/Planet3b.png'); }
​
#saturn .planet {
  background-image: url('http://secure.cart32.com/WarrenKahn/Planet4.png'); }
​
#uranus .planet {
  background-image: url('http://secure.cart32.com/WarrenKahn/Planet5b.png'); }
​
#neptune .planet {
  background-image: url('http://secure.cart32.com/WarrenKahn/Planet6.png'); }
  
  /* --------------------------------------------------------------------------- responsive styles */
@media screen and (max-width: 299px) {
  #universe {
    font-size: 20%; } }
@media screen and (min-width: 300px) {
  #universe {
    font-size: 24%; } }
@media screen and (min-width: 500px) {
  #universe {
    font-size: 36%; } }
@media screen and (min-width: 600px) {
  #universe {
    font-size: 44%; } }
@media screen and (min-width: 760px) {
  #universe {
    font-size: 58%; } }
@media screen and (min-width: 1000px) {
  #universe {
    font-size: 73%; }
​
  #navbar, #controls, #data {
    background: transparent; }
​
  #navbar a {
    display: none; }
​
  h1 {
    font-size: 22px;
    margin-top: 8px; }
​
  #controls {
    padding-right: 32px;
    top: 12px; }
​
  #data {
    position: fixed;
    top: 515px;
    bottom: 0;
    width: 100%;
    height:20px;
    text-align: right; }
​
  #data a {
    display: inline-block;
    text-align: center;
    font-size: 15px;
    padding: 15px 15px; }
​
  .data-open #data, .data-close #data {
    left: -193px; }
​
  .controls-open #controls, .controls-close #controls {
    right: 0px; } }
@media screen and (min-width: 1300px) {
  #universe {
    font-size: 100%; } }
@media screen and (min-width: 1600px) {
  .zoom-close .scale-d #solar-system {
    margin-left: -120%; } }
  
</style>
  
​
  
</head>
  
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
<body class="opening hide-UI view-3D zoom-large data-open controls-close">
  
      <div id="data">
​
      <a class="mercury" title="LIFE SKILLS" href="#mercuryspeed" onMouseOver="zOnEvent('mercury', 1);" onMouseOut="zOnEvent('mercury', 2);">LIFE SKILLS</a>
           <a class="jupiter" title="CAREER" href="#jupiterspeed" onMouseOver="zOnEvent('jupiter', 1);" onMouseOut="zOnEvent('jupiter', 2);">CAREER</a>
        
      <a class="venus" title="PARENTING" href="#venusspeed" onMouseOver="zOnEvent('venus', 1);" onMouseOut="zOnEvent('venus', 2);">PARENTING</a>
   
      <a class="saturn" title="STRESS" href="#saturnspeed" onMouseOver="zOnEvent('saturn', 1);" onMouseOut="zOnEvent('saturn', 2);">STRESS</a>
      <a class="uranus" title="SPIRITUALITY" href="#uranusspeed" onMouseOver="zOnEvent('uranus', 1);" onMouseOut="zOnEvent('uranus', 2);">SPIRITUALITY</a>
​
    </div>
​
    <div id="universe" class="scale-stretched">
      <div id="galaxy">
         
        <div id="descriptionls" style="display: none">
          <div id="lsinsert">
            <a href="#" id="ca-close1"></a>
            <div id="lstextslide"><p></p></div>
            <a href="http://thesisdesigndesk.wix.com/warrenkahn#!the-flow/c1qv3" target="_parent" id="join">Learn More</a>
          </div>
          
          <span></span>
          
        </div>
        
        <div id="descriptioncr" style="display: none">
          
              <div id="crinsert">
            <a href="#" id="ca-close2"></a>
            <div id="crtextslide"><p></p></div>
            <a href="http://thesisdesigndesk.wix.com/warrenkahn#!the-flow/c1qv3" target="_parent" id="join">Learn More</a>
            
          </div>
          
          <span></span>
        </div>
        
        <div id="descriptionpr" style="display: none">
          
             <div id="prinsert">
            <a href="#" id="ca-close3"></a>
            <div id="prtextslide"><p></p></div>
            <a href="http://thesisdesigndesk.wix.com/warrenkahn#!the-flow/c1qv3" target="_parent" id="join">Learn More</a>
            
          </div>
          
          <span></span>
        </div>
        
        <div id="descriptionst" style="display: none">
          
              <div id="stinsert">
            <a href="#" id="ca-close4"></a>
            <div id="sttextslide"><p></p></div>
            <a href="http://thesisdesigndesk.wix.com/warrenkahn#!the-flow/c1qv3" target="_parent" id="join">Learn More</a>
            
          </div>
          
          
          <span></span>
        </div>
        
        <div id="descriptionsp" style="display: none">
          
              <div id="spinsert">
            <a href="#" id="ca-close5"></a>
            <div id="sptextslide"><p></p></div>
            <a href="http://thesisdesigndesk.wix.com/warrenkahn#!the-flow/c1qv3" target="_parent" id="join">Learn More</a>
            
          </div>
          
          <span></span>
        </div>
        
        
        <div id="solar-system" class="Mercury">
         
          <div id="venus" class="orbit">
            
            <div class="pos">
              <div class="planet">
               
                <dl class="infos">
                  <dt></dt>
                  <dd><span></span></dd>
                </dl>
              </div>
            </div>
          </div>
          
          <div id="earth" class="orbit">
            <div class="pos">
              <div class="orbit">
                <div class="pos">
                  <div class="moon"></div>
                </div>
              </div>
              
              <div class="planet">
                <dl class="infos">
                  <dt>test</dt>
                  <dd><span></span></dd>
                </dl>
              </div>
            </div>
          </div>
          
          <div id="mars" class="orbit">
            <div class="pos">
              <div class="planet">
                <dl class="infos">
                  <dt>Mars</dt>
                  <dd><span></span></dd>
                </dl>
              </div>
            </div>
          </div>
          
          <div id="jupiter" class="orbit">
            <div class="pos">
              <div class="planet">
                <dl class="infos">
                  <dt></dt>
                  <dd><span></span></dd>
                </dl>
              </div>
            </div>
          </div>
          
          <div id="saturn" class="orbit">
            <div class="pos">
              <div class="planet">
                <dl class="infos">
                  <dt></dt>
                  <dd><span></span></dd>
                </dl>
              </div>
            </div>
          </div>
          
           <div id="uranus" class="orbit">
            <div class="pos">
              <div class="planet">
                <dl class="infos">
                  <dt></dt>
                  <dd><span></span></dd>
                </dl>
              </div>
            </div>
          </div>
          
           <div id="neptune" class="orbit">
            <div class="pos">
              <div class="planet">
                <dl class="infos">
                  <dt>Neptune</dt>
                  <dd><span></span></dd>
                </dl>
              </div>
            </div>
          </div>
          
           <div id="mercury" class="orbit">
            <div class="pos">
              <div class="planet">
                <dl class="infos">
                  <dt></dt>
                  <dd><span></span></dd>
                </dl>
              </div>
            </div>
          </div>
​
​
          <div id="sun">
            <dl class="infos">
              <dt>Sun</dt>
              <dd><span></span></dd>
            </dl>
          </div>
          
        </div>
      </div>
    </div>
​
​
​
​
​
​
​
​
​
​
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
<script type="text/javascript">
    if (typeof jQuery == 'undefined') { 
      document.write(unescape("%3Cscript src='http://secure.cart32.com/WarrenKahn/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
</script>
<script src="http://secure.cart32.com/WarrenKahn/prefixfree.min.js"></script>
<script src="http://secure.cart32.com/WarrenKahn/scripts.min3.js"></script>
  
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("a.active").is('.jupiter'));
  });
});
</script>
  
  <script>
    
    $(document).ready(function(){
    
    function zOnEvent(cl, cond) {
    if (cond === 1) {
        var element = document.getElementsByClassName(cl);
        for (var i=0; i<element.length; i++) {
            element[i].style.zIndex = '97';
        }
    } else if (cond === 2) {
        var element = document.getElementsByClassName(cl);
        for (var i=0; i<element.length; i++) {
            element[i].style.zIndex = '10';
        }
    }
}
      
       });
    
    </script>
​
  
  
<script>
  
    $(document).ready(function(){
    
        var intervalTimer = null;
    
        $('#mercury .infos').hover(
    
            function () {
                if($("a.active").is('.mercury')){
                    $("#descriptionls").fadeIn("2000");
                }
                
                if (intervalTimer !== null) {
                    clearInterval(intervalTimer);
                    intervalTimer = null;
                }
                
                var quotes = [
                    "Who’s the one who’s always there when that keeps happening?",
                    "Learn to dismantle self-defeating behaviors",
                    "JOIN THE FLOW TODAY",
                ];
                    
                var i = 0;
                function update() {
                     $('#lstextslide').html(quotes[i]);
                     i = (i + 1) % quotes.length;
                }    
                update();
                intervalTimer = setInterval(update, 4000);
            });
    });
​
​
  
</script>
  
<script>
$(document).ready(function(){
  $("#ca-close1").click(function(){
    $("#descriptionls").fadeOut()
  });
​
});
  
</script>
  
​
  
<script>
  
      $(document).ready(function(){
    
        var intervalTimer = null;
    
        $('#jupiter .infos').hover(
    
            function () {
                if($("a.active").is('.jupiter')){
                    $("#descriptioncr").fadeIn("2000");
                }
                
                if (intervalTimer !== null) {
                    clearInterval(intervalTimer);
                    intervalTimer = null;
                }
                
                var quotes = [
                    "Unsatisfied with your career?",
                    "Do what you love or learn to love what you do",
                    "JOIN THE FLOW TODAY",
                ];
                    
                var i = 0;
                function update() {
                     $('#crtextslide').html(quotes[i]);
                     i = (i + 1) % quotes.length;
                }    
                update();
                intervalTimer = setInterval(update, 4000);
            });
    });
​
  
</script>
  
<script>
$(document).ready(function(){
  $("#ca-close2").click(function(){
    $("#descriptioncr").fadeOut()
  });
​
});
</script>
  
<script>
  
      $(document).ready(function(){
    
        var intervalTimer = null;
    
        $('#venus .infos').hover(
    
            function () {
                if($("a.active").is('.venus')){
                    $("#descriptionpr").fadeIn("2000");
                }
                
                if (intervalTimer !== null) {
                    clearInterval(intervalTimer);
                    intervalTimer = null;
                }
                
                var quotes = [
                    "Parenting does not include a manual",
                    "Learn when to stand firm & when to let go, with love",
                    "JOIN THE FLOW TODAY",
                ];
                    
                var i = 0;
                function update() {
                     $('#prtextslide').html(quotes[i]);
                     i = (i + 1) % quotes.length;
                }    
                update();
                intervalTimer = setInterval(update, 4000);
            });
    });
  
</script>
  
<script>
$(document).ready(function(){
  $("#ca-close3").click(function(){
    $("#descriptionpr").fadeOut()
  });
​
});
</script>
  
<script>
  
        $(document).ready(function(){
    
        var intervalTimer = null;
    
        $('#saturn .infos').hover(
    
            function () {
                if($("a.active").is('.saturn')){
                    $("#descriptionst").fadeIn("2000");
                }
                
                if (intervalTimer !== null) {
                    clearInterval(intervalTimer);
                    intervalTimer = null;
                }
                
                var quotes = [
                    "Tired of rowing so hard?",
                    "Learn how to lighten up",
                    "JOIN THE FLOW TODAY",
                ];
                    
                var i = 0;
                function update() {
                     $('#sttextslide').html(quotes[i]);
                     i = (i + 1) % quotes.length;
                }    
                update();
                intervalTimer = setInterval(update, 4000);
            });
    });
​
  
</script>
  
<script>
$(document).ready(function(){
  $("#ca-close4").click(function(){
    $("#descriptionst").fadeOut()
  });
​
});
</script>
  
<script>
  
        $(document).ready(function(){
    
        var intervalTimer = null;
    
        $('#uranus .infos').hover(
    
            function () {
                if($("a.active").is('.uranus')){
                    $("#descriptionsp").fadeIn("2000");
                }
                
                if (intervalTimer !== null) {
                    clearInterval(intervalTimer);
                    intervalTimer = null;
                }
                
                var quotes = [
                    "Take a breath and learn to be still",
                    "Access Universal Wisdom",
                    "JOIN THE FLOW TODAY",
                ];
                    
                var i = 0;
                function update() {
                     $('#sptextslide').html(quotes[i]);
                     i = (i + 1) % quotes.length;
                }    
                update();
                intervalTimer = setInterval(update, 4000);
            });
    });
  
  </script>
  
<script>
$(document).ready(function(){
  $("#ca-close5").click(function(){
    $("#descriptionsp").fadeOut()
  });
​
});
</script>
​
  
  
  
  
  
  
​
</body>
  
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
totallytotallyamazingpro
0viewers