/*
Theme Name: Netzspielwiese 2013
Theme URI: http://die.netzspielwiese.de/
Description: Die Netzspielwiese - Layout.
Version: 1.0
Author: Franziska Maelzer
Author URI: http://die.netzspielwiese.de/

The CSS, HTML5 and design is copyrighted by Franziska Maelzer:

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

/* Copyright: Franziska Maelzer            */
/* www.netzspielwiese.de                 */
/*                                     */
/* * * * * * * * * * * * * * * * * * */
/* Farben:                           */
/* * * * * * * * * * * * * * * * * * */
/* Hintergrund:              #38710C */
/* Schrift:                  #FF9900 */
/* * * * * * * * * * * * * * * * * * */
/* Allgemeine Definitionen * * * * * */
/* * * * * * * * * * * * * * * * * * */
*{
	padding: 0;
	margin: 0;
}

body { 	background-color: #38710C;
		text-align:center;
		font-family:Verdana, Geneva, sans-serif;
		font-size:1em;
		}

a:link,
a:visited,
a:focus,
a:hover,
a:active {
	color:#38710C;
	}
a:visited {
	color:#000;
	}
a:focus,
a:hover,
a:active {
	color:#C60;
	text-decoration:none;
	}
	

img {
	float:left;
	margin:5px 2em 1em 0;
	background-color:#fff;
	padding:5px;
	border:1px solid #ccc;
	}
img.noborder {
	padding:0;
	border:none;
	}
img.erstesBild {
	float:left;
	border:none !important;
	margin:-1em 1.5em  0.5em -1.5em;
	max-width: 40%;
	height: auto;
	}
h1, h2, h3, h4 {
	display: block;
	font-family:Oswald, Impact,Charcoal, sans-serif;
}

/* * * * * * * * * * * * * * * * * * */
/* * Allgemeine Klassen  * * * * * * */
/* * * * * * * * * * * * * * * * * * */
.unsichtbar {
  display: block;
  position: absolute !important;
  top: -6000px !important;
  left: -6000px !important;
  height: 1px !important;
  width: 1px !important;
}
.stopFloat{
  display: block;
  clear: both;
  float: none;
  height: 1px;
  font-size: 1px;
  line-height: 1px;
  overflow: hidden;
}

.rightFloat {
	float:right;
	margin:0 0 0 0.5em;
}
.leftFloat {
	float:left;
	margin:0 0.5em 0 0;
}
.rightAlign {
	text-align:right;
}
.leftAlign {
	text-align:left;
}

/* * * * * * * * * * * * * * * * * * */
/* * Ebenen  * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * */

#hintergrundbild {
	position:fixed;
	z-index:-100000;
	top:0;
	left:0;
	width:100%;
	height:100%;
 	margin:0;
	padding:0;
 }

