@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Aldrich);
@import url(http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,600);


/* Copyright (c) Michel Kindermann, 47475 Kamp- Lintfort, Germany */


/*@font-face {
    font-family: bankgthd;
    src: url('fonts/bankgthd.ttf');
}*/

*{
	padding: 0px; /* Innenabstände *//* oben-rechts-unten links*/
	margin: 0px; /* Aussenabstände *//* oben-rechts-unten links*/
	outline: none;
}

body {	/*  ausserhalb des body ist der Selektor html zuständig */
/*	position: absolute;		top: 10px; left: 50px;	right: 50px; bottom: 50px;	*/
	width: 950px;		/*min-width: 950px;	max-width: 1600px;		*/
	height: 640px;		/*min-height:	600px;	max-height: 1200px;	*/
	margin: 20px auto; /* oben-rechts-unten links*/
	font-family: 'Aldrich', sans-serif;
	font-family: 'Lucida Grande', 'Droid Sans', Arial, Sans;
	font-family: 'Cabin Sketch', cursive;
	background: #F0F0F0;
/*	border: 1px solid;	*/

/*	background-image: url(../base_img/bg_transparent.png); /* zum schutz transparent über Logo legen*/
/*	opacity: 0.9;
/*	filter: alpha(opacity = 75); /* IE 6, 7, 8 */
/*	-ms-filter: "alpha(opacity = 75)"; /* ab IE 8 zusätzlich möglich */
/*	opacity: .75; /* alle anderen Browser einschließlich IE 9 */
}

.deselect ::selection { background: transparent; color: inherit;	}
.deselect ::-moz-selection {  background: transparent; color: inherit;	}
.deselect { -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; user-select: none;	}


/* zeigt die AREA im HTML an */
/*area{display:inline; margin-left:10px; border:1px solid #ff0000;} */


#code	{
	background-image:url(../base_img/code.png);
	background-size: 50px 50px;		position: absolute; top: 10px; right: 10px;
	width: 50px; height: 50px;
	animation: bounceIn 4s;
	animation-fill-mode: backwards;		/*	backwards= wartet am ersten frame// forwards= am letzten// both; none;*/
	animation-delay: 3s; 	/*	verzoegert starten	*/
	animation-duration: 2s;		-webkit-animation-duration: 2s;	
	animation-name: bounceIn;	-webkit-animation-name: bounceIn;
	z-index: 10;
	-webkit-transition: background-size 1s ease .5s, width 1s ease .5s, height 1s ease .5s;
	-moz-transition: background-size 1s ease .5s, width 1s ease .5s, height 1s ease .5s;
	-o-transition: background-size 1s ease .5s, width 1s ease .5s, height 1s ease .5s;
	transition: background-size 1s ease .5s, width 1s ease .5s, height 1s ease .5s;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;	/*	drehachse festlegen	*/

/* linear, ease, ease-in, ease-in-out, ease-out; step-start; step-end;	*/
}
@keyframes bounceIn {	/* 0% bis 100%	*/
 0% { transform: scale(0.1); opacity: 0; } 100% { transform: scale(1.0); opacity: 1; }}

@-webkit-keyframes bounceIn	{	
 0% { transform: scale(0.1); opacity: 0; } 100% { transform: scale(1.0); opacity: 1; }}


/*animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] 
[animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state]; */

#code:hover	{
	display: block;		cursor: none;	/* cursor: crosshair..default --- ändert den Cursor */
	background-image:url(../base_img/code.png);
	width: 100px; height: 100px;	background-size: 100px 100px;	
}

#anordnung	{   /* Hintergrund nur zum anordnen_work der HP	*/
	position: absolute;
	width: 950px; height: 640px;
	border-color: #000000;
/*	border: solid 1px;	*/
	z-index: 10;	}

#kopfbereich {
	cursor: default;	/* cursor: crosshair..default --- ändert den Cursor */
	position: absolute;
	top: -2px; left: 0px;
	width: 950px; height: 35px; /* original größe 950 x 35 */
	font-family:  Sans, Arial;
	color: #CCCCCC;
	background-color: #F0F0F0;
	z-index: 1;
	background-image: url(../base_img/grau.jpg);	}

#copyright {
	position: absolute;
	font-size: 12px;
	font-weight: lighter;
	margin: 10px 0 0 110px;
    color: #CCCCCC;	opacity: 0.4;
    text-shadow: 0 -0.5px 0.5px #666666, 0 0.5px 0.5px #FFFFFF;		}
	
#aquarium {
	position:absolute;	width: 950px;	min-height: 500px; max-height: 900px;	}/*height: 640px;	*/

#bg_1, #bg_2, #bg_3, #bg_4, #bg_5, #bg_6, #bg_7, #bg_8, #bg_9, #bg_10 { position: absolute;
background-size: 950px 40px;	background-repeat:no-repeat;width:	950px; height: 40px; 	}

