@charset "utf-8";

*{
	list-style-type:none;
	text-decoration:none;
}
	
body {
	background-color:#F0F0F0;								
}
		
#wrapper{
	box-shadow:1px 1px 10px grey;
	background-color:white;
	font-family:Arial, Verdana, Tahoma, sans-serif;
	font-size:0.9em;
	line-height:1.5em;
	color: black;		
}
h1 {		
	font-family:Roboto, verdana, sans-serif;
	font-size:1.2em;
	margin-bottom:8px;			
}

h2{
		
	font-size:1em;
	font-family:Roboto, verdana, sans-serif;
	margin-bottom:5px;
		
}

		
p{		
	margin-top:5px;				
}

a{
	color:#ec9c40;
}



.linieorange{
	background-color:#ec9c40;
	width:100%;
	height:1.5px;
	margin-top:5px;			/* abstand nach oben */
	margin-bottom:5px;		/* abstand nach unten */
		
}

.hrorange{
	color:#ec9c40;

}


.joergbox{
	width:50%;	 /* mit % angabe Flexibel mit px fixed */
	height:300px;
	border: 2px dashed #ec9c40;
	box-shadow:4px 4px 5px silver;
	background-color:#EDEDED;
	margin:auto;  /* damit steht die Box immer mittig */
}
		
#content .row {
	/*background: white;*/

    color:black;
	margin-top:0px;
	         
}
					
#header .row{
	background-image: url(../images/bild_5.jpg);
	background-repeat:no-repeat;
	width:100%;
	height:160px;
		
}
		
#header img{
		
	width:300px;
	margin-left:60%;
	padding-top:32px;	
}
		
#header .kasten{				
	height:200px;
	background-color:#ec9c40;
	margin-right:-10px;						
}
			/*---------------menue-----------------*/


			
#content #links #menue ul li span{
	display:block;
	margin:7px 0px;
	margin-left:0px;
	padding:4px;
	border-right:1px solid #ec9c40;
	border-top:1px solid #ec9c40;
	border-bottom:1px solid #ec9c40;
	border-left:20px solid #ec9c40;
	color:black;
	transition:border 1s;
}
		
#content #links #menue ul li span:hover{
	border-left:30px solid #ec9c40;
}
#content #links #menue ul li span:focus{
	border-left:30px solid #ec9c40;
}
				
#content #links #menue .untermenue span{
		/*display:none;*/
	margin-left:20px;
	border-right:1px solid #f6c997;
	border-top:1px solid #f6c997;
	border-bottom:1px solid #f6c997;
	border-left:20px solid #f6c997;
	margin-top:-3px;	
}

#content #links #menue .untermenue span:hover{
	border-left:30px solid #f6c997;


}

#content #links #menue .untermenue #aktiv{
	border-left:30px solid #f6c997;
	color:grey;

}

		
#content #links #menue #aktiv{		
	border-left:30px solid #ec9c40;
	color:grey;		
}				
		
#content #links #menue .untermenue{		
	margin-top:-3px;		
}
		
			/*-----------------mitte Startseite--------------*/







	
#content #mitte li{		
	list-style-image: url(../images/quadrat.jpg);		
}
		
#content #mitte ul{
	margin-left:30px;
	margin-top:10px;
	margin-bottom:15px;		
}
		
		/* ----------Pinguin sondereinlage----------------*/
#show{

height:500px;

}
h2{
		
		font-size:1em;
		font-family:Roboto, verdana, sans-serif;
		margin-bottom:5px;
		
}
		
#show a{
		font-weight:bold;
		color:#ec9c40;
	
		
		}
		
#show a:hover{
		
		color:black;
	
		}
		
#show .bildaufbau{
		position:absolute;
		background-image:url(../images/Pingu_aufbau_gleich_neu.jpg);
		/*border:1px solid black;*/
		background-repeat:no-repeat;
		top:339px;
		left:335px;		
		width:386px;
		height:386px;
}
		
		/*#show a:hover~ .bildaufbau{
		background-image:url(../images/Pingu_aufbau_soft.jpg);
		
		}*/
		