#wrapper {
	position:relative;
	}
	
	/*******************************************/
	/* HEADER                                  */
	/*******************************************/

	#wrapper,
	#header,
	footer{
		position:relative;
		text-align:center;
		max-width:1200px;
		width:80%;
		margin:0 auto;
		left:auto;
		}
			#header {
				z-index:1000;
				position:absolute;
				top:-10px;
				left:auto;
				height:161px;
				margin-left:-20px;
				}
			.lt-ie8 #header {
				margin:0 auto;
				min-width:600px;
				max-width:1200px;
				width:100%;
				position:static !important;
				}
			html>body #header { position:fixed; }
			
				.lt-ie8 #bild_links {
					margin-left:-30px;
					}
				
				#bild_links  { 	background:url(img/header_links.png);  width:20px;	  }
				#bild_l_m 	 { 	background-image:url(img/header_m_l.png); left:20px; width:10px;  }
				#bild_r_m	 {	background-image:url(img/header_m_r.png); right:20px; width:10px; }
				#bild_rechts {	background-image:url(img/header_rechts.png); right:0; width:20px; }
					
				#bild_links,
				#bild_l_m,
				#bild_r_m,
				#bild_rechts {
					position:absolute; 
					top:0;
					height:161px;
					}
				
				#header_innen {
					text-align:left;
					margin:0 30px;
					background:url(img/header_mitte.png) repeat-x 0 0;
					height:161px;
					position:relative;
					}
					.lt-ie8 #header_innen {
						margin:0 10px;
					}
					img#logo {
						margin:35px 0 0 7px;
						position:absolute;
						width:317px;
						height:75px;
						}
					/***********************************************/
					/* NAVIGATION *********************************/
					/*********************************************/
					.js #toggleNavMain {
						display:none;
					}

					ul#navigation {
						font-size:10px;
						text-transform:uppercase;
						color:#38710C;
						padding-top:85px;
						list-style:none;
						}
						ul#navigation li {
							float:right;
							margin-left:20px;
							}
							ul#navigation li a:link,
							ul#navigation li a:visited,
							ul#navigation li a:focus,
							ul#navigation li a:hover,
							ul#navigation li a:active {
								padding:0 3px 15px 3px;
								color:#38710C;
								text-decoration:none;
								border-bottom:3px solid #fff;
								}
							ul#navigation li a:focus,
							ul#navigation li a:hover,
							ul#navigation li a:active {
								border-bottom:3px dotted #38710C;
								}
							ul#navigation li.aktiv a:link,
							ul#navigation li.aktiv a:visited,
							ul#navigation li.aktiv a:focus,
							ul#navigation li.aktiv a:hover,
							ul#navigation li.aktiv a:active {
								padding:0 3px 15px 3px;
								color:#38710C;
								border-bottom:3px solid #38710C;
								}
							a#leistungen,
							a#referenzen,
							a#ueber-mich,
							a#blog,
							a#kontakt,
							a#portfolio {
								height: 25px;
								position: relative;
								width: 250px;
							}
								a#leistungen span,
								a#referenzen span,
								a#ueber-mich span,
								a#blog span,
								a#kontakt span,
								a#portfolio span {
									height: 200%;
									position: absolute;
									width: 100%;	
									}
								a#leistungen span {
									background: url(img/leistungen.gif) no-repeat -3px -1px;
									}
								a#referenzen span {
									background: url(img/referenzen.gif) no-repeat -3px -1px;
									}
								a#ueber-mich span {
									background: url(img/ueber-mich.gif) no-repeat -3px -1px;
									}
								a#blog span {
									background: url(img/blog.gif) no-repeat -3px -1px;
									}
								a#kontakt span {
									background: url(img/kontakt.gif) no-repeat -3px -1px;
									}
								a#portfolio span {
									background: url(img/portfolio.gif) no-repeat -3px -1px;
									}
							
					/************************************/
						.klein {
							text-transform:lowercase;
							}
						
	/*******************************************/
	/* MAIN                                    */
	/*******************************************/
	
	#main {
		min-height:100%;
		background:url(img/bg.png) repeat 0 0;
		margin:0 20px 0 20px;
		text-align:center;
	}

	/*******************************************/
	/* INHALT                                  */
	/*******************************************/
	
	#wrapper_inhalt {
		padding-bottom:141px;
		}
	#inhalt {
		margin:1.7em 28px 43px 28px;
		padding:120px 0 114px 0;	
	}
		.lt-ie8 #inhalt {
			padding-top:0;
			background-color:#ffffff;
		}
		#hauptinhalt {
			background-color:#ffffff;
			padding:30px;
			position:relative;
			
		    -webkit-border-bottom-left-radius: 10px;
			-khtml-border-bottom-left-radius: 10px;
			-moz-border-bottom-left-radius: 10px;
			border-bottom-left-radius: 10px;
			
		    -webkit-border-bottom-right-radius: 10px;
			-khtml-border-bottom-right-radius: 10px;
			-moz-border-bottom-right-radius: 10px;
			border-bottom-right-radius: 10px;
			
		    -webkit-border-top-left-radius: 10px;
			-khtml-border-top-left-radius: 10px;
			-moz-border-top-left-radius: 10px;
			border-top-left-radius: 10px;
			
		    -webkit-border-top-right-radius: 10px;
			-khtml-border-top-right-radius: 10px;
			-moz-border-top-right-radius: 10px;
			border-top-right-radius: 10px;
	
		}
		.ws_images {
		    -webkit-top-bottom-left-radius: 10px;
			-khtml-top-bottom-left-radius: 10px;
			-moz-top-bottom-left-radius: 10px;
			border-top-left-radius: 10px;
		    -webkit-top-bottom-right-radius: 10px;
			-khtml-top-bottom-right-radius: 10px;
			-moz-top-bottom-right-radius: 10px;
			border-top-right-radius: 10px;
			}
		.ws_images img,
		.ws_bullets img {
			padding:0;
			margin:0;
			}
			#textinhalt {
				width:75%;
				position:relative;
				float:left;
			}
			#textinhalt ul, ol {
				list-style:none;
				text-align:left;
				font-size:0.9em;
				line-height:1.7;
				margin-bottom:1em;
				text-shadow:1px 1px 1px #bbb;
			}
				#textinhalt ul li,
				#textinhalt ol li {
					background:url(img/li.gif) no-repeat 0 0 ;
					padding-left:24px;
					}
			#textinhalt h1 {
				font-size:2.5em;
				text-align:left;
				margin:1em 0 1.5em 0;
				color:#F90;
				text-shadow:1px 1px 1px #777;
				font-weight:normal;
				/* letter-spacing:5px; */
				}
			#textinhalt h2 {
				font-size:1.6em;
				text-align:right;
				margin-bottom:2em;
				margin-top:3em;
				padding-right:0.25em;
				color:#F90; 
				text-shadow:1px 1px 1px #777;
				border-bottom:3px dotted #f90;
				border-top:3px dotted #f90;
				clear:both;
				}
				#textinhalt h2 a,
				#textinhalt h1 a,
				#textinhalt h3 a,
				#textinhalt h4 a{
					color:#F90; 
					text-decoration:none;
					}
			#textinhalt h3 {
				font-size:1.4em;
				text-align:left;
				margin:3em 0 2em 0;
				color:#F90;
				text-shadow:1px 1px 1px #777;
				}
			#textinhalt h4 {
				font-size:1.2em;
				text-align:left;
				margin-bottom:1em;
				color:#F90;
				text-shadow:1px 1px 1px #777;
				}

			#hauptinhalt p {
				text-align:left;
				font-size:0.9em;
				line-height:1.5;
				margin-bottom:1em;
				text-shadow:1px 1px 1px #bbb;
				}
			#hauptinhalt img {
				padding:8px;
				border:8px solid #F90;
				background-color:#Fff;
				max-width:94.9%;
				height:auto;

				} 
			#hauptinhalt a:focus img,
			#hauptinhalt a:hover img,
			#hauptinhalt a:active img{
				border-color:#38710C !important;
				} 
		#hauptinhalt .box {
			position:relative;
			width:20%;
			float:right;
			background-color:#FFF;
			padding:20px 0 20px 0;
			margin:1em 0 0 1.8em;
			/*background:url(img/bg-hintergrund-header.gif) repeat;*/
		    -webkit-border-radius: 10px;
			-khtml-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			}
			.lt-ie8 #hauptinhalt .box {
				margin-left:0;
				}
			
			#seiteninhalt{
				/*margin-top:188px; Abstand von oben*/
				}
				
				img#logo-bild {
					border:none;
					width:60%;
					height:auto;
					margin:0 0 2em 0.6em;
					}
			
			.box h2{
				font-size:1.6em;
				text-align:left;
				margin:2em 0 1em 0;
				padding:0 0 5px 0;
				line-height:1.1;
				color:#f90 !important;
				border-bottom:2px solid #38710C !important; /*#F90*/
				text-transform:uppercase;
				text-shadow:1px 1px 1px #777;
				}
			.box p {
				text-align:left !important;
				font-size:1em !important;
				line-height:1.5 !important;
				margin:0 !important;
				text-shadow:none !important;
				}
			.box ul {
					padding-left:0;
				}				
				.box ul ul li {
					margin:0;
					font-size:1em;
					}
				.box ul ul {
					padding-left:0;
					}
				.box ul li {
					text-align:left;
					font-size:0.75em;
					line-height:1.5;
					margin:0 9px;
					text-shadow:none;
					list-style:none;
					}
					.box ul li a:link,
					.box ul li a:visited,
					.box ul li a:focus,
					.box ul li a:hover,
					.box ul li a:active {
						text-decoration:none;
						color:#38710C;
						padding-left:15px;
						background:url(img/leaf.png) 0 3px no-repeat;
						}
					.box ul li a:focus,
					.box ul li a:hover,
					.box ul li a:active {
						background:url(img/leaf-h.png) 0 5px no-repeat;
						color:#C60;
						}
					.box ul li a:active {
						background:url(img/asterisk.png) 0 1px no-repeat;
						color:#F60;
						font-weight:bold;
						}

	/*******************************************/
	/* FOOTER                                  */
	/*******************************************/
	
	footer {
		position:relative;
		height:141px;
		width:100%;
		margin-top:-141px;
		}
		footer p {
			font-size:12px;
			color:#38710C;
			padding:75px 10px 0 0;
			text-align:right;
		}
		#f_bild_links  { 	background-image:url(img/footer_links.png); left:0; width:20px;	  }
		#f_bild_l_m 	 { 	background-image:url(img/footer_m_l.png); left:20px; width:10px;  }
		#f_bild_r_m	 {	background-image:url(img/footer_m_r.png); right:20px; width:10px; }
		#f_bild_rechts {	background-image:url(img/footer_rechts.png); right:0; width:20px; }
			
		#f_bild_links,
		#f_bild_l_m,
		#f_bild_r_m,
		#f_bild_rechts {
			position:absolute; 
			bottom:0;
			height:auto;
			min-height:141px;
			}
		
		#footer_innen {
			text-align:left;
			margin:0 30px;
			background:url(img/footer_mitte.png) repeat-x 0 0;
			height:auto;
			min-height:141px;
			}
			
	/*******************************************/
	/* Extra                                   */
	/*******************************************/
	.kleiner-ie6 {
		margin:40px;
		color:#fff;
		line-height:1.5em;
		}
		.kleiner-ie6 a {
			color:#fff !important;
			}
	.postmetadata {
			font-size:0.65em !important;
			margin-top:2em;
			
		}
	/* Overflow-Methode zum Clearen der Float-Umgebungen */
	.floatbox { overflow:hidden; }
	/* .floatbox-Anpassung fuer IE */
	/* Hides from IE-mac \*/
	* html .floatbox {width:100%;}
	/* End hide from IE-mac */
	.floatbox {display: inline-block; width: auto; } 

	a.www img {
		padding-bottom:20px !important;
		background:#f7f7f7 url(img/www.gif) no-repeat 100% 100% !important;
	}
	a.imagelink img {
		padding-bottom:20px !important;
		background:#f7f7f7 url(img/vergroessern.gif) no-repeat 100% 100% !important;
		}
	a.starten img {
		padding-bottom:20px !important;
		background:#f7f7f7 url(img/starten.gif) no-repeat 100% 100% !important;
	}
	.navigation_2 p,
	.navigation p{
		font-size:0.8em !important;
		font-weight:bold;
		margin-top:6em;
		margin-bottom:2em !important;
		border:2px dotted #f90;
		padding-top:8px;
		padding-bottom:10px;
		padding-left:8px;
		background-color:#fffcf2;
		text-shadow:none;
	    -webkit-border-radius: 15px;
		-khtml-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;

		}
	.nichtfett {
		font-weight:normal;
		}
	a.more-link {
		clear:both;
		display:inline-block;
		font-size:0.8em;
		text-decoration: none;
		text-align:right;
		color: #000000;
		margin-top:0.5em;
		margin-left:0;
		padding: 5px 10px 6px 10px;
	    -webkit-border-radius: 15px;
		-khtml-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		background: #ffc700;
		box-shadow: 0 2px 10px #fff, inset 0 1px hsla(0,0%,100%,.3), inset 0 .4em hsla(0,0%,100%,.2), inset 0 10px 20px #FFF200, inset 0 -15px 30px #f90;
		text-shadow:1px #ccc;
		line-height: 1.5;
		-webkit-hyphens: manual;
		}
		a.more-link:focus,
		a.more-link:hover,
		a.more-link:active {
			color:#ffffff;
		background: #f53a00;
		box-shadow: 0 2px 10px #fff, inset 0 1px hsla(0,0%,100%,.3), inset 0 .4em hsla(0,0%,100%,.2), inset 0 10px 20px #FFF200, inset 0 -15px 30px #f90;
		}
		#slideshow {
		height:150px ;
		width:450px;
		position:relative ;
		float:left;
		
		}
		#slideshow img {
			display:none ;
			position:absolute ;
			top:0 ;
			left:0 ;
			}
			#slideshow img.start {
				display:block ;
				}

		/* * * * * * * * * * * * * * * * * * * * * * * */
		/* Formulare * * * * * * * * * * * * * * * * * */
		
		form {
			margin-bottom:1em;
			margin-top:2em;
			text-align:left;
		}
		
		textarea,
		input {
			padding:1px 1px 0 3px;
			margin:0.5em 0 0 1.5em;
			padding:0.4em;
			border:1px solid #C1C1C1;
			background:#ffffff url(img/layout/zitat_bg.gif) no-repeat 100% 100%;
			color:#111111; /* #E97026; */
			font-weight:normal;
			text-shadow:1px 1px 1px #eee;
			font-size:1.1em !important;
		}
		textarea#comment {
			width:60%;
		}
		input {
			background:none;
			width:60%;
			border-width: 0 0 1px 0;
		}
		textarea:focus,
		input:focus {
			font-weight:bold;
			color:#f90;
		}
		input.submit_comment,
		input.submit_kontaktformular {
			clear:both;
			display:inline-block;
			margin-left: 20%;
			font-size:0.9em !important;
			text-decoration: none;
			text-align:center;
			color: #000000;
			padding: 8px 20px 8px 20px;
			-webkit-border-radius: 15px;
			-khtml-border-radius: 15px;
			-moz-border-radius: 15px;
			border-radius: 15px;
			background: #ffc700;
			box-shadow: 0 2px 10px #fff, inset 0 1px hsla(0,0%,100%,.3), inset 0 .4em hsla(0,0%,100%,.2), inset 0 10px 20px #FFF200, inset 0 -15px 30px #f90;
			text-shadow:1px #ccc;
			line-height: 1.5;
			-webkit-hyphens: manual;
			width:78%;

		}
		input.checkbox {
			margin:0;
			padding:0;
			width:2em;
		}
		div.psx_kontaktformular {
			padding-top:0.5em;
		}
		input.y_name,
		input.y_email,
		input.blog,
		input.your_subject,
		input.submit_kontaktformular,
		textarea.y_msg {
			margin-left:0;
		}
		textarea.y_msg {
			width:85%;
		}
	  form dl {
		margin:0;
		font-size:0.8em;
	  }
	  form dt {
		float:left;
		width:15%;
		margin-top:0.5em;
		text-align:right;
		font-size:1.1em;
		font-weight:normal;
		position:relative; /*IEWin hack*/
		color:#666666;
	  }
		form dt label {
			text-shadow:1px 1px 1px #ccc;
		}
		form dd {
			margin-left:100px;
			margin-bottom:0.9em;
			font-size:1em;
			font-style:normal;
			padding-left:0.5em;
		}
		form dd.pflichtfelder {
			text-align:right;
			margin-right:9em;
		}
		
	/* SUCHFORMULAR */
		form#searchform {
			width:100%;
		}
		input#s {
			padding:4px;
			margin:0 0 0 0;
			border:1px solid #83c84d;
			width:93%;
			background-color:#F8F8F8;
			font-size:0.8em;
			font-weight:normal;
			color:#000;
			-webkit-border-radius: 15px;
			-khtml-border-radius: 15px;
			-moz-border-radius: 15px;
			border-radius: 15px;

		}
		input#searchsubmit {
			clear:both;
			display:inline-block;
			font-size:0.8em;
			text-decoration: none;
			text-align:center;
			color: #000000;
			margin-top:0;
			margin-left:0;
			padding: 5px 10px 6px 10px;
			-webkit-border-radius: 15px;
			-khtml-border-radius: 15px;
			-moz-border-radius: 15px;
			border-radius: 15px;
			background: #ffc700;
			box-shadow: 0 2px 10px #fff, inset 0 1px hsla(0,0%,100%,.3), inset 0 .4em hsla(0,0%,100%,.2), inset 0 10px 20px #FFF200, inset 0 -15px 30px #f90;
			text-shadow:1px #ccc;
			line-height: 1.5;
			-webkit-hyphens: manual;
			width:99%;
		}
		/* * */
		img.gravatar {
			-webkit-border-radius: 50px;
			-khtml-border-radius: 50px;
			-moz-border-radius: 50px;
			border-radius: 50px;
			}
		.comment_text img {
			border:none !important;
			margin:5px !important;
			padding:0 !important;
			}
		#textinhalt .commentlist li {
			background-image:none !important;
			clear:both;
			padding:2em;
			-webkit-border-radius: 15px;
			-khtml-border-radius: 15px;
			-moz-border-radius: 15px;
			border-radius: 15px;
			
			}
		.commentlist li.alt  {
			background-color:#f9f9f9 !important;
			}
		.commentmetadata {
			font-size:0.75em !important;
			}
		label.kommentarbeschriftung {
			display: block;
			float: left;
			text-align: right;
			width: 35%;
			margin-right:0.5em;
			color: #666666;
			font-size:0.9em;
		}
		p.kommentarbeschriftung {
			color: #666666;
			margin-left:20%;
			font-size:0.8em !important;
		}
		code {
			font-family:"Courier New", Courier, monospace;
			text-align:left;
			
			}
		pre {
			font-family:"Courier New", Courier, monospace;
			font-size:0.8em !important;
			line-height:1.5em;
			display:block;
			margin:1em 0 1em 0;
			padding:2em;
			border:1px solid #ededed;
			overflow:auto;
			text-align:left;
	}
	 li.feed,
		li.feed:hover {
		font-size:1em !important;
		font-weight:bold;
		padding:40px 0 40px 55px;
		background:url(http://die.netzspielwiese.de/blog/wp-content/uploads/2009/10/rss3.jpg) no-repeat 0 50%;
	}
	li.feed a{
		background:none !important;
		padding-left:0 !important;
		font-size:1em  !important;
		}
	#lightbox img {
	 margin:0 !important;
	 padding:0 !important;
	 }