#bg_1{padding-top:  82px; background-image:  url(../base_img/bg/bg_1.jpg); background-position: 0px  82px; }
#bg_2{padding-top: 122px; background-image:  url(../base_img/bg/bg_2.jpg); background-position: 0px 122px; }
#bg_3{padding-top: 162px; background-image:  url(../base_img/bg/bg_3.jpg); background-position: 0px 162px; }
#bg_4{padding-top: 202px; background-image:  url(../base_img/bg/bg_4.jpg); background-position: 0px 202px; }
#bg_5{padding-top: 242px; background-image:  url(../base_img/bg/bg_5.jpg); background-position: 0px 242px; }
#bg_6{padding-top: 282px; background-image:  url(../base_img/bg/bg_6.jpg); background-position: 0px 282px; }
#bg_7{padding-top: 322px; background-image:  url(../base_img/bg/bg_7.jpg); background-position: 0px 322px; }
#bg_8{padding-top: 362px; background-image:  url(../base_img/bg/bg_8.jpg); background-position: 0px 362px; }
#bg_9{padding-top: 402px; background-image:  url(../base_img/bg/bg_9.jpg); background-position: 0px 402px; }
#bg_10{padding-top:442px; background-image: url(../base_img/bg/bg_10.jpg); background-position: 0px 442px; }

	
#workplace	{
	position: absolute; top: 50px; left: 50px;
	background-image:url(../base_img/work.png);
	background-repeat: no-repeat;
	background-size: 100%;		
	width: 300px; height: 25%;	
	z-index: 10;
	opacity: 0.8;	
	-moz-opacity: 0.8;  /* FireFox */
	filter: alpha(opacity=80); /* IE */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);}
	
#hd	{
	position: absolute; top: 10px; left: 10px;
	background-image: url(../base_img/HD.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 40px; height: 40px;	
	opacity: 0.6;	
	-moz-opacity: 0.6;  /* FireFox */
	filter: alpha(opacity=60); /* IE */
	z-index: 2;
}

#hd:hover + #zoom	{    display: block;   }

#zoom {		display: none;
	position: absolute; top: 50px; left: 50px;
	background-image: url(../base_img/zoom.jpg);
	background-repeat: no-repeat;
	background-size: 30px auto;
	width: 30px; height: 25px;     }

#flash {
	position:absolute;
	width: 100px;
	height: 35px;
	background-color: #F0F0F0;
	margin: 2px;	}


#auge_bling  {   position: absolute; top: 224px; left: 595px;
    width: 10px; height: 10px;
    background-color: black;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
	animation: bling 4s;
	animation-fill-mode: backwards;		/*	backwards= wartet am ersten frame// forwards= am letzten// both; none;*/
	animation-delay: 3s; 	/*	verzoegert starten	*/
	animation-duration: 8s;		-webkit-animation-duration: 8s;	
	animation-name: bling;	-webkit-animation-name: bling;
	z-index: 10;
    animation-iteration-count: infinite;  		/*  Anzahl der Wiederholungen	*/
	-webkit-animation-iteration-count: infinite;  		
	animation-direction: alternate;		/* bei @keyframe ..läuft es hin und wieder zurück	*/
	-webkit-animation-direction: alternate;	
	}


@keyframes bling {	
 0% { transform: scale(0.1); }  98% { transform: scale(0.1) }   100% { transform: scale(2) }}


@-webkit-keyframes bling    {	
 0% { transform: scale(0.1); }  98% { transform: scale(0.1) }   100% { transform: scale(2) }}





#test_shapes {
	width: 200px;
	height: 200px;
    position: absolute; top: 200px; left: 400px;
  border: 3px solid;
	background: #1e90ff;
    z-index: 10;
	-webkit-clip-path: polygon(0 15%, 40% 0, 77% 0, 100% 23%, 100% 61%, 42% 47%, 79% 88%, 59% 93%, 19% 100%, 0 72%);
clip-path: polygon(0 15%, 40% 0, 77% 0, 100% 23%, 100% 61%, 42% 47%, 79% 88%, 59% 93%, 19% 100%, 0 72%);
}

/* Center the demo 
html, body { height: 100%; }
body {
	display: flex;
	justify-content: center;
	align-items: center;
}
*/


#quad_smal	{
	position: absolute;
	top: 299px; left: 300px;
	font-family: 'Aldrich', sans-serif;
    color: #666666;
	word-spacing: -9px;
/*  text-shadow: 0 -1px 1px #FFFFFF, 0 0.5px 1px #666666;
/*	text-shadow:  1px 1px #000000; /* x-.y-.weichzeichnung-blar*/
    text-shadow: 0.4px 0px #666666;
	font-size: 12px;
	letter-spacing: 3.1px;
	font-variant: small-caps;
	font-weight: bolder;       }

