/**
	* @autor Jens Köhler
	* @subpage Echtmöbel
	* HTML5
	* erstellt 2013
	
**/

/* ++++++++++++++++++++++++++++++++++++++++++++++ ALLGEMEINE FORMATIERUNGEN +++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

* {
	margin: 0px;  			/*Außenabstand */
	padding: 0px;	        /* Innenabstand oben */
}
	
html, body{
	background: #8b4513;    /* html und body Hintergrund  */
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++ Schriftarten ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
body{
	font-family: Verdana, Arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
}

p{															/* Abstand Absätze */
	margin-top: 20px;
}

h1{
	font-family: 'oswald', Verdana, Arial, sans-serif;  /* Schriftart der Hauptüberschrift */
	font-size: 40px;									/* Schriftgröße der Hauptüberschrift */
	text-align:center;									/* Schriftausrichtung */
	font-weight: 700;									/* Schriftgewicht */
	line-height: 100px;									/* Zeilenhöhe */
	color: #ffffff;										/* Schriftfarbe weiß */
	text-shadow: 1px 1px 0px #000000;					/* Schriftschatten */
	}
	
#sidebar h3{
	font-family: 'oswald', Verdana, Arial, sans-serif;  /* Schriftart der Hauptüberschrift */
	font-size: 20px;									/* Schriftgröße der Hauptüberschrift */
	font-weight: 700;									/* Schriftgewicht */
	color: #ffffff;										/* Schriftfarbe weiß */
	text-shadow: 1px 1px 0px #000000;					/* Schriftschatten */
	display:block;
	width: 230px;
	height: 40px;
	line-height: 50px;
	text-indent: 20px;
	}
	
h4{
	font-size:20px;
	text-align:center;
	}
	
#breadcrumb a {											/* Breadcrumb wird aufgerufen mit allen Links */
	font-family: 'Oswald', Verdana, Arial, sans-serif; 	/* Schriftart wird festgelegt */ 
	font-size: 12px;									/* Schriftgröße wird festgeleg */
	font-weight: 400;									/* Schriftgewicht wird festgelegt */
	color: #ffffff;										/* Schriftfarbe weiß */
	text-decoration: none;								/* keine Unterstreichung der Links */
	line-height: 43px;									/* Zeilenhöhe */
	margin-left: 30px;									/* 30 Pixel vom linken Rand entfernt */
	}
	
#breadcrumb a:hover{
	text-decoration:underline;
	font-size: 18px;
	font-weight: 700;
	color: #006400;
	}
	
footer{
		text-align: center;
		line-height: 43px;
		font-size: 10px;
		}
	
/* +++++++++++++++++++++++++++++++++++++++++++++++++++ Layout +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */	

#wrapper{								/* Wrapper ist eine Art Container in dem sich das Dokument befindet */
	width: 1050px;						/* ebensobreit wie der Header */
	margin: 0px auto;					/* mit dem ersten Wert margin 0px wird der vertikale Abstand angegeben, hier zum Body-Element; mit auto wird das Element horizontal zentriert*/
		/*border: 3px solid #000000;			 Border dient nut der Orientierung und kann später gelöscht werden */
}	

#main-header {
	width: 1050px;            			 /* Header ist 1050 Pixel breit -- für die meisten Anzeigegeräte geeignet */
	height: 250px;	          			/* Header ist 330 Pixel hoch -- reduzieren */ /* hier liegt das Headerbild */
		/*border: 1px solid #000000;	      Border dient nur der Orientierung und kann später gelöscht werden */
	float:left;							/* Textfluss nach links */
	}
	
#headerbild{
	background:url(../images/headerbild.png);	/* url (Pfad) des Hintergrundbildes */
	background-repeat:no-repeat;				/* Hintergrundbild nicht gekachelt */
	width: 1050px;								/* Breite des Hintergrundbilds */
	height: 190px;								/*Höhe des Hintergrundbilds */
	float:left;									/* Textfluss links */
}