/*	#prevLink { background: url('../../plugins/wp-jquery-lightbox/styles/images/prev.gif') left 50% no-repeat !important; }
	#nextLink { background: url('../../plugins/wp-jquery-lightbox/styles/images/next.gif') right 50% no-repeat !important; }
*/

@media screen and (max-width:1010px) {
			
	#wrapper,
	#header{
		width:90%;
		}
}


@media screen and (max-width:940px) {
	#textinhalt {
		width:100%;
		margin-bottom:1.5em;
		}	
	#logo-bild {
		display:none;
		}
		
	#hauptinhalt .box {
		width:100%;
		}
	#hauptinhalt .box ul li  {
		width:20.5%;
		margin:0.35em;
		background-color:#fe9b00;
		padding:0 0 1.5em 0;
		float:left;
		position:relative;
		padding:0 10px 20px 10px;
/*		margin:1em 0 0 1.8em;
*/		/*background:url(img/bg-hintergrund-header.gif) repeat;*/
		-webkit-border-radius: 10px;
		-khtml-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		}
	#hauptinhalt .box ul ul li  {
		width:auto;
		margin:0;
		background-color:#fe9b00;
		padding:0; 
		float:left;
		}
		.box p {
			margin-left:5px !important;
			margin-bottom:1em !important;
			overflow:hidden;
			}
		.box ul {
			padding-left: 0;
			}
		#seiteninhalt h2 {
				margin: 1em 3px ;
				color:#fff !important;
				text-shadow:1px 1px 1px #777;
				border-bottom:2px solid #fff  !important;
				font-size:1.5em ;
			}
			

		.box ul li li a {
				color:#fff !important;
				text-shadow:1px 1px 1px #777;
				background-color:#fe9b00 !important;
				margin-left:5px;
			}
}


