/*----------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------
Neon Sky Creative Media :: LG CSS :: Loader Styles
Version: 2.4.0
Last Modified: 2010.05.10 by Jpg

Contains:

<div>
	<div>
	</div>
</div>
------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------- */

/*----------------------------------------------------------
=Loader
------------------------------------------------------------*/
#slideloader{
	position:absolute;
	top: 50%;
	left: 50%;
	-webkit-transition-property: opacity;
  	-webkit-transition-duration: 0.3s;
  	-webkit-animation-timing-function: ease;
	-webkit-transform:scale(0.5);

	-moz-transition-property: opacity;
  	-moz-transition-duration: 0.3s;
  	-moz-animation-timing-function: ease;
	-moz-transform:scale(0.5);
	  	
  	z-index: 5;
  	opacity: 1;
}

#slideloader.op-in {
	opacity: 1;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
}

#slideloader.op-out {
	opacity: 0;
	-webkit-transition-duration: 0s;
	-moz-transition-duration: 0s;
}


#dataloader{
	position:absolute;
	top: 50%;
	left: 50%;
	-webkit-transition-property: opacity;
  	-webkit-transition-duration: 0.3s;
  	-webkit-animation-timing-function: ease;
	-webkit-transform:scale(0.5) translate(0px,0px);
	
	-moz-transition-property: opacity;
  	-moz-transition-duration: 0.3s;
  	-moz-animation-timing-function: ease;
	-moz-transform:scale(0.5) translate(0px,0px);	
 
  	z-index: 1;
  	opacity: 1;
}

#dataloader.op-in {
	opacity: 1;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
}

#dataloader.op-out {
	opacity: 0;
	-webkit-transition-duration: 0.05s;
	-moz-transition-duration: 0.05s;
}
.animation{
	position:absolute;
	top: -50px;
	left: -50px;
 	width:100px;
  	height:100px;  
}

.spinner {
  position:absolute;
  width:100px;
  height:100px;
  margin:auto;
  top:0px;
  left:0px;
  
  -webkit-animation-name: spinMe;
  -webkit-animation-duration:.95s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  
  -moz-animation-name: spinMe2;
  -moz-animation-duration:.95s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;  
}

/* background colr/alpha  set dynamically in the styles_view */
.spinner div {
  width:12px;
  height:30px;
  position:absolute;
  top:35px;
  left:44px;   

  -webkit-border-radius:11px;
  -moz-border-radius:11px;
  /* -webkit-box-shadow:rgba(50,50,50,0.65) 0 0 5px; */
}

/* 
	position the bars and balls correctly (rotate them and translate them outward)	
*/

.spinner div.bar1 {
  -moz-transform:rotate(30deg) translate(0, -40px);
  -webkit-transform:rotate(30deg) translate(0, -40px);
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
}

.spinner div.bar2 {
  -moz-transform:rotate(60deg) translate(0, -40px);
  -webkit-transform:rotate(60deg) translate(0, -40px);
  -webkit-animation-delay: -0.875s;
  -moz-animation-delay: -0.875s;
    
}

.spinner div.bar3 {
  -moz-transform:rotate(90deg) translate(0, -40px);
  -webkit-transform:rotate(90deg) translate(0, -40px);
  -webkit-animation-delay: -0.75s;
  -moz-animation-delay: -0.75s;
  
}
.spinner div.bar4 {
  -moz-transform:rotate(120deg) translate(0, -40px);
  -webkit-transform:rotate(120deg) translate(0, -40px);
  -webkit-animation-delay: -0.625s;
  -moz-animation-delay: -0.625s;
}

.spinner div.bar5 {
  -moz-transform:rotate(150deg) translate(0, -40px);
  -webkit-transform:rotate(150deg) translate(0, -40px);
  -webkit-animation-delay: -0.5s; 
	-moz-animation-delay: -0.5s; 
}

.spinner div.bar6 {
  -moz-transform:rotate(180deg) translate(0, -40px);
  -webkit-transform:rotate(180deg) translate(0, -40px);
  -webkit-animation-delay: -0.375s; 
 -moz-animation-delay: -0.375s; 
}

.spinner div.bar7 {
  -moz-transform:rotate(210deg) translate(0, -40px);
  -webkit-transform:rotate(210deg) translate(0, -40px);
 -webkit-animation-delay: -0.25s;
 -moz-animation-delay: -0.25s;
  
}

.spinner div.bar8 {
  -moz-transform:rotate(240deg) translate(0, -40px);
  -webkit-transform:rotate(240deg) translate(0, -40px);
  -webkit-animation-delay: -0.125s;
-moz-animation-delay: -0.125s;
}