#show a span{
		position:absolute;
		background-repeat:no-repeat;
		
		z-index:10;
		
		
		
		}
		
#show #back span{
		position:absolute;
		top:339px;
		left:335px;
		
		background-image:url(../images/Linux-Pinguin_back.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
#show #back:hover span{
		
		opacity:1;
		
		
		}
		
#show #family span{
		position:absolute;
		top:339px;
		left:464px;
		
		background-image:url(../images/Linux-Pinguin_family.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		
#show #family:hover span{
		
		opacity:1;
		}
		
#show #energie span{
		position:absolute;
		top:339px;
		left:593px;
	
		background-image:url(../images/Linux-Pinguin_energie.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		
#show #energie:hover span{
		
		opacity:1;
		}
		
#show #stand span{
		position:absolute;
		top:468px;
		left:335px;
	
		background-image:url(../images/Linux-Pinguin_fly.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
#show #stand:hover span{
		
		opacity:1;
		
		
		}
		
#show #dizzy span{
		position:absolute;
		top:468px;
		left:464px;
	
		background-image:url(../images/Linux-Pinguin_dizzy.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
#show #dizzy:hover span{
		
		opacity:1;
		
		
		}
		
#show #dance span{
		position:absolute;
		top:468px;
		left:593px;
		
		background-image:url(../images/Linux-Pinguin_dance.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
#show #dance:hover span{
		
		opacity:1;
		
		
		}
		
#show #upsidedown span{
		position:absolute;
		top:597px;
		left:335px;
	
		background-image:url(../images/Linux-Pinguin_upsidedown.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
#show #upsidedown:hover span{
		
		opacity:1;
		
		
		}
		
		
#show #blush span{
		position:absolute;
		top:597px;
		left:464px;
	
		background-image:url(../images/Linux-Pinguin_blush.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
#show #blush:hover span{
		
		opacity:1;
		
		
		}
		
#show #sleep span{
		position:absolute;
		top:597px;
		left:593px;
	
		background-image:url(../images/Linux-Pinguin_sleep.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
#show #sleep:hover span{
		
		opacity:1;
		
		
		}
		
		
		/* -ENDE-Pinguin sondereinlage*/	
		
		
		
		/* Impressum*/	
		
		
#content #impressum #mitte  dt{
	margin-top:10px;
	font-weight: bold;
	border-top:1px solid #ec9c40;	
}

#content #impressum #mitte  dd{	
	margin-left:20px;
	margin-top:-3px;
	text-align:justify;	
}
	
#content #impressum #mitte  dd  span{
	
	margin-left:28px;
	
}
	
#content #impressum #mitte  dl{
	margin-top:20px;		
}

		
		
		/* Forum*/	
		
#content  #forum h1 span{	
	display:block;		
}
	
#content #forum #mitte p{	
	text-align:justify;
	margin-bottom:10px;
	margin-top:10px;	
}
		

#content #forum #rechts a{
	font-weight:normal;
	font-size:inherit;
}


#content #forum #rechts h2{
	color:#ec9c40;
	font-size:1.2em;
}
	
		/* Forum ENDE*/	
		
		
		/* ------ueber mich-------------------------------------------------*/		
		
#content #uebermich h2{

margin-top:10px;

}

			/* ------Forum Rechts-------------------------------------------------*/	
#map-canvas{
	box-shadow:4px 4px 5px silver;
	background-color:#EDEDED;
	border: 2px solid #EDEDED;	
	height: 150px; 
	margin: 20px 5%;
	padding: 4px 8px;
}
#content #rechts .rss-box {
	box-shadow:4px 4px 5px silver;
	background: #f0f0f0; /* Old browsers */
