@charset "utf-8";
/* CSS Document */

body {
	/*background: rgba(220,0,0,0.3);*/
	margin: 0;
	padding: 0;
	width: 1920px;
	height: 940px;
	background: url("../images/hintergrund.png");
	overflow: hidden;
	background-repeat: no-repeat;
}

.mario {
	position: absolute;
	z-index: 10;
	left: 10px;
	top: 746px;
	width: 90px;
	height: 188px;
	overflow: hidden;		
}

.mario_spritesheet{
	position:absolute;	
	animation: moveSpritesheet 1s steps(6) infinite;
	top: -755px;
}

@keyframes moveSpritesheet {
	from{
		transform: translate3d(0px,0,0);		
	}
	to{
		transform: translate3d(-100%,0,0);		
	}
}

.pixelart {
	image-rendering:optimizeQuality;
}

.run_rechts{
	top: 45px;
}

.run_links{
	top: -150px;
}

.springen_rechts{
	top: -385px;
}

.springen_links{
	top: -570px;
}

.stehen{
	top: -755px;
	
}

.btn {
	position: absolute;
	width: 60px;
	height: 60px;
	top: 910px;	
	background: url("../images/btn_normal.png");
	background-size: 60px;
	background-repeat: no-repeat;
	z-index: 1;
}

.btn1 {
	left: 173px;
}	

.btn2 {
	left: 419px;	
}

.btn3 {
	left: 668px;		
}

.btn4 {
	left: 1171px;		
}


.btn5 {
	left: 1409px;		
}


.btn6 {
	left: 1647px;		
}

.push{
	background: url("../images/btn_pushed.png");
	background-size: 60px;
	background-repeat: no-repeat;
}


#talkbubble0 {	
	top: 52px;	
  }

#talkbubble1 {	
	top:60px;	
  }

#talkbubble2 {
	top: 68px;
  }

.flagge_links{
	border: 1px solid gray;
	width: 300px;
	height: 80px;	
	left: 89px;
	z-index: 15;
	background:white;
	position: relative;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	transition: all 0.4s ease;
  }
  
.flagge_links:before {
	content: "";
	position: absolute;
	right: 100%;
	top: 26px;
	width: 0;
	height: 0;
	border-top: 13px solid transparent;
	border-right: 26px solid white;
	border-bottom: 13px solid transparent;
  }

#talkbubble3 {	
	top: 52px;
	} 

#talkbubble4 {	
	top: 60px;	
  }
  
#talkbubble5 {	
	top: 68px;	
  }  
  
.flagge_rechts{
	border: 1px solid gray;
	width: 300px;
	height: 80px;	
	left: 1511px;
	background:white;
	position: relative;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	transition: all 0.4s ease;
 } 

.flagge_rechts:before{
	content: "";
	position: absolute;
	right: 100%;
	top: 26px;
	left:300px;
	width: 0;
	height: 0;
	border-top: 13px solid transparent;
	border-left: 26px solid white;
	border-bottom: 13px solid transparent;
 }

.inhalt{
	position: relative;
	opacity: 0;
	left: 10px;
	font-weight: normal;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 14pt;
	padding-top: 15px;
	transition: all 0.4s;
}

.ueberschrift{
	position: relative;
	left: 10px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1em;
	padding-top: 15px;
}
/* wird benötigt um die rechten Fahnen von den linken zu separieren bzw um die relative Verkettung aufzuheben (sonst bewegen sich diese nach unten wenn ich auf einem der 3 linken btn stehe)*/
.rechts{
	position: absolute;
}

th{
	position: fixed;
	top: 267px;
}

.steuerung{
	font-weight: normal;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 10pt;
	color: white;
	background-color:rgba(0,0, 0, 0.5);
	position: absolute;
	top: 25px;
	left: 25px;
	padding-left: 9px;
	border-radius: 3px;
	width: 420px;
}

.steuerung_gross{
	top: 300px;
	left: 800px;
	font-size: 18pt;
	padding-bottom: 90px;
	padding-left: 30px;
	padding-right: 30px;
	background-color:rgba(0,0, 0, 0.8);
}

#start_btn{
	cursor: pointer;
	border: 3px solid white;
	border-radius: 50%;
	width: 85px;
	height: 85px;
	color: white;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	line-height: 85px;
	position: relative;
	top: 598px;
	left: 976px;
	
}