.spinner div.bar9 {
  -moz-transform:rotate(270deg) translate(0, -40px);
  -webkit-transform:rotate(270deg) translate(0, -40px);
  -webkit-animation-delay: -0.125s;
 -moz-animation-delay: -0.125s;
}

.spinner div.bar10 {
  -moz-transform:rotate(300deg) translate(0, -40px);
  -webkit-transform:rotate(300deg) translate(0, -40px);
  -webkit-animation-delay: -0.125s;
-moz-animation-delay: -0.125s;
}

.spinner div.bar11 {
  -moz-transform:rotate(330deg) translate(0, -40px);
  -webkit-transform:rotate(330deg) translate(0, -40px);
  -webkit-animation-delay: -0.125s;
-moz-animation-delay: -0.125s;
}

.spinner div.bar12 {  
  -webkit-transform:rotate(0deg) translate(0, -40px);
  -webkit-animation-delay: -0.125s;
  
	-moz-transform:rotate(0deg) translate(0, -40px);
	-moz-animation-delay: -0.125s;
}


/*divided 100/12, may want to do 11 for better 'turn' */
@-webkit-keyframes spinMe {
	0% {-webkit-transform:scale(0.5) rotate(0deg);}
	9.1% {-webkit-transform:scale(0.5) rotate(0deg);}
	9.11% {-webkit-transform:scale(0.5) rotate(30deg);}
	18.2% {-webkit-transform:scale(0.5) rotate(30deg);}
	18.21% {-webkit-transform:scale(0.5) rotate(60deg);}
	27.3% {-webkit-transform:scale(0.5) rotate(60deg);}
	27.31% {-webkit-transform:scale(0.5) rotate(90deg);}
	36.4% {-webkit-transform:scale(0.5) rotate(90deg);}
	36.41% {-webkit-transform:scale(0.5) rotate(120deg);}
	45.5% {-webkit-transform:scale(0.5) rotate(120deg);}
	45.51% {-webkit-transform:scale(0.5) rotate(150deg);}
	54.6% {-webkit-transform:scale(0.5) rotate(150deg);}
	54.61% {-webkit-transform:scale(0.5) rotate(180deg);}
	63.7% {-webkit-transform:scale(0.5) rotate(180deg);}
	63.71% {-webkit-transform:scale(0.5) rotate(210deg);}
	72.8% {-webkit-transform:scale(0.5) rotate(210deg);}
	72.81% {-webkit-transform:scale(0.5) rotate(240deg);}
	81.9% {-webkit-transform:scale(0.5) rotate(240deg);}	
	81.91% {-webkit-transform:scale(0.5) rotate(270deg);}
	91% {-webkit-transform:scale(0.5) rotate(270deg);}
	91.01% {-webkit-transform:scale(0.5) rotate(300deg);}
	99.3% {-webkit-transform:scale(0.5) rotate(300deg);}		
	99.31% {-webkit-transform:scale(0.5) rotate(330deg);}
	100% {-webkit-transform:scale(0.5) rotate(330deg);}
}

@-moz-keyframes spinMe2 {
	0% {-moz-transform:scale(0.5) rotate(0deg);}
	9.1% {-moz-transform:scale(0.5) rotate(0deg);}
	9.11% {-moz-transform:scale(0.5) rotate(30deg);}
	18.2% {-moz-transform:scale(0.5) rotate(30deg);}
	18.21% {-moz-transform:scale(0.5) rotate(60deg);}
	27.3% {-moz-transform:scale(0.5) rotate(60deg);}
	27.31% {-moz-transform:scale(0.5) rotate(90deg);}
	36.4% {-moz-transform:scale(0.5) rotate(90deg);}
	36.41% {-moz-transform:scale(0.5) rotate(120deg);}
	45.5% {-moz-transform:scale(0.5) rotate(120deg);}
	45.51% {-moz-transform:scale(0.5) rotate(150deg);}
	54.6% {-moz-transform:scale(0.5) rotate(150deg);}
	54.61% {-moz-transform:scale(0.5) rotate(180deg);}
	63.7% {-moz-transform:scale(0.5) rotate(180deg);}
	63.71% {-moz-transform:scale(0.5) rotate(210deg);}
	72.8% {-moz-transform:scale(0.5) rotate(210deg);}
	72.81% {-moz-transform:scale(0.5) rotate(240deg);}
	81.9% {-moz-transform:scale(0.5) rotate(240deg);}	
	81.91% {-moz-transform:scale(0.5) rotate(270deg);}
	91% {-moz-transform:scale(0.5) rotate(270deg);}
	91.01% {-moz-transform:scale(0.5) rotate(300deg);}
	99.3% {-moz-transform:scale(0.5) rotate(300deg);}		
	99.31% {-moz-transform:scale(0.5) rotate(330deg);}
	100% {-moz-transform:scale(0.5) rotate(330deg);}
}