@media screen and (max-width:890px) {
	body {
		font-size:0.9em;
		}
		#header,
		#header_innen,
		#bild_links,
		#bild_l_m,
		#bild_r_m,
		#bild_rechts {
			height:220px;
			}
		#bild_links   {	background-image:url(img/header_links_220px.png); 			}
		#bild_l_m 	  { background-image:url(img/header_m_l_220px.png); 			}
		#bild_r_m	  {	background-image:url(img/header_m_r_220px.png); 			}
		#bild_rechts  {	background-image:url(img/header_rechts_220px.png); 			}
		#header_innen { background:url(img/header_mitte_220px.png) repeat-x 0 0;	}

		ul#navigation {
						padding-top:140px;
						margin:0 0 0 -10px;
					}
		html>body #header { position:absolute;
							width:100%;
							margin-top:-27px;}

		#inhalt 	{ padding-top: 180px; }
		
			#hauptinhalt .box ul li  {
				width:28.5%;
			}
	
}

@media screen and (max-width:823px) {
			#hauptinhalt .box ul li  {
				width:27.5%;
			}
}

@media screen and (max-width:720px) {
	#hauptinhalt .box ul li {
		width:43.3%;
		margin:0.3em;
		}
	#wowslider-container1 {
		display:none;
		}
	#hauptinhalt {
		    -webkit-border-radius: 10px;
			-khtml-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
		}
	#hauptinhalt h1 {
		margin-top:0.5em;
		}
	#wrapper,
	#header{
		width:95%;
		}
}
@media screen and (max-width:600px) {
	#hauptinhalt .box  ul li {
		width:42.5%;
	}
}
@media screen and (max-width:560px) {
	#hauptinhalt .box  ul li {
		width:41%;
	}
}
@media screen and (max-width:510px) {
	#hauptinhalt .box  ul li {
		width:90%;
		margin-bottom:0.6em;
		}
	body {
		font-size:0.8em;
		}
		#seiteninhalt h2 {
			font-size:1.1em;
			}
		.box ul li {
			font-size:0.85em;
			}
	#wrapper,
	#header{
		width:100%;
		}
	img#hintergrundbild {
		display:none;
	}
	img.erstesBild {
		margin: -1em 1em 0 -1.5em;
	}
	#hauptinhalt h1 {
		margin-top:0;
		margin-bottom:1em;
		}
	input#searchsubmit {
		width:96%;
	}
	#hauptinhalt img {
		max-width:85%;
		} 

}
			
