@charset "utf-8";
body { background:#000; }
html, body { margin: 0; padding: 0; border: 0; height: 100%; overflow: hidden; }
#container { width:100%; height:100%; position:relative; overflow:hidden; }
#starScreenBox { opacity:1; width:100%; height:100%; position:absolute; overflow:hidden; top:0; left:0; z-index:995; background:#000; }
#starScreen { width:300%; height:300%; position:absolute; top:-100%; left:-100%; z-index:996; }
#loadBox { position:absolute; width:100%; height:31px; z-index:997; text-align:center; top:50%; left:0; }
#load { margin:0 auto; }
#starSm { width:100%; height:100%; position:absolute; background:url(/img/star-bg2.jpg) repeat top left; top:0; left:0; z-index:1; }
#starMed { opacity:0.6; width:100%; height:100%; position:absolute; background:url(/img/stars-med.jpg) no-repeat top left; top:0; left:0; z-index:2; }
#starClustersxx { opacity:0.4; width:100%; height:100%; position:absolute; background:url(/img/star-clusters.png) no-repeat top left; top:0; left:0; z-index:2; }
.starClusterBlue { opacity:0.5; width:690px; height:741px; position:absolute; background:url(/img/star-cluster1.png) no-repeat top center; top:0; left:0; z-index:3; }
.nebula { opacity:0.5; width:1995px; height:1750px; position:absolute; background:url(/img/nebula.png) no-repeat top center; top:0; left:0; z-index:2; }
.largeStar { width:14px; height:14px; position:absolute; top:0; left:0; z-index:150; }
#planet { overflow:hidden; position:absolute; bottom:-1034px; left:-454px; z-index:500; width:1280px; height:1279px; -moz-border-radius:50%; -webkit-border-radius:50%; -o-border-radius:50%; border-radius:50%; background:url(/img/planet.jpg) no-repeat center top; }
#planetShadow { position:absolute; bottom:-1px; left:-1px; z-index:501; width:890px; height:311px; background:url(/img/planet-shadow2.png) no-repeat center top; }
#bottomShadow { width:150%; height:50px; position:absolute; z-index:650; bottom:-50px; left:0; -moz-box-shadow: 0 -20px 130px 70px #000000; -webkit-box-shadow: 0 -20px 130px 70px #000000; box-shadow: 0 -20px 130px 70px #000000; }
#shootingStar { opacity:0; background:url(/img/shootingstar.png) no-repeat top left; width:145px; height:43px; z-index:450; position:absolute; top:-200px; left:-200px}
#viewbox { width:120%; height:120%; position:absolute; }
#moonOne { width:40px; height:40px; position:absolute; z-index:502; bottom:-100px; left:200px; }
#loginContainer {position:absolute; z-index:999; width:100%; height:315px; top:-315px; left:0; text-align:center; }
#login { background:url('/img/login.png') no-repeat top center; opacity:.8; width:539px; height:315px; margin:0 auto; text-align:left; }
h1 {color: #09aff4; font-family:'Geo','Cuprum',sans-serif; font-size: 26px; font-weight: 400; letter-spacing: 2px; line-height: 26px; margin: 0; padding: 59px 0 0; text-shadow:0 2px 0 #000000; text-align: center; }
h2 {color: #0d436b; font-family:'Alex Brush',cursive; font-size: 102px; font-weight: 400; letter-spacing: 2px; line-height: 102px; margin: 0; padding: 77px 0 0 77px; text-align: left; text-shadow: 0 2px 0 #000000; }
h3 {color: #0d436b; font-family:'Alex Brush',cursive; font-size: 91px; font-weight: 400; letter-spacing: 2px; line-height: 43px; margin: 0; padding: 0 0 0 224px; text-align: left; text-shadow:0 2px 0 #000000; }

/* ANIMATIONS */
@-moz-keyframes rotate360 {
  from {
	-moz-transform: rotate(0deg);
  }
  to { 
	-moz-transform: rotate(359deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
	-webkit-transform: rotate(0deg);
  }
  to { 
	-webkit-transform: rotate(359deg);
  }
}
@-o-keyframes rotate360 {
  from {
	-o-transform: rotate(0deg);
  }
  to { 
	-o-transform: rotate(359deg);
  }
}
@-ms-keyframes rotate360 {
  from {
	-ms-transform: rotate(0deg);
  }
  to { 
	-ms-transform: rotate(359deg);
  }
}
@keyframes rotate360 {
  from {
	transform:rotate(0deg);
  }
  to { 
	transform:rotate(359deg);
  }
}
@-moz-keyframes rotateBack360 {
  from {
	-moz-transform: rotate(0deg);
  }
  to { 
	-moz-transform: rotate(-359deg);
  }
}
@-webkit-keyframes rotateBack360 {
  from {
	-webkit-transform: rotate(0deg);
  }
  to { 
	-webkit-transform: rotate(-359deg);
  }
}
@-o-keyframes rotateBack360 {
  from {
	-o-transform: rotate(0deg);
  }
  to { 
	-o-transform: rotate(-359deg);
  }
}
@-ms-keyframes rotateBack360 {
  from {
	-ms-transform: rotate(0deg);
  }
  to { 
	-ms-transform: rotate(-359deg);
  }
}
@keyframes rotateBack360 {
  from {
	transform:rotate(0deg);
  }
  to { 
	transform:rotate(-359deg);
  }
}
#planet.rotate {
	-moz-animation: rotate360 600s infinite linear;
	-webkit-animation: rotate360 600s infinite linear;
	-o-animation: rotate360 600s infinite linear;
	-ms-animation: rotate360 600s infinite linear;
	animation: rotate360 600s infinite linear;
}
@-moz-keyframes starfade {
	0% {
		opacity: .3;
	}
	20% {
		opacity: .6;
	}
	50% {
		opacity: .6;
	}   
	70% {
		opacity: .3;
	}
	100% {
		opacity: .3;
	}
}
@-webkit-keyframes starfade {
	0% {
		opacity: .3;
	}
	20% {
		opacity: .6;
	}
	50% {
		opacity: .6;
	}   
	70% {
		opacity: .3;
	}
	100% {
		opacity: .3;
	}
}
@-o-keyframes starfade {
	0% {
		opacity: .3;
	}
	20% {
		opacity: .6;
	}
	50% {
		opacity: .6;
	}   
	70% {
		opacity: .3;
	}
	100% {
		opacity: .3;
	}
}
@-ms-keyframes starfade {
	0% {
		opacity: .3;
	}
	20% {
		opacity: .6;
	}
	50% {
		opacity: .6;
	}   
	70% {
		opacity: .3;
	}
	100% {
		opacity: .3;
	}
}
@keyframes starfade {
	0% {
		opacity: .3;
	}
	20% {
		opacity: .6;
	}
	50% {
		opacity: .6;
	}   
	70% {
		opacity: .3;
	}
	100% {
		opacity: .3;
	}
}
#starMed.on {
	-moz-animation: starfade 20s cubic-bezier(0.575, 1, 0.405, 0) infinite;
	-webkit-animation: starfade 20s cubic-bezier(0.575, 1, 0.405, 0) infinite;
	-o-animation: starfade 20s cubic-bezier(0.575, 1, 0.405, 0) infinite;
	-ms-animation: starfade 20s cubic-bezier(0.575, 1, 0.405, 0) infinite;
	animation: starfade 20s cubic-bezier(0.575, 1, 0.405, 0) infinite;
}
.rotate10 {
	-moz-animation: rotate360 1000s infinite linear;
	-webkit-animation: rotate360 1000s infinite linear;
	-o-animation: rotate360 1000s infinite linear;
	-ms-animation: rotate360 1000s infinite linear;
	animation: rotate360 1000s infinite linear;
}
.rotate9 {
	-moz-animation: rotateBack360 1000s infinite linear;
	-webkit-animation: rotateBack360 1000s infinite linear;
	-o-animation: rotateBack360 1000s infinite linear;
	-ms-animation: rotateBack360 1000s infinite linear;
	animation: rotateBack360 1000s infinite linear;
}
.rotate8 {
	-moz-animation: rotate360 450s infinite linear;
	-webkit-animation: rotate360 450s infinite linear;
	-o-animation: rotate360 450s infinite linear;
	-ms-animation: rotate360 450s infinite linear;
	animation: rotate360 450s infinite linear;
}
.rotate7 {
	-moz-animation: rotateBack360 450s infinite linear;
	-webkit-animation: rotateBack360 450s infinite linear;
	-o-animation: rotateBack360 450s infinite linear;
	-ms-animation: rotateBack360 450s infinite linear;
	animation: rotateBack360 450s infinite linear;
}
.rotate6 {
	-moz-animation: rotate360 400s infinite linear;
	-webkit-animation: rotate360 400s infinite linear;
	-o-animation: rotate360 400s infinite linear;
	-ms-animation: rotate360 400s infinite linear;
	animation: rotate360 400s infinite linear;
}
.rotate5 {
	-moz-animation: rotateBack360 400s infinite linear;
	-webkit-animation: rotateBack360 400s infinite linear;
	-o-animation: rotateBack360 400s infinite linear;
	-ms-animation: rotateBack360 400s infinite linear;
	animation: rotateBack360 400s infinite linear;
}
.rotate4 {
	-moz-animation: rotate360 350s infinite linear;
	-webkit-animation: rotate360 350s infinite linear;
	-o-animation: rotate360 350s infinite linear;
	-ms-animation: rotate360 350s infinite linear;
	animation: rotate360 350s infinite linear;
}
.rotate3 {
	-moz-animation: rotateBack360 350s infinite linear;
	-webkit-animation: rotateBack360 350s infinite linear;
	-o-animation: rotateBack360 350s infinite linear;
	-ms-animation: rotateBack360 350s infinite linear;
	animation: rotateBack360 350s infinite linear;
}
.rotate2 {
	-moz-animation: rotate360 300s infinite linear;
	-webkit-animation: rotate360 300s infinite linear;
	-o-animation: rotate360 300s infinite linear;
	-ms-animation: rotate360 300s infinite linear;
	animation: rotate360 300s infinite linear;
}
.rotate1 {
	-moz-animation: rotateBack360 300s infinite linear;
	-webkit-animation: rotateBack360 300s infinite linear;
	-o-animation: rotateBack360 300s infinite linear;
	-ms-animation: rotateBack360 300s infinite linear;
	animation: rotateBack360 300s infinite linear;
}
@-moz-keyframes moon {
	0% {
		z-index:502;
		width: 60px;
		height: 60px;
	}
	20% {
		left: 500px;
		bottom: 200px;
		width: 20px;
		height: 20px;
		z-index:502;
	}
	21% {
		z-index:499;	
	}
	100% {
		left: 200px;
		bottom: -100px;
		width: 1px;
		height: 1px;
		z-index:499;
	}
}
@-webkit-keyframes moon {
	0% {
		z-index:502;
		width: 60px;
		height: 60px;
	}
	20% {
		left: 500px;
		bottom: 200px;
		width: 20px;
		height: 20px;
		z-index:502;
	}
	21% {
		z-index:499;	
	}
	100% {
		left: 200px;
		bottom: -100px;
		width: 1px;
		height: 1px;
		z-index:499;
	}
}
@-o-keyframes moon {
	0% {
		z-index:502;
		width: 60px;
		height: 60px;
	}
	20% {
		left: 500px;
		bottom: 200px;
		width: 20px;
		height: 20px;
		z-index:502;
	}
	21% {
		z-index:499;	
	}
	100% {
		left: 200px;
		bottom: -100px;
		width: 1px;
		height: 1px;
		z-index:499;
	}
}
@-ms-keyframes moon {
	0% {
		z-index:502;
		width: 60px;
		height: 60px;
	}
	20% {
		left: 500px;
		bottom: 200px;
		width: 20px;
		height: 20px;
		z-index:502;
	}
	21% {
		z-index:499;	
	}
	100% {
		left: 200px;
		bottom: -100px;
		width: 1px;
		height: 1px;
		z-index:499;
	}
}
@keyframes moon {
	0% {
		z-index:502;
		width: 60px;
		height: 60px;
	}
	20% {
		left: 500px;
		bottom: 200px;
		width: 20px;
		height: 20px;
		z-index:502;
	}
	21% {
		z-index:499;	
	}
	100% {
		left: 200px;
		bottom: -100px;
		width: 1px;
		height: 1px;
		z-index:499;
	}
}
#moonOne.on {
	-moz-animation: moon 150s infinite linear;
	-webkit-animation: moon 150s infinite linear;
	-o-animation: moon 150s infinite linear;
	-ms-animation: moon 150s infinite linear;
	animation: moon 150s infinite linear;
}
@-moz-keyframes starScreen {
	0% {
		left: -100%;
		top: -100%;
		width: 300%;
		height: 300%;
	}
	100% {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
}
@-webkit-keyframes starScreen {
	0% {
		left: -100%;
		top: -100%;
		width: 300%;
		height: 300%;
	}
	100% {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
}
@-o-keyframes starScreen {
	0% {
		left: -100%;
		top: -100%;
		width: 300%;
		height: 300%;
	}
	100% {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
}
@-ms-keyframes starScreen {
	0% {
		left: -100%;
		top: -100%;
		width: 300%;
		height: 300%;
	}
	100% {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
}
@keyframes starScreen {
	0% {
		left: -100%;
		top: -100%;
		width: 300%;
		height: 300%;
	}
	100% {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
}
#starScreen.on {
	-moz-animation: starScreen 6s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	-webkit-animation: starScreen 6s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	-o-animation: starScreen 6s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	-ms-animation: starScreen 6s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	animation: starScreen 6s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
}
@-moz-keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
@-webkit-keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
@-o-keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
@-ms-keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
@keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
#starScreenBox.on {
	-moz-animation: fadeOut 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) 3s forwards;
	-webkit-animation: fadeOut 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) 3s forwards;
	-o-animation: fadeOut 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) 3s forwards;
	-ms-animation: fadeOut 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) 3s forwards;
	animation: fadeOut 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) 3s forwards;
}
#loadBox.on {
	-moz-animation: fadeOut 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	-webkit-animation: fadeOut 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	-o-animation: fadeOut 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	-ms-animation: fadeOut 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	animation: fadeOut 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
}
@-moz-keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@-webkit-keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@-o-keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@-ms-keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
#planet.on {
	-moz-animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	-webkit-animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	-o-animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	-ms-animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
}
#planetShadow.on {
	-moz-animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	-webkit-animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	-o-animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	-ms-animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
}
#viewbox.on {
	-moz-animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	-webkit-animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	-o-animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	-ms-animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
	animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards;
}
@-moz-keyframes loginDrop {
	0% {
		top:-50%;
	}
	100% {
		top:25%;
	}
}
@-webkit-keyframes loginDrop {
	0% {
		top:-50%;
	}
	100% {
		top:25%;
	}
}
@-o-keyframes loginDrop {
	0% {
		top:-50%;
	}
	100% {
		top:25%;
	}
}
@-ms-keyframes loginDrop {
	0% {
		top:-50%;
	}
	100% {
		top:25%;
	}
}
@keyframes loginDrop {
	0% {
		top:-50%;
	}
	100% {
		top:25%;
	}
}
#loginContainer.on {
	-moz-animation: loginDrop 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) 4s forwards;
	-webkit-animation: loginDrop 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) 4s forwards;
	-o-animation: loginDrop 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) 4s forwards;
	-ms-animation: loginDrop 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) 4s forwards;
	animation: loginDrop 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) 4s forwards;
}