#quad_grey	{
	position: absolute;
	top: 390px; left: 181px;
	font-family: 'Aldrich', sans-serif;
    color: #cccccc;
	word-spacing: -18px;
    text-shadow: 0.4px 0px #CCCCCC;
	font-size: 25px;
	letter-spacing: 6px;
	font-variant: small-caps;
	font-weight: bolder;       }

#blase_1, #blase_2, #blase_3, #blase_4	{
	position: absolute;
	animation-name: pulse;		-webkit-animation-name: pulse;		/* Name -pulse- */
	animation-duration: 2s;		-webkit-animation-duration: 2s;	
	-webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;  	 /*  Anzahl der Wiederholungen	*/
/*	-webkit-animation-fill-mode: both;
/*  animation-fill-mode: both;					/*	backwards= steht vor "delay" erster Frame und forwards= steht letzter Frame/ both= beide*/
	background-image:url(../base_img/blasen.png);
	background-repeat:no-repeat;
	background-size: 100%;	
	z-index: 5;
	-webkit-transition: all 0.7s ease; transition: all 0.7s ease; /*zurücksetzung*/
/*	transition-timing-function: ease	*/
}

#blase_2, #blase_4	{	animation-delay: 0.5s; -webkit-animation-delay: 0.5s;	/*	verzoegert starten	*/	}

#blase_1 {
	width: 20px; height: 20px;		top: 60px; left: 560px;
	border-radius: 10px;	box-shadow:  0 0 1px #33FF00 inset;  /* inset =heißt nach innen */
	opacity: 0.5;	/*moderne browser */
	-moz-opacity: 0.5;  /* FireFox */
	filter: alpha(opacity=50); /* IE5.x -7.0*/
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 in Standard Compliant Mode */  
}

#blase_2 {
	width: 30px; height: 30px;		top: 90px; left: 600px;
	border-radius: 15px;	box-shadow:  0 0 1px #33FF00 inset;  /* inset =heißt nach innen */
	opacity: 0.5;	/*moderne browser */
	-moz-opacity: 0.5;  /* FireFox */
	filter: alpha(opacity=50); /* IE5.x -7.0*/
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 in Standard Compliant Mode */  
}

#blase_3 {
	width: 40px; height: 40px;		top: 140px; left: 600px;
	border-radius: 20px;	box-shadow: 0 0 2px #33FF00 inset;  /* inset =heißt nach innen */
	opacity: 0.7;	/*moderne browser */
	-moz-opacity: 0.7;  /* FireFox */
	filter: alpha(opacity=70); /* IE5.x -7.0*/
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE8 in Standard Compliant Mode */  
}

#blase_4 {	
	width: 50px; height: 50px;		top: 190px; left: 640px;
	border-radius: 25px;	box-shadow: 0 0 3px #33FF00 inset;  /* inset =heißt nach innen */
	opacity: 0.8;	/*moderne browser */
	-moz-opacity: 0.8;  /* FireFox */
	filter: alpha(opacity=80); /* IE5.x -7.0*/
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE8 in Standard Compliant Mode */  
}

#blase_1:hover, #blase_2:hover, #blase_3:hover, #blase_4:hover  {
	-webkit-transform:scale(0.7); transform:scale(0.7);
	opacity: 0.5;	/*moderne browser */
	-moz-opacity: 0.5;  /* FireFox */
	filter: alpha(opacity=50); /* IE5.x -7.0*/
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 in Standard Compliant Mode */  
	z-index: 5;
}

@-webkit-keyframes pulse {
  0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); }
100% {-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);  }}


@keyframes pulse {	/* 0% bis 100%	*/
  0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); }
100% {-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);  }}



#fischmenu {  /* "punkt = class" ; # = div */
	position: absolute; 	top:0px; left: 0px;
	width: 950px; height: 350px; /*original 1780 x 800*/
/*	background-image: url(../base_img/bg_transparent.png); /* zum schutz transparent über Logo legen*/
}

#bg_menu	{
	position: absolute;		top:142px; left: 222px;
	width: 445px; height: 200px; /*original 1780 x 800*/	}
	

#fmbg_1, #fmbg_2, #fmbg_3, #fmbg_4, #fmbg_5, #fmbg_6, #fmbg_7, #fmbg_8	 {
 	position: absolute;		background-position: 0px   0px; 	width:	445px; height: 25px;
	background-size: 445px 25px;	background-repeat:no-repeat;	}