@media screen and (max-width:480px) {
	body {
		font-size:0.7em;
		}
	
		ul#navigation {
			font-size:15px;
			text-transform:none; 
		}
			ul#navigation li {
				float:none;
				line-height:1;
				margin:0 10px 7px 20px;
				padding:5px;
				background-color:#38710C;
				-webkit-border-radius: 10px;
				-khtml-border-radius: 10px;
				-moz-border-radius: 10px;
				border-radius: 10px;
				text-align:center;

				display: block;
				border: 1px solid rgba(0,0,0,0.5);
				box-shadow: 0 2px 10px black, inset 0 1px hsla(0,0%,100%,.3), inset 0 .4em hsla(0,0%,100%,.2), inset 0 10px 20px hsla(0,0%,100%,.25), inset 0 -15px 30px rgba(0,0,0,0.3);
				text-shadow: 0 -1px 2px black;
				line-height: 1.5;
				-webkit-hyphens: manual;
			} 
			ul#navigation li:hover {
				background-color:#01af01;

				}
			ul#navigation li.aktiv {
				/*background-color:#75C132;*/
				background-color:#f90;
			}
				ul#navigation li a:link,
				ul#navigation li a:visited,
				ul#navigation li a:focus,
				ul#navigation li a:hover,
				ul#navigation li a:active {
					padding:3px 3px 3px 3px !important;
					color:#ffffff;
					font-weight:bold;
					border:none !important;
					}
				ul#navigation li a:focus,
				ul#navigation li a:hover,
				ul#navigation li a:active {
				}
				ul#navigation li.aktiv a:link,
				ul#navigation li.aktiv a:visited,
				ul#navigation li.aktiv a:focus,
				ul#navigation li.aktiv a:hover,
				ul#navigation li.aktiv a:active {
					color:#ffffff;
					}
				a#leistungen,
				a#portfolio,
				a#ueber-mich,
				a#blog,
				a#kontakt {
					height:auto;
					position: relative;
					width:auto;
				}
					a#leistungen span,
					a#portfolio span,
					a#ueber-mich span,
					a#blog span,
					a#kontakt span {
						height:auto;
						position: relative;
						width:auto;
						background: none no-repeat 0 0;
					}
	img#logo {
		width:75%;
		height:auto;
		}
		#header,
		#header_innen,
		#bild_links,
		#bild_l_m,
		#bild_r_m,
		#bild_rechts {
			height:400px;
			/*border:1px solid #000;*/
			}
		#bild_links   {	background-image:url(img/header_links_400px.png); 			}
		#bild_l_m 	  { background-image:url(img/header_m_l_400px.png); 			}
		#bild_r_m	  {	background-image:url(img/header_m_r_400px.png); 			}
		#bild_rechts  {	background-image:url(img/header_rechts_400px.png); 			}
		#header_innen { background:url(img/header_mitte_400px.png) repeat-x 0 0;	}
		
		#inhalt {
			margin-right:10px;
			margin-left:10px;
			margin-bottom:25px;
			padding-top:360px;
			}
			#hauptinhalt {
				padding: 10px;
				}
			img.erstesBild {
				margin-left:0;
				}
		/* Navigation ausblenden */
		.js #navigation {
			display:none;
			}
				.an #bild_links  { 	background:url(img/header_links.png);  width:20px;	  }
				.an #bild_l_m 	 { 	background-image:url(img/header_m_l.png); left:20px; width:10px;  }
				.an #bild_r_m	 {	background-image:url(img/header_m_r.png); right:20px; width:10px; }
				.an #bild_rechts {	background-image:url(img/header_rechts.png); right:0; width:20px; }
				.an #header_innen { background:url(img/header_mitte.png) repeat-x 0 0;	}
					
				.an #header,
				.an #header_innen,
				.an #bild_links,
				.an #bild_l_m,
				.an #bild_r_m,
				.an #bild_rechts {	height:161px;	}
				
				#inhalt {
					padding-top:110px;
					}
				.js #toggleNavMain {
					display:block;
					top:100px;
					right:8px;
					position:absolute;
					}
					#toggleNavMain #menu-icon {
						border:none;
						margin:0;
						padding:0;
						width:80%;
						cursor:pointer;
						}
		/* Ende Navigation ausblenden */

		
}

@media screen and (max-width:480px) {
		img#logo {
			margin-top:45px;
			}
}