@charset "iso-8859-1";

/* ============================================================= */
/* Effekte, Transitions, Animations */
/* ------------------------------------------------------------- */
/*
ENTWEDER
Element			(Vorteil: FireFox & Opera OK):
				{
				Anfangswerte setzten;
				transition: all 1s ease-in-out;
				}
Element:hover
				{
				Eigenschaft ändern;
				eventuell transform;
				}
ODER (2010.07 nur Safari/Webkit):
@-webkit-keyframes Effekt_Drehen {
				from {
					-webkit-transform: rotate(0deg);
				} to {
					-webkit-transform: rotate(360deg);
					}
				}
.circles:hover
				{
				-webkit-animation-name: Effekt_Drehen;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-timing-function: linear;
				-webkit-animation-duration: 10s;
				}

/*
@keyframes 'bounce' {
				from {
					top: 100px;
					animation-timing-function: ease-out;
					}
				25% {
					top: 50px;
					animation-timing-function: ease-in;
					}
				50% {
					top: 100px;
					animation-timing-function: ease-out;
					}
				75% {
					top: 75px;
					animation-timing-function: ease-in;
					}
				to {
					top: 100px;
					}
				}
*/
/* ------------------------------------------------------------- */

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

@-webkit-keyframes Effekt_TextLandung {
				from {
					text-shadow: 2em 2em .1em #aaa;
					-webkit-transform:	scale(1.2) translate(4em , -1em);
					opacity: 0.5;
					}
				to {
					text-shadow: none;
					opacity: 1.0;
					}
				}

@-webkit-keyframes Effekt_EinklappenLinks {
				from {
					-webkit-transform:	rotateY(70deg);
					-webkit-transform-origin: left center;
					}
				to {
					}
				}

@-webkit-keyframes Effekt_EinklappenVertikalMitte {
				from {
					-webkit-transform:	rotateY(0deg);
					-webkit-transform-origin: center center;
					}
				49% {
					-webkit-transform:	rotateY(-179deg);
					-webkit-transform-origin: center center;
					}
				50% {
					-webkit-transform:	rotateY(180deg);
					-webkit-transform-origin: center center;
					}
				100% {
					-webkit-transform:	rotateY(1deg);
					-webkit-transform-origin: center center;
					}
				}

@-webkit-keyframes Effekt_EinschiebenRechts {
				from {
					text-shadow: 2em 2em .1em #aaa;
					-webkit-transform:	scale(1.2) translate(4em , -1em);
					}
				to {
					text-shadow: none;
					}
				}


/* ------------------------------------------------------------- */

/*
.Effekt_TextLandung
				{
				/* transiton: change property slowly and smooth * /
				/* ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(N , N , N , N) * /
				transition-property: opacity, left;
				transition-duration: 2s, 4s;	/* Doesn't work with Firefox 3.6 * /
				transition-delay: 1s;	/* 1s 1000ms */
/*
				-webkit-transition:	all 1s ease-in-out;
				-moz-transition:	all 1s ease-in-out;
				-o-transition:		all 1s ease-in-out;
				transition:			all 1s ease-in-out;

				text-shadow: none;
				}
/*
.Effekt_TextLandung:hover
				{
				/* 2D transformations: Safari/Webkit 4.0, Firefox 3.5, Opera
				transform:
					rotate(45deg)
					skew(35deg)
					scale(1.45)
					translate(1em , 1em)
					; */
				/* 3D transformations: Safari/Webkit 4.0
				transform-origin:
				transform-style: flat | preserve-3d
				perspective-origin: 50% 50%
				backface-visibility: visible | hidden

				matrix3d(N , N , N , N , N , N , N , N , N , N , N , N , N , N , N , N)
				translate3d(X , Y , Z)
				translateX(N) translateY(N) translateZ(N)
				scale3d(X , Y , Z)
				scaleX(N) scaleY(N) scaleZ(N)
				rotate3d(X , Y , Z , 10deg)
				rotateX(10deg) rotateY(10deg) rotateZ(10deg)
				skew( Xdeg [, Ydeg])
				skewX(10deg) skewY(10deg)
				perspective: N /* 0=none low: starke Perspektive, 1000: nicht ausgeprägt
				* /

				-webkit-transform:	scale(1.2) translate(4em , -1em);
				-moz-transform:		scale(1.2) translate(4em , -1em);
				-o-transform:		scale(1.2) translate(4em , -1em);
				transform:			scale(1.2) translate(4em , -1em);

				text-shadow: 2em 2em .1em #aaa;
				/* H V radius color * /
				/* color H V radius * /
				}
*/

.Effekt_Schweben
				{
				/* ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(N,N,N,N) */
				-webkit-transition:	all 0.5s ease-in;
				-moz-transition:	all 0.5s ease-in;
				-o-transition:		all 0.5s ease-in;
				transition:			all 0.5s ease-in;
				}