#fmbg_1{top: 0px; left: 0px; background-image:  url(../base_img/fish/f_1.jpg); }
#fmbg_2{top: 25px; left: 0px; background-image:  url(../base_img/fish/f_2.jpg); }
#fmbg_3{top: 50px; left: 0px; background-image:  url(../base_img/fish/f_3.jpg); }
#fmbg_4{top: 75px; left: 0px; background-image:  url(../base_img/fish/f_4.jpg); }
#fmbg_5{top: 100px; left: 0px; background-image:  url(../base_img/fish/f_5.jpg); }
#fmbg_6{top: 125px; left: 0px; background-image:  url(../base_img/fish/f_6.jpg); }
#fmbg_7{top: 150px; left: 0px; background-image:  url(../base_img/fish/f_7.jpg); }
#fmbg_8{top: 175px; left: 0px; background-image:  url(../base_img/fish/f_8.jpg); }



.panzerlinie_1  { /* schwarze Linie zum airsoft-team */
	position: absolute; top: 82px; left: -130px; /*	position: absolute; top: 111px; left: 510px; */
	width: 146px;	height: 0;
	border-top: 1px solid black;
/*	border-bottom: 0.5px solid #333333; /* #999999, #333333 */
	-moz-transform:rotate(-51.6deg); /* Firefox 3.6 Firefox 4 */
	-webkit-transform:rotate(-51.6deg); /* Safari */
	-o-transform:rotate(-51.6deg); /* Opera */
	-ms-transform:rotate(-51.6deg); /* IE9 */
	transform:rotate(-51.6deg); /* W3C */	
	-webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; /* leichtigkeit = ease-in-out */
	z-index: 3;
}

.panzerlinie_1_text {
	position: absolute; top: 25px; left: -12px; /* 	position: absolute; top: 54px; left: 628px; */
	width: 202px; height: 0;
	border-top: 1px solid black;
/*	border-bottom: 0.5px solid #333333; */
	-webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; /* leichtigkeit = ease-in-out */
	z-index: 3;
}

.panzerlinie_2  {	/* schwarze Linie zur story */
	position: absolute; top: -22px; left: -163px; /* 	position: absolute; top: 285px; left: 595px; */
	width: 168px;	height: 0;
	border-top: 1px solid black;
	-moz-transform:rotate(34.6deg); /* Firefox 3.6 Firefox 4 */
	-webkit-transform:rotate(34.6deg); /* Safari */
	-o-transform:rotate(34.6deg); /* Opera */
	-ms-transform:rotate(34.6deg); /* IE9 */
	transform:rotate(34.6deg); /* W3C */
	-webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; /* leichtigkeit = ease-in-out */
	z-index: 3;
}

.panzerlinie_2_text {
	position: absolute; top: 26px; left: -10px; /*	position: absolute; top: 332px; left: 745px; */
	width: 90px; height: 0;
	border-top: 1px solid black;
	-webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; /* leichtigkeit = ease-in-out */
	z-index: 3;
}

.panzerlinie_3  {	/* schwarze Linie zum project */
	Position: absolute; top: -17px; left: 107px; /*	Position: absolute; top: 253px; left: 147px; */
	width: 202px;	height: 0;
	border-top: 1px solid black;
	-moz-transform:rotate(-24.6deg); /* Firefox 3.6 Firefox 4 */
	-webkit-transform:rotate(-24.6deg); /* Safari */
	-o-transform:rotate(-24.6deg); /* Opera */
	-ms-transform:rotate(-24.6deg); /* IE9 */
	transform:rotate(-24.6deg); /* W3C */
	-webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; /* leichtigkeit = ease-in-out */
	z-index: 3;
}

.panzerlinie_3_text {
	position: absolute; top: 25px; left: -5px; /* 	position: absolute; top: 295px; left: 40px; */
	width: 122px; height: 0;
	border-top: 1px solid black;
	-webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; /* leichtigkeit = ease-in-out */
	z-index: 3;
}
/*	die gruenen Panzer und das Auge	*/
.panzer_ob, .auge, .panzer_un_li, .panzer_un_re	{
	position: absolute;
	background-repeat:	no-repeat;
	opacity: 0.05;	
	-moz-opacity: 0.05;  /* FireFox */
	filter: alpha(opacity=5); /* IE */
	-webkit-transition: all 0.7s ease; transition: all 0.7s ease; /*zurücksetzung*/
	z-index: 0;
/*	border: 1px solid;	*/
}

.panzer_ob {
	top: 115px; left: -213px; /*top: 117px; left: -214px; */
	width: 175px;	height: 60px;	/* 50% = 170x55 ; orig 340 x 110 */
	background-image: url(../base_img/panz_ob.jpg);
	background-size: 175px auto;	
}
.auge	{
	top: -102px; left: -182px; /* top: -101px; left: -177px;*/
	width: 50px;	height: 45px; 	/* 50% = 50x45 ;orig 100 x 90 */
	background-image: url(../base_img/auge.jpg);
	background-size: 50px auto;	
}
.panzer_un_li	{
	top: -90px; left: 245px; /* top: -87px; left: 247px;*/
	width: 98px;	height: 94px; 	/* 50% = 100x90 ;orig 190 x 180  */
	background-image: url(../base_img/panz_un_li.jpg);
	background-size: 103px auto;	
}
.panzer_un_re	{
	top: -58px; left: 343px; /* top: -87px; left: 247px;*/
	width: 181px;	height: 42px; 	/* 50% = 180x40 ;orig 360 x 80 = 47,222% */
	background-image: url(../base_img/panz_un_re.jpg);
	background-size: 181px auto;	
}

