/* 
    Document   : animations
    Created on : Jul 18, 2013, 10:54:51 AM
    Author     : michal.dyro
    Description:
        this CSS file should contain definitions of all css animations' frames used in the game.
*/

@-webkit-keyframes balance { 
	0% {} 
	15% { -webkit-transform: rotateX(-20deg) skewX(-2deg); transform:  rotateX(-20deg) skewX(-2deg); }
	30% { -webkit-transform: rotateX(20deg)  skewX(2deg); transform:  rotateX(20deg)  skewX(2deg); }
	45% { -webkit-transform: rotateX(-10deg) skewX(-1deg); transform:  rotateX(-10deg) skewX(-1deg); }
	60% { -webkit-transform: rotateX(10deg) skewX(1deg); transform:  rotateX(10deg) skewX(1deg);}
	75% { -webkit-transform: rotateX(-10deg) skewX(-1deg); transform:  rotateX(-10deg) skewX(-1deg); }
	100% { -webkit-transform: rotateX(0deg) skewX(0deg); transform:  rotateX(0deg) skewX(0deg); }
}

@-moz-keyframes balance { 
	0% {}
	15% { -moz-transform: rotateX(-20deg) skewX(-2deg); transform:  rotateX(-20deg) skewX(-2deg); }
	30% { -moz-transform: rotateX(20deg)  skewX(2deg); transform:  rotateX(20deg)  skewX(2deg); }
	45% { -moz-transform: rotateX(-10deg) skewX(-1deg); transform:  rotateX(-10deg) skewX(-1deg); }
	60% { -moz-transform: rotateX(10deg) skewX(1deg); transform:  rotateX(10deg) skewX(1deg);}
	75% { -moz-transform: rotateX(-10deg) skewX(-1deg); transform:  rotateX(-10deg) skewX(-1deg); }
	100% { -moz-transform: rotateX(0deg) skewX(0deg); transform:  rotateX(0deg) skewX(0deg); }
}

@keyframes balance { 
	0% {} 
	15% { -webkit-transform: rotateX(-20deg) skewX(-2deg); transform:  rotateX(-20deg) skewX(-2deg); }
	30% { -webkit-transform: rotateX(20deg)  skewX(2deg); transform:  rotateX(20deg)  skewX(2deg); }
	45% { -webkit-transform: rotateX(-10deg) skewX(-1deg); transform:  rotateX(-10deg) skewX(-1deg); }
	60% { -webkit-transform: rotateX(10deg) skewX(1deg); transform:  rotateX(10deg) skewX(1deg);}
	75% { -webkit-transform: rotateX(-10deg) skewX(-1deg); transform:  rotateX(-10deg) skewX(-1deg); }
	100% { -webkit-transform: rotateX(0deg) skewX(0deg); transform:  rotateX(0deg) skewX(0deg); }
}

@-webkit-keyframes teaserLoader {
	0% {
		width: 0;
	}
	100% {
		width: 26px;
	}
}
@-moz-keyframes teaserLoader {
	0% {
		width: 0;
	}
	100% {
		width: 26px;
	}
}
@-o-keyframes teaserLoader {
	0% {
		width: 0;
	}
	100% {
		width: 26px;
	}
}
@keyframes teaserLoader {
	0% {
		width: 0;
	}
	100% {
		width: 26px;
	}
}


@media (max-height: 900px) {
	div.tw2gui_dialog .tw2gui_dialog_character {
		display: none;
	}
}
@media (max-width: 1350px), (max-height: 850px) {
	.inventory:not(.expanded) .bag_resize {
		display: none;
	}
}

/*
 * Fade Out-In
 */
@-webkit-keyframes fadeOutIn{
	0% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-moz-keyframes fadeOutIn {
	0% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes fadeOutIn {
	0% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/*
 * Fade In-Out
 */
@-webkit-keyframes fadeInOut{
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-moz-keyframes fadeInOut {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeInOut {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*
 * blinkblink
 */
@-webkit-keyframes blinkBlink{
	0%, 40%, 50%, 60%, 100% {
		opacity: 1;
	}
	45%, 55%{
		opacity: 0;
	}
}
@-moz-keyframes blinkBlink {
	0%, 40%, 50%, 60%, 100% {
		opacity: 1;
	}
	45%, 55%{
		opacity: 0;
	}
}
@keyframes blinkBlink {
	0%, 40%, 50%, 60%, 100% {
		opacity: 1;
	}
	45%, 55%{
		opacity: 0;
	}
}


/**
 * MPI timeline animations
 */
@-webkit-keyframes activeGlow{
	0%, 100% {
		box-shadow: inset 0 0 4px, 0 0 4px #c18b21;
	}
	55%{
		box-shadow: inset 0 0 15px, 0 0 25px #c18b21;
	}
}
@-moz-keyframes activeGlow {
	0%, 100% {
		box-shadow: inset 0 0 4px, 0 0 4px #c18b21;
	}
	55%{
		box-shadow: inset 0 0 15px, 0 0 25px #c18b21;
	}
}
@keyframes activeGlow {
	0%, 100% {
		box-shadow: inset 0 0 4px, 0 0 4px #c18b21;
	}
	55%{
		box-shadow: inset 0 0 15px, 0 0 25px #c18b21;
	}
}

/**
 * MPI timeline animations
 */
@-webkit-keyframes bangBang{
	0%{
		box-shadow: 0 0 1px 1px transparent;
	}
	30%{
		box-shadow: 0 0 15px 5px;
	}
	100% {
		box-shadow: 0 0 25px 10px transparent;
	}
}
@-moz-keyframes bangBang {
	0%{
		box-shadow: 0 0 0 0 transparent;
	}
	30%{
		box-shadow: 0 0 15px 5px;
	}
	100% {
		box-shadow: 0 0 25px 10px transparent;
	}
}
@keyframes bangBang {
	0%{
		box-shadow: 0 0 0 0 transparent;
	}
	30%{
		box-shadow: 0 0 15px 5px;
	}
	100% {
		box-shadow: 0 0 25px 10px transparent;
	}
}

@-webkit-keyframes puff {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(3,3,1);
		transform: scale3d(3,3,1);
	}
}
@-moz-keyframes puff {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-moz-transform: scale3d(3,3,1);
		transform: scale3d(3,3,1);
	}
}
@-o-keyframes puff {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-o-transform: scale3d(3,3,1);
		transform: scale3d(3,3,1);
	}

}
@keyframes puff {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale3d(3,3,1);
	}
}


/*
 * veteran rewards
 */
@-webkit-keyframes veteranRewards{
	0%{
		bottom: 0;
		opacity: 0;
	}
	30%, 60%{
		bottom: 100%;
		opacity: 1;
	}
	100% {
		opacity: 0;
		bottom: 90%;
	}
}
@-moz-keyframes veteranRewards {
	0%{
		bottom: 0;
		opacity: 0;
	}
	30%, 60%{
		bottom: 100%;
		opacity: 1;
	}
	100% {
		opacity: 0;
		bottom: 90%;
	}
}
@keyframes veteranRewards {
	0%{
		bottom: 0;
		opacity: 0;
	}
	30%, 60%{
		bottom: 100%;
		opacity: 1;
	}
	100% {
		opacity: 0;
		bottom: 90%;
	}
}


.animate .puff {
	opacity: 0;
	-webkit-animation: puff 1.3s ease-out 1;
	-moz-animation: puff 1.3s ease-out 1;
	-o-animation: puff 1.3s ease-out 1;
	animation: puff 1.3s ease-out 1;
}