background: -moz-linear-gradient(top, #f0f0f0 0%, #ffffff 43%, #ffffff 58%, #f0f0f0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(43%,#ffffff), color-stop(58%,#ffffff), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f0f0f0 0%,#ffffff 43%,#ffffff 58%,#f0f0f0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f0f0f0 0%,#ffffff 43%,#ffffff 58%,#f0f0f0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f0f0f0 0%,#ffffff 43%,#ffffff 58%,#f0f0f0 100%); /* IE10+ */
background: linear-gradient(to bottom, #f0f0f0 0%,#ffffff 43%,#ffffff 58%,#f0f0f0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */
	border: 2px dashed #ec9c40;
	margin: 5px 5%;
	padding: 4px 8px;	    
}
		
#content #rechts .rss-title{
	font-family:Roboto,/*"American Typewriter","Trebuchet MS"*/,Trebuchet,Lucida,sans-serif;
	margin: 5px 0;		 
	padding: 0;
}

		 
#content #rechts .rss-title p{		
	color:black;			 
}
		 
#content #rechts .rss-title a {
	color:orange;		 
	font-weight: bold;		
	font-size: 1.3em;			 
}
		 

#content #rechts .rss-item {  
	font-family: verdana,arial,sans-serif;
 	font-size:0.8em;   
	font-weight: bold;    
	margin: 8px 0;
}

		
#content #rechts .rss-item a {	
	color:#ec9c40;	
	border-bottom:1px solid grey;
	font-size: 13px;
    font-weight: bold;
}

#content #rechts .rss-item span {

	font-size: 11px;
    font-weight: normal;

}
		
/*#content #rechts li{		
	list-style-type:square;		
		}*/
		
#content #rechts ul{		
	margin-top:10px;
	margin-bottom:10px;
	margin-left:15px;				
}
			
	/* -----------------Footer ----------------------------------------*/	

#footer p{
margin-top:0px;


}		
#footer .nix{	
	height:25px;
	
}
		
#footer .footerbild{		
	background-image: url(../images/bild_balken5.jpg);
	background-repeat:no-repeat;
	width:100%;
	height:26px;				
}
		
#footer a{		
	color:#ec9c40;
	/*border-bottom:1px solid black*/		
}
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	/* media screen Anpassung!!!!--------------------------------------------------------------------------------------------*/
		
		
		
		
		