a:hover span.panzerlinie_1, a:hover span.panzerlinie_1_text,
a:hover span.panzerlinie_2, a:hover span.panzerlinie_2_text,
a:hover span.panzerlinie_3, a:hover span.panzerlinie_3_text		{
	box-shadow:  0 0 6px #66FF00, 0 0 6px #33FF00;
	-webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; /* leichtigkeit = ease-in-out */
}

a:hover span.panzer_ob,	a:hover span.panzer_un_li,	a:hover span.panzer_un_re	{
	display: block;
	opacity: 1;
	z-index: 0;    }

a:hover span.auge	{
	display: block;
	opacity: 1;
	z-index: 0;    }


a.fish_1, a.fish_2, a.fish_3 {
	font-family: 'Aldrich', sans-serif;
	color: #000000;
	position: absolute;
	text-decoration: none;
/*  text-shadow: 0 -1px 1px #FFFFFF, 0 0.5px 1px #666666;
/*	text-shadow:  1px 1px #000000; /* x-.y-.weichzeichnung-blar*/
    text-shadow: 0.4px 0px #000000, 0 -2px 1px #FFFFFF, 0 0.5px 1px #666666;
	font-size: 20px;
	letter-spacing: 4.2px;
	font-variant: small-caps;
	font-weight: bolder;
	-webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; /* leichtigkeit = ease-in-out */
}

a.fish_1 { 	top: 29px; left: 640px;  word-spacing: -7px; } /* airsoft-team */

a.fish_2 { 	top: 307px; left: 755px; } /* story */

a.fish_3 { 	top: 270px; left: 42px; } /* project */


a.fish_1:hover, a.fish_2:hover ,a.fish_3:hover {
	text-shadow: 0.4px 0px #000000, 0 -1px 1px #FFFFFF, 0 0.5px 1px
	#666666, 0 0 3px #66FF00, 0 0 3px #33FF00;
	-webkit-transition: all 0.7s ease; transition: all 0.7s ease;  }  /*zurücksetzung*/


/*	info deutsch & englisch	*/

#info	{
	position: absolute;
	top: 450px; left: 0px; 
	font-family: 'Aldrich', sans-serif;
    color: #666666;
/*	word-spacing: -18px;	*/
    text-shadow: 0.2px 0px #FFFFFF ;
	font-size: 12px;
	letter-spacing: 2px;	
    word-spacing: normal;
	font-weight: bolder;
	z-index: 5;
	text-align: center;
	opacity: 0.7;
/*	border: 1px solid;	*/
	cursor: default;

}		/*	-ms-transform: rotateZ(180deg); /* IE 9 */ 
		/*  -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */ 
		/*  -webkit-transition:all 2s;   /* für Safari 5.1, Android 2.3 bis 4.3 */


/* {  box-sizing: border-box;  }    *, ::before, ::after {  box-sizing: inherit; }
Mit box-sizing:border-box; legen height und width nicht mehr die Maße des Inhalts eines Elements, 
sondern die Maße des Elements selbst fest und berücksichtigt dabei Rahmen und Abstände.*/


#pflanzen_menu	{
	position: absolute;		/*	relativ: weil inerhalb vom aquarium	*/
	margin-top: 420px; /* oben-rechts-unten links*/
	margin-left: 0px;
	width: 200px; height: 950px;		/* !!! verdreht wegen rotation 90° */
	font-family: 'Aldrich', sans-serif;
    color: #000000;
    text-shadow: 0.4px 0px #000000;
	font-size: 15px;
	letter-spacing: 6px;	
	font-variant: small-caps;
	font-weight: bolder;
	
	-webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
	transform-origin: right top;	/*	drehachse festlegen	*/
}

/* linear, ease, ease-in, ease-in-out, ease-out; step-start; step-end;	*/


#warped		{ left: 30px; top: 0px;	width:100px; height:20px; } 	/* a-team */
#warped_1	{ left: 2px; top: 60px;	width:100px; height:20px; }		/* project*/
#warped_2	{ left: 8px; top: 120px; width:100px; height:20px; }		/* story */
#warped_3	{ left: 0px; top: 180px;	width:100px; height:20px; }		/* contact */
#warped_4	{ left: 10px; top: 240px;	width:100px; height:20px; }		/* partner*/
#warped_5	{ left: 18px; top: 300px; width:100px; height:20px; }		/* impressum*/
#warped_6	{ left: 30px; top: 360px; width:100px; height:20px; }		/* friends*/


