/* ============================================================================================== 
This copyright notice must be kept untouched in the stylesheet at all times.
The original version of this stylesheet and the associated (x)html 
is available at http://www.script-tutorials.com/night-sky-with-twinkling-stars/
Copyright (c) Script Tutorials. All rights reserved.
This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
================================================================================================= */


@-webkit-keyframes zodiac {
	from {-webkit-transform:rotate(0deg);}
	to {  -webkit-transform:rotate(360deg);}
}

@-moz-keyframes zodiac {
	from {-moz-transform:rotate(0deg);}
	to {  -moz-transform:rotate(360deg);}
}
@keyframes move-twink-back {
	from {background-position:0 0;}
	to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
	from {background-position:0 0;}
	to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
	from {background-position:0 0;}
	to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
	from {background-position:0 0;}
	to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
	from {background-position:0 0;}
	to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
	from {background-position:0 0;}
	to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
	from {background-position:0 0;}
	to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
	from {background-position: 0;}
	to {background-position:10000px 0;}
}

.zodiac, .stars, .twinkling, .clouds {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	display:block;
}

.zodiac {
	/*background: url(../img/cchart-ns.png) repeat 50%;*/
	background-position: 50%;
	background-size: 120%;
	z-index:2;
	opacity: 0.2;
	
	-webkit-animation-name: zodiac;
	-webkit-animation-duration:1000s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-moz-animation-name: zodiac;
	-moz-animation-duration:1000s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:linear;
}

.zodiac img {
	max-width: 120%;
	position: absolute;
	top: -50%;
	right: -50%;
	bottom: -50%;
	left: -50%;
	margin: auto;
}

.stars {
	background:#283469 url(../img/stars.png) 40% 50%;
	z-index:0;
}

.twinkling{
	background:transparent url(../img/twinkling5.png) 0 50%;
	z-index:1;
	
	-moz-animation:move-twink-back 200s linear infinite;
	-ms-animation:move-twink-back 200s linear infinite;
	-o-animation:move-twink-back 200s linear infinite;
	-webkit-animation:move-twink-back 200s linear infinite;
	animation:move-twink-back 200s linear infinite;
}

.clouds{
	background:transparent url(../img/clouds5.png) 0 50%;
	z-index:3;opacity: 0.9;
	
	-moz-animation:move-clouds-back 200s linear infinite;
	-ms-animation:move-clouds-back 200s linear infinite;
	-o-animation:move-clouds-back 200s linear infinite;
	-webkit-animation:move-clouds-back 200s linear infinite;
	animation:move-clouds-back 200s linear infinite;
}