@media only screen and (min-width: 960px) and (max-width: 1160px) {

#show .bildaufbau{
	
		top:339px;
		left:235px;
		
		width:386px;
		height:386px;
		}
		
		/*#show a:hover~ .bildaufbau{
		background-image:url(../images/Pingu_aufbau_soft.jpg);
		
		}*/
		
		#show a span{
		position:absolute;
		background-repeat:no-repeat;
		
		z-index:10;
		
		
		
		}
		
		#show #back span{
		position:absolute;
		top:339px;
		left:235px;
		
		background-image:url(../images/Linux-Pinguin_back.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		#show #back:hover span{
		
		opacity:1;
		
		
		}
		
		#show #family span{
		position:absolute;
		top:339px;
		left:364px;
		
		background-image:url(../images/Linux-Pinguin_family.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		
		#show #family:hover span{
		
		opacity:1;
		}
		
		#show #energie span{
		position:absolute;
		top:339px;
		left:493px;
	
		background-image:url(../images/Linux-Pinguin_energie.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		
		#show #energie:hover span{
		
		opacity:1;
		}
		
		#show #stand span{
		position:absolute;
		top:468px;
		left:235px;
	
		background-image:url(../images/Linux-Pinguin_fly.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		#show #stand:hover span{
		
		opacity:1;
		
		
		}
		
		#show #dizzy span{
		position:absolute;
		top:468px;
		left:364px;
	
		background-image:url(../images/Linux-Pinguin_dizzy.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		#show #dizzy:hover span{
		
		opacity:1;
		
		
		}
		
		#show #dance span{
		position:absolute;
		top:468px;
		left:493px;
		
		background-image:url(../images/Linux-Pinguin_dance.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		#show #dance:hover span{
		
		opacity:1;
		
		
		}
		
		#show #upsidedown span{
		position:absolute;
		top:597px;
		left:235px;
	
		background-image:url(../images/Linux-Pinguin_upsidedown.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		#show #upsidedown:hover span{
		
		opacity:1;
		
		
		}
		
		
		#show #blush span{
		position:absolute;
		top:597px;
		left:364px;
	
		background-image:url(../images/Linux-Pinguin_blush.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		#show #blush:hover span{
		
		opacity:1;
		
		
		}
		
		#show #sleep span{
		position:absolute;
		top:597px;
		left:493px;
	
		background-image:url(../images/Linux-Pinguin_sleep.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		#show #sleep:hover span{
		
		opacity:1;
		
		
		}



}
	/* media screen Anpassung!!!!---------------------------------768-959-----------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

#show .bildaufbau{
	
		top:339px;
		left:175px;
		
		
	
	
		width:386px;
		height:386px;
		}
		
		/*#show a:hover~ .bildaufbau{
		background-image:url(../images/Pingu_aufbau_soft.jpg);
		
		}*/
		
		#show a span{
		position:absolute;
		background-repeat:no-repeat;
		
		z-index:10;
		
		
		
		}
		
		#show #back span{
		position:absolute;
		top:339px;
		left:175px;
		
		background-image:url(../images/Linux-Pinguin_back.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		#show #back:hover span{
		
		opacity:1;
		
		
		}
		
		#show #family span{
		position:absolute;
		top:339px;
		left:304px;
		
		background-image:url(../images/Linux-Pinguin_family.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		
		#show #family:hover span{
		
		opacity:1;
		}
		
		#show #energie span{
		position:absolute;
		top:339px;
		left:433px;
	
		background-image:url(../images/Linux-Pinguin_energie.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		
		#show #energie:hover span{
		
		opacity:1;
		}
		
		#show #stand span{
		position:absolute;
		top:468px;
		left:175px;
	
		background-image:url(../images/Linux-Pinguin_fly.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		#show #stand:hover span{
		
		opacity:1;
		
		
		}
		
		#show #dizzy span{
		position:absolute;
		top:468px;
		left:304px;
	
		background-image:url(../images/Linux-Pinguin_dizzy.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		#show #dizzy:hover span{
		
		opacity:1;
		
		
		}
		
		#show #dance span{
		position:absolute;
		top:468px;
		left:433px;
		
		background-image:url(../images/Linux-Pinguin_dance.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		#show #dance:hover span{
		
		opacity:1;
		
		
		}
		
		#show #upsidedown span{
		position:absolute;
		top:597px;
		left:175px;
	
		background-image:url(../images/Linux-Pinguin_upsidedown.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		#show #upsidedown:hover span{
		
		opacity:1;
		
		
		}
		
		
		#show #blush span{
		position:absolute;
		top:597px;
		left:304px;
	
		background-image:url(../images/Linux-Pinguin_blush.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		#show #blush:hover span{
		
		opacity:1;
		
		
		}
		
		#show #sleep span{
		position:absolute;
		top:597px;
		left:433px;
	
		background-image:url(../images/Linux-Pinguin_sleep.jpg);
	
		opacity:0;
	
		width:129px;
		height:129px;
		
		}
		#show #sleep:hover span{
		
		opacity:1;
		
		
		}







}
	/* media screen Anpassung!!!!-----------------------------------767---------------------------------------------------------*/
@media only screen and (max-width: 767px) {



#show h2{
		display:none;
		font-size:1em;
		font-family:Roboto, verdana, sans-serif;
		margin-bottom:5px;
		
		}
		
		#show a{
		display:none;
	
		
		}
		
		#show{

		height:0px;

}
		
		#show .bildaufbau{
		display:none;
	
		
		}
		#header .row{
		background-image: url(../images/bild_5.jpg);
		background-repeat:no-repeat;
	
		background-size:100% 70px;
		
		}
		
		#header img{
		position:absolute;
		width:280px;
		left:-160px;
		top:70px;
		}
		
		#header .kasten{
		
		display:none;
		height:150px;
		background-color:#ec9c40;
		margin-right:-10px;
		z-index:-5;
	
		}
		
		/*#content #mitte{
		
		margin-left:10px;
		margin-right:10px;
		}*/
		
		
}

@media only screen and (min-width: 480px) and (max-width: 767px) {

}