#warped, #warped_1, #warped_2, #warped_3, #warped_4, #warped_5, #warped_6 {	position: absolute;	
	opacity: 0.7;
/*	margin: 20px;	*/
	color: #009900;
	animation: rubberBand 6s;
/*	animation-fill-mode: backwards;		/*	backwards= wartet am ersten frame// forwards= am letzten// both; none;*/
/*	animation-duration: 2s;		-webkit-animation-duration: 2s;		*/
	animation-duration: 6s;		-webkit-animation-duration: 6s;	  /*	verzoegert starten	*/
	animation-name: rubberBand;	-webkit-animation-name: rubberBand;
	animation-iteration-count: infinite;  		/*  Anzahl der Wiederholungen	*/
	-webkit-animation-iteration-count: infinite;  		
	animation-direction: alternate;		/* bei @keyframe ..läuft es hin und wieder zurück	*/
	-webkit-animation-direction: alternate;	
	transform-origin: 0% 0% ;	/* Drehachse 2 Werte = "X" (horizontal) 0 = links / "Y" (vertikal) 0 = oben __(Prozent)(Länge) left, center, right, top, bottom.*/
	-webkit-transform-origin: 0% 0% ;	
	z-index: 0;

	-webkit-transition-property: word-spacing, opacity, margin-left ;
    -moz-transition-property: word-spacing, opacity, margin-left ;
    -o-transition-property: word-spacing, opacity, margin-left ;
    -ms-transition-property: word-spacing, opacity, margin-left ;
    transition-property: word-spacing, opacity, margin-left ;

    -webkit-transition-duration: 1s, 1s, 1s;
    -moz-transition-duration: 1s, 1s, 1s;
    -o-transition-duration: 1s, 1s, 1s;
    -ms-transition-duration: 1s, 1s, 1s;
    transition-duration: 1s, 1s, 1s;
 }

	/*um alle bis auf den ersten (n-o-t-) und letzten (-n-l-o-t-) Absatz eines Kapitels auszuwählen
    .Kapitel  p:nth-of-type(n+2):nth-last-of-type(n+2) */


     /*  0 0; Drehpunkt ist obere linke Ecke -  100% 100%; Drehpunkt ist untere reche Ecke */

#warped>a,#warped_1>a,#warped_2>a,#warped_3>a,#warped_4>a,#warped_5>a,#warped_6>a[class^=w]:nth-of-type(n+0) { 
    display:block; position:absolute;
    -moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -o-transform-origin:50%
	100%; -ms-transform-origin:50% 100%; transform-origin:50% 100%; letter-spacing: -3px; z-index: 0;  }


.w0, .w1, .w2, .w3, .w4, .w5, .w6, .w7, .w8, .w9 { 
	font-family:'Aldrich';font-size:15px;	font-variant: small-caps;
	font-weight: bolder;	font-style:normal;
	line-height:0; white-space:pre; overflow:visible; padding:0px;
	text-decoration: none; color: #009900; 
    padding-left: 0px;
    border: 1px solid;
}

#warped a, #warped_1 a, #warped_2 a, #warped_3 a, #warped_4 a, #warped_5 a, #warped_6 a   { 
    padding: 10px;  
    border: 1px solid;
    border-color: transparent;  }


.w0 {-moz-transform: rotate(-6.66rad) skewX(-6.66rad) scaleY(0.93);-webkit-transform:
                     rotate(-6.66rad) skewX(-6.66rad) scaleY(0.93);-o-transform: rotate(-6.66rad)
                     skewX(-6.66rad) scaleY(0.93);-ms-transform: rotate(-6.66rad) skewX(-6.66rad)
                     scaleY(0.93); transform: rotate(-6.66rad) skewX(-6.66rad) scaleY(0.93);
                     width: 8px; height: 0px; left: -3.67px; top: -0.14px;}

.w1 {-moz-transform: rotate(-6.49rad) skewX(-6.49rad) scaleY(0.98);-webkit-transform:
                     rotate(-6.49rad) skewX(-6.49rad) scaleY(0.98);-o-transform: rotate(-6.49rad)
                     skewX(-6.49rad) scaleY(0.98);-ms-transform: rotate(-6.49rad) skewX(-6.49rad)
                     scaleY(0.98); transform: rotate(-6.49rad) skewX(-6.49rad) scaleY(0.98);
                     width: 8px; height: 0px; left: 6.66px; top: -3.24px;}