#main-navigation{
	width: 1050px;								/* Breite der oberen Navigation gleiche Breite wie alle Elemente */
	height: 48px;								/* Höhe der oberen Navigation */
	float:left;									/* Textfluss links */
	    /* Hintergrund für die obere Navigation aus css3 generator - gradient */
	background: #fac695; /* Old browsers */
	background: -moz-linear-gradient(top,  #fac695 0%, #f5ab66 24%, #ef8d31 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fac695), color-stop(24%,#f5ab66), color-stop(100%,#ef8d31)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fac695 0%,#f5ab66 24%,#ef8d31 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fac695 0%,#f5ab66 24%,#ef8d31 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fac695 0%,#f5ab66 24%,#ef8d31 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fac695 0%,#f5ab66 24%,#ef8d31 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fac695', endColorstr='#ef8d31',GradientType=0 ); /* IE6-9 */
	
	border-bottom: 8px solid #ffe4c4;			/* unterer Rand der Navigation */
}
	
	
#breadcrumb{
	width: 1050px;						/* gleiche Breite wie alle anderen Elemente */
	height: 43px;						/* Höhe der Breadcrumb hier steht die Subnavigation - gleiche Breite wie Footer */
	background: #d2691e;				/* Hintergrundfarbe Breadcrumb und Footer */
	border-top: 8px solid #ffe4c4;	    /* 	oberer Rand */
	float:left;							/* Textfluss nach links */
}
	
#section-wrapper{						/* sorgt für die gleiche Länge von Sidebar und Content (Inhalt) */
		width: 1050px;					/* gibt die Breite des Section-Wrappers an */
		height: 450px;					/* Diese Höhe richtet sich nach der Länge des längsten Inhaltes */
		float:left;
			

	background: #ffa84c; /* Old browsers */
	background: -moz-linear-gradient(left,  #ffa84c 0px, #ffa84c 230px, #ff7b0d 230px, #ff7bod 1050px); /* FF3.6+ */ /*Pixelwerte können auf die gewünschte Breite angepasst werden - erster Wert ist die Sidebar */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffa84c), color-stop(26%,#ff7b0d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #ffa84c 0%,#ff7b0d 26%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #ffa84c 0%,#ff7b0d 26%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #ffa84c 0%,#ff7b0d 26%); /* IE10+ */
	background: linear-gradient(to right,  #ffa84c 0%,#ff7b0d 26%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=1 ); /* IE6-9 */

}
	
#sidebar{								/* Hier ist die Navigattion */
	width: 230px;						/* Sidbar ist 230 Pixel breit */
	float:left;							/* Textfluss nach links */
	margin-top: 10px;					/* Abstand zur Breadcrumb */
}	

#content{								/* Hier steht der Text */
	width:820px;						/* Content 820 Pixel breit */
	float:left;							/* Textfluss nach links */
	margin-top: 25px;					/* Abstand zur Breadcrumb */

}





footer{									/*Fußzeile */
	width: 1050px;						/* gleiche Breite wie alle andren Elemente */
	height: 43px;						/* gleiche Höhe wie Breadcrumb */
	background: #d2691e;				/* Hintergrundfarbe Breadcrumb und Footer */
	border-top: 8px solid #ffe4c4;	    /* 	oberer Rand */
	float:left;							/* Textfluss nach links */
}
	
/* +++++++++++++++++++++++++++++++++++++++++++++++++++ NAVIGATION +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */	

#main-navigation .menu{
	list-style-type: none;				/* keine Aufzählungszeichen im Menü */
	width: 1050px;						/* Breitte 1050 Pixel wie alle Elemente */
}