.Effekt_Schweben:hover
				{
				/* 2D transformations: Safari/Webkit 4.0, Firefox 3.5, Opera
				transform:
					rotate(45deg)
					skew(35deg)
					scale(1.45)
					translate(1em , 1em)
					; */
				-webkit-transform:	translate(-4px , -4px);
				-moz-transform:		translate(-4px , -4px);
				-o-transform:		translate(-4px , -4px);
				transform:			translate(-4px , -4px);

				/* These Values need ! important, as they (can) override other classes */
				box-shadow:			3px 3px 3px #ccc ! important;	/* CSS3 */
				-webkit-box-shadow:	3px 3px 3px #ccc ! important;	/* Safari 3.1+ */
				-moz-box-shadow:	3px 3px 3px #ccc ! important;	/* FireFox 3.5+ */
				/* H V radius color */

				text-shadow: 3px 3px 3px #aaa ! important;
				/* H V radius color */
				/* color H V radius */
				}



/* ------------------------------------------------------------- */
.SedCard
				{
				-webkit-perspective: 1000;
				}
.SedCard .SeiteA5
				{
				-webkit-animation-name: Effekt_EinklappenVertikalMitte;
				-webkit-animation-iteration-count: 1;	/* infinite */
				-webkit-animation-timing-function: ease-in-out;
				-webkit-animation-duration: 4s;
				-webkit-animation-delay: 1s;
				}
/* ------------------------------------------------------------- */
/* HeaderAnimation */
@-webkit-keyframes Effekt_HinHer {
				from {
					left: 0;
					background-color: rgba(255,255,255, 0.4);
					}
				50% {
					left: 40%;
					background-color: rgba(255,255,255, 0.4);
					}
				99% {
					left: 0;
					background-color: rgba(255,255,255, 0.4);
					}
				to {
					left: 0;
					background-color: transparent;
					}
				}
/* ------------------------------------------------------------- */
@-webkit-keyframes Effekt_Schatten-wandert {
				from {
					-webkit-box-shadow:	7px 1px 7px #444;	/* Safari 3.1+ */
					box-shadow:			7px 1px 7px #333;	/* CSS3 */
					}
				40% {
					-webkit-box-shadow:	2px 6px 7px #444;	/* Safari 3.1+ */
					box-shadow:			2px 6px 7px #333;	/* CSS3 */
					}
				40% {
					-webkit-box-shadow:	0px 7px 7px #444;	/* Safari 3.1+ */
					box-shadow:			0px 7px 7px #333;	/* CSS3 */
					}
				60% {
					-webkit-box-shadow:	-2px 6px 7px #444;	/* Safari 3.1+ */
					box-shadow:			-2px 6px 7px #333;	/* CSS3 */
					}
				to {
					-webkit-box-shadow:	-7px 1px 7px #444;	/* Safari 3.1+ */
					box-shadow:			-7px 1px 7px #333;	/* CSS3 */
					}
				}
/* ============================================================= */



/* ============================================================= */
/*
article.LoadAnimation ,
.Effekt_TextLandung
				/* no state = runs immediately when the page is loaded * /
				{
				-webkit-animation-name: Effekt_TextLandung;
				-webkit-animation-iteration-count: 1;	/* infinite * /
				-webkit-animation-timing-function: ease-out;
				-webkit-animation-duration: 2s;
				-webkit-animation-delay: 1s;
				}
/* */

#MasterPane.LoadAnimation
				/* no state = runs immediately when the page is loaded */
				{
				-webkit-animation-name: Effekt_EinklappenLinks;
				-webkit-animation-iteration-count: 1;	/* infinite */
				-webkit-animation-timing-function: ease;
				-webkit-animation-duration: 1s;
				}

#LoginMenu.LoadAnimation ,
.Effekt_SchattenLang
				{
				-webkit-transition:	all 0.2s ease-in;
				-moz-transition:	all 0.2s ease-in;
				-o-transition:		all 0.2s ease-in;
				transition:			all 0.2s ease-in;
				}

#LoginMenu.LoadAnimation:hover ,
.Effekt_SchattenLang:hover
				{
				/* These Values need ! important, as thea (can) override other classes */
				box-shadow:			3px 3px 3px #ccc ! important;	/* CSS3 */
				-webkit-box-shadow:	3px 3px 3px #ccc ! important;	/* Safari 3.1+ */
				-moz-box-shadow:	3px 3px 3px #ccc ! important;	/* FireFox 3.5+ */

				text-shadow: 3px 3px 3px #aaa ! important;
				}

.HeaderAnimation.LoadAnimation > h1 ,
.HeaderAnimation.LoadAnimation > h2
				/* no state = runs immediately when the page is loaded */
				{
				-webkit-animation-name: Effekt_HinHer;
				-webkit-animation-timing-function: linear;
				-webkit-animation-iteration-count: 15;	/* infinite */
				-webkit-animation-duration: 20s;
				-webkit-animation-delay: 1s;
				}
.HeaderAnimation.LoadAnimation > h2
				/* no state = runs immediately when the page is loaded */
				{
				-webkit-animation-iteration-count: 10;	/* infinite */
				-webkit-animation-duration: 30s;
				-webkit-animation-delay: 1.5s;
				}
/* ============================================================= */
/*
Schatten Animation:



/* ============================================================= */