.w2 {-moz-transform: rotate(-6.23rad) skewX(-6.23rad) scaleY(0.99);-webkit-transform:
                     rotate(-6.23rad) skewX(-6.23rad) scaleY(0.99);-o-transform: rotate(-6.23rad)
                     skewX(-6.23rad) scaleY(0.99);-ms-transform: rotate(-6.23rad) skewX(-6.23rad)
                     scaleY(0.99); transform: rotate(-6.23rad) skewX(-6.23rad) scaleY(0.99);
                     width: 8px; height: 0px; left: 17.62px; top: -4.09px;}

.w3 {-moz-transform: rotate(-5.95rad) skewX(-5.95rad) scaleY(0.94);-webkit-transform:
                     rotate(-5.95rad) skewX(-5.95rad) scaleY(0.94);-o-transform: rotate(-5.95rad)
                     skewX(-5.95rad) scaleY(0.94);-ms-transform: rotate(-5.95rad) skewX(-5.95rad)
                     scaleY(0.94); transform: rotate(-5.95rad) skewX(-5.95rad) scaleY(0.94);
                     width: 8px; height: 0px; left: 28.38px; top: -1.9px;}

.w4 {-moz-transform: rotate(-5.76rad) skewX(-5.76rad) scaleY(0.86);-webkit-transform:
                     rotate(-5.76rad) skewX(-5.76rad) scaleY(0.86);-o-transform: rotate(-5.76rad)
                     skewX(-5.76rad) scaleY(0.86);-ms-transform: rotate(-5.76rad) skewX(-5.76rad)
                     scaleY(0.86); transform: rotate(-5.76rad) skewX(-5.76rad) scaleY(0.86);
                     width: 8px; height: 0px; left: 38.11px; top: 2.75px;}

.w5 {-moz-transform: rotate(-5.74rad) skewX(-5.74rad) scaleY(0.85);-webkit-transform:
                     rotate(-5.74rad) skewX(-5.74rad) scaleY(0.85);-o-transform: rotate(-5.74rad)
                     skewX(-5.74rad) scaleY(0.85);-ms-transform: rotate(-5.74rad) skewX(-5.74rad)
                     scaleY(0.85); transform: rotate(-5.74rad) skewX(-5.74rad) scaleY(0.85);
                     width: 8px; height: 0px; left: 47.62px; top: 8.61px;}

.w6 {-moz-transform: rotate(-5.95rad) skewX(-5.95rad) scaleY(0.94);-webkit-transform:
                     rotate(-5.95rad) skewX(-5.95rad) scaleY(0.94);-o-transform: rotate(-5.95rad)
                     skewX(-5.95rad) scaleY(0.94);-ms-transform: rotate(-5.95rad) skewX(-5.95rad)
                     scaleY(0.94); transform: rotate(-5.95rad) skewX(-5.95rad) scaleY(0.94);
                     width: 8px; height: 0px; left: 57.33px; top: 13.44px;}

.w7 {-moz-transform: rotate(-6.36rad) skewX(-6.36rad) scaleY(0.99);-webkit-transform:
                     rotate(-6.36rad) skewX(-6.36rad) scaleY(0.99);-o-transform: rotate(-6.36rad)
                     skewX(-6.36rad) scaleY(0.99);-ms-transform: rotate(-6.36rad) skewX(-6.36rad)
                     scaleY(0.99); transform: rotate(-6.36rad) skewX(-6.36rad) scaleY(0.99);
                     width: 8px; height: 0px; left: 68.19px; top: 14.99px;}

.w8 {-moz-transform: rotate(-6.69rad) skewX(-6.69rad) scaleY(0.91);-webkit-transform:
                     rotate(-6.69rad) skewX(-6.69rad) scaleY(0.91);-o-transform: rotate(-6.69rad)
                     skewX(-6.69rad) scaleY(0.91);-ms-transform: rotate(-6.69rad) skewX(-6.69rad)
                     scaleY(0.91); transform: rotate(-6.69rad) skewX(-6.69rad) scaleY(0.91);
                     width: 8px; height: 0px; left: 78.76px; top: 12.29px;}

.w9 {-moz-transform: rotate(-6.88rad) skewX(-6.88rad) scaleY(0.82);-webkit-transform:
                     rotate(-6.88rad) skewX(-6.88rad) scaleY(0.82);-o-transform: rotate(-6.88rad)
                     skewX(-6.88rad) scaleY(0.82);-ms-transform: rotate(-6.88rad) skewX(-6.88rad)
                     scaleY(0.82); transform: rotate(-6.88rad) skewX(-6.88rad) scaleY(0.82);
                     width: 8px; height: 0px; left: 88.52px; top: 6.86px;}



#warped:hover, #warped_1:hover, #warped_2:hover, #warped_3:hover,
#warped_4:hover, #warped_5:hover, #warped_6:hover	{

   -moz-word-spacing: 3px;
    -webkit-word-spacing: 3px;
	-o-word-spacing: 3px;
    -ms-word-spacing: 3px;
    word-spacing: 3px;  
	opacity: 1;        
    margin-left: 2px;     }