#main-navigation .menu li a{
	width: 173px;
	height: 42px;
	display: block;
	float: left;
	
	font-family: 'Oswald', Verdana, Arial sans-serif;  /*Browser die die Formatierung nicht lesen können verwenden Verdana oder Arial */
	font-size: 16px;								   /* Schriftgröße 16 Pixel */
	font-weight: 400;								   /* Schriftdicke 400 */
	line-height: 42px;								   /* Zeilenhöhe 42 Pixel */
	text-align:center;								   /* mittig ausgerichtet */
	color: ffffff;										/* Schriftfarbe */
	text-decoration: none;								/* keine Unterstreichung */
	text-shadow: 1px 1px 0px #000000;					/* Textschatten */
    filter: dropshadow(color=#000000, offx=1, offy=1);  /* Textschatten ie*/
	border-right: 1px solid #cccccc;					/* rechte Linie zwischen Links */
	border-left: 1px solid #666666;					    /* linke Linie zwischen Links */
	
	-webkit-transition: all 1200ms ease-in-out;			/* Fader beim verlassen des Buttons */
	-moz-transition: all 1200ms ease-in-out;
	-ms-transition: all 1200ms ease-in-out;
	-o-transition: all 1200ms ease-in-out;
	transition: all 1200ms ease-in-out;
	
} 

#main-navigation .menu li: first-child a {						/*ganz linke Begrenzung der Main-Navigation */
	border-left: none;
	width: 174px;
}

#main-navigation .menu li: last-child a{
	border-right: none;
	width: 174px;
}

#main-navigation .menu li a:hover{							/* wechselt die Hintergrundfarbe bei Mouseover in der Main-Navigation */
		background-color: rgba(222, 105, 30, 0.5);		/* Hintergrundfarbe, die beim Hovern angezeigt werden soll, der letzte Wert legt die Prozentuale Deckkraft fest 0.1 - 1.0)*/
		
		-webkit-transition: all 1200ms ease-in-out;		/* Fader bei Mouseover */
		-moz-transition: all 1200ms ease-in-out;
		-ms-transition: all 1200ms ease-in-out;
		-o-transition: all 1200ms ease-in-out;
		transition: all 1200ms ease-in-out;
		
		}	

/* +++++++++++++++++++++++++++++++++++++++++++++++++++ Seitliche NAVIGATION ++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#sidebar .menu{
	list-style-type: none;								/* keine Listenpunkte */
	width: 230px;										/* 230 Pixel breit  - gleiche breite wie die Sidebar */
	}
	
#sidebar .menu li a{										/* Menü in der Sidebar */
	width: 180px;										/* 230 Pixel breit */
	height: 36px;										/* 36 Pixel hoch */
	display: block;										/* Blockdarstellung */
	float: left;										/* Textfluss links */
	
	font-family: 'Oswald', Verdana, Arial, sans-serif;  /* Schriftart */
	font-size: 16px;									/* Schriftgröße 16 Pixel */
	font-weight: 400px;									/* Schriftgewicht 400px */
	line-height: 36px;									/* zentriert die Schrift mittig im Button (bei 36px Zeilenhöhe des Buttons) */										
	text-indent: 50px;									/* Schiebt den Text um 30 Pixel nach rechts */									
	color: #ffffff;										/* Schriftfarbe weiß */
	text-decoration: none;								/* keine Unterstreichung */
	
	text-shadow: 1px 1px 0px #000000;					/* Textschatten */
	border-bottom: 3px dashed #cccccc;					/* gestrichelte Trennlinie zwischen Buttons */
	
	-webkit-transition: all 1200ms ease-in-out;			/* Fader beim verlassen des Buttons */
	-moz-transition: all 1200ms ease-in-out;
	-ms-transition: all 1200ms ease-in-out;
	-o-transition: all 1200ms ease-in-out;
	transition: all 1200ms ease-in-out;
	}
	

#sidebar .menu li a:hover{
	background: #ffffff;
	
	-webkit-transition: all 1200ms ease-in-out;			/* Fader Mouseover des Buttons */
	-moz-transition: all 1200ms ease-in-out;
	-ms-transition: all 1200ms ease-in-out;
	-o-transition: all 1200ms ease-in-out;
	transition: all 1200ms ease-in-out;
	}

 







	
	
	
	oneclick {
	-webkit-transition: all 2s ease-out 2s;
	-moz-transition: all 2s ease-out 2s;
	-ms-transition: all 2s ease-out 2s;
	-o-transition: all 2s ease-out 2s;
	transition: all 2s ease-out 2s;
}
oneclick:active {
	color: #F39;
}