@-webkit-keyframes rubberBand {
  0% {    -webkit-transform: scale3d(1, 1, 1);       transform: scale3d(1, 1, 1);  
	-webkit-transform: rotate3d(1, 1, 0.5, -30deg)) ; transform: rotate3d(1, 1, 0.5, -30deg);	}
		
  50% {   -webkit-transform: scale3d(1.25, 0.75, 1);    transform: scale3d(1.25, 0.75, 1);  }
  
  100% {   -webkit-transform: scale3d(1.15, 0.85, 1.5);    transform: scale3d(1.15, 0.85, 1.5); 
	-webkit-transform: rotate3d(1, 1, 0.3, 20deg)) ; transform: rotate3d(1, 1, 0.3, 20deg);	} }


@keyframes rubberBand {
  0% {    -webkit-transform: scale3d(1, 1, 1);       transform: scale3d(1, 1, 1);  
	-webkit-transform: rotate3d(1, 1, 0.5, -30deg)) ; transform: rotate3d(1, 1, 0.5, -30deg);	}
		
  50% {   -webkit-transform: scale3d(1.25, 0.75, 1);    transform: scale3d(1.25, 0.75, 1);  }
  
  100% {   -webkit-transform: scale3d(1.15, 0.85, 1.5);    transform: scale3d(1.15, 0.85, 1.5); 
	-webkit-transform: rotate3d(1, 1, 0.3, 20deg)) ; transform: rotate3d(1, 1, 0.3, 20deg);	} }
	



}

/* Ein Rechter Winkel: 90deg = 100grad = 0.25turn ≈ 1.5708rad //
	 Ein Nullwinkel: 0deg = 0grad = 0turn = 0rad Hinweis: 0 ist kein gültiger Wert.  */

#topf_1:hover, #topf_2:hover, #topf_3:hover, #topf_4:hover, #topf_5:hover, #topf_6:hover, #topf_7:hover	{
	display: block;		 cursor: none;						/* cursor: crosshair..default --- ändert den Cursor */
	-moz-transform: rotate(-90.0deg) scale(1.2,1.2) ;
	-webkit-transform: rotate(-90.0deg) ;
	-o-transform: rotate(-90.0deg) ;
	-ms-transform: rotate(-90.0deg) ;
	transform: rotate(-90.0deg) ;
	transition: 1s ease-in-out	;
	transform-origin: left bottom;	/* Drehachse 2 Werte = "X" (horizontal) 0 = links / "Y" (vertikal) 0 = oben __(Prozent)(Länge) left, center, right, top, bottom.*/
}


/* cursor: crosshair..default --- ändert den Cursor */




/* a.fish_1:hover+#fish_10	{	}  für verknüpfung zweier DIV_1 DIV_2	*/


/* Pseudoklassen, allgemeine Angaben */
a:link {outline: none;}  /* alle Links die zu sehen sind*/
a:visited {outline: none;}
a:focus {outline: none;}
a:hover {outline: none;}
a:active {outline: none;} /* outline: none; color: #00FF00}*/

/*
All Elements 				* 
All P Elements 				p 
All Child Elements 			p > * 
Element By ID 				#foo 	
Element By Class 			.foo 	
Element With Attribute 		*[title] 	
First Child of All P 		p > *:first-child 	
All P with an A child 		Not possible 	
Next Element 				p + * 








/*

Elementen die nicht markiert werden sollen

<style type="text/css">
.deselect ::selection {
    background: transparent;
    color: inherit;
}
.deselect ::-moz-selection {
    background: transparent;
    color: inherit;
}
.deselect {
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
</style>

<div class="deselect">
    <span class="prev">«</span>
    <span class="next">»</span>
</div>


/* ansprechen über ALT text	

<img src="foo.png" alt="Home" />

Code:

img[alt=Home] {
	background: url(foo_hover.png) -999px -999px no-repeat;
	display: block;
}

img[alt=Home]:hover {
	width: 0;
	height: 0;
	padding-right: 100px;
	padding-bottom: 100px;
	background-position: 0 0;
}



*/ 
	/*zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=0, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=45, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=90, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=180, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=225, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=260, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=305, Strength=2);
    -moz-box-shadow: 0 0 1px #33FF00 inset; /*Mozilla-basierte Browser (z.B. Firefox)*/
/*    -webkit-box-shadow: 0 0 1px #33FF00 inset; /*WebKit-basierte Browser (z.B. Safari/Chrome)*/
/*    box-shadow: 0 0 1px #33FF00 inset; /*CSS3 Standard*/
	/*	-moz-box-shadow: inset 0 0 1px #33FF00;
 -webkit-box-shadow: inset 0 0 1px #33FF00;
  box-shadow: inset 0 0 1px #33FF00;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";