/****************  Allgemeine Formatierung ******************************
************************************************************************/

* {
	margin: 0px;
	padding: 0px;
}

body, html {
	background-color: #FFFFFF;
/**	height: 1100px; **/
	list-style-type: none;
}

/* ************************** Layout ****************************
*****************************************************************/
body  {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: black;
}

#wrapper{
	width: 1050px;
	margin: 0 auto;
	min-height: 600px;
	height:auto; /* Important */ 
	overflow: hidden; /* Important */  /* FF Scroll-leiste */ 
	border: 1px solid #E4BD03, /* #CDCDCD; */
}

#main-header {
	width: 1050px;
	height: 150px;
	float: left;
	margin: 0px;
	padding: 0px;
	text-align: center ;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcd732+0,ffffff+10,ffffff+50,ffffff+90,fcd732+100 */
	background: #fcd732; /* Old browsers */
	background: -moz-linear-gradient(top, #fcd732 0%, #ffffff 10%, #ffffff 50%, #ffffff 90%, #fcd732 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcd732), color-stop(10%,#ffffff), color-stop(50%,#ffffff), color-stop(90%,#ffffff), color-stop(100%,#fcd732)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fcd732 0%,#ffffff 10%,#ffffff 50%,#ffffff 90%,#fcd732 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fcd732 0%,#ffffff 10%,#ffffff 50%,#ffffff 90%,#fcd732 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #fcd732 0%,#ffffff 10%,#ffffff 50%,#ffffff 90%,#fcd732 100%); /* IE10+ */
	background: linear-gradient(to bottom, #fcd732 0%,#ffffff 10%,#ffffff 50%,#ffffff 90%,#fcd732 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd732', endColorstr='#fcd732',GradientType=0 ); /* IE6-9 */

}

.headerbilder {
	float: left;
	display: block;
	line-height: 80px;
	width: 117px; 
	margin-top: 35px;
	margin-right: 5px;
}

.headerbilder:first-child  {
	margin-left: 20px;
}

.headertext {
	float: left;
	display: block;
	line-height: 80px;
	width: 525px;
	margin-right: 5px;
}

#main-navigation {
	width: 1050px;
	height: 22px;
	float: left;
	background-color: FFFFFF ;
	border-bottom:  1px solid #E4BD03; /*#8789ff; */
}

#main-navigation .menu {
	list-style-type: none;
	width: 1050px;
}

#main-navigation .menu li a{
	width: 262px; /*210px;*/
	display: block ;
	text-decoration: none ;
	float: left;
	font-family: 'Droid Serif', Arial , Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	text-align: center; 
	text-decoration: none;

	text-shadow: 1px 1px 0px #000000;
	
	-webkit-transition: all 250ms ease-in;
	-moz-transition: all 250ms ease-in;
	-ms-transition: all 250ms ease-in;
	-o-transition: all 250ms ease-in;
	transition: all 250ms ease-in;
}

#main-navigation .menu li a:hover {
	background-color: #E4BD03; /* #8789FF; */
	color: red;
	
	-webkit-transition: all 250ms ease-in;
	-moz-transition: all 250ms ease-in;
	-ms-transition: all 250ms ease-in;
	-o-transition: all 250ms ease-in;
	transition: all 250ms ease-in;
}

#content {
	width: 1050px;
	padding-top: 20px; 
	float:left;
	min-height: 600px;
}

.kontakt {
	style:width: 1050px;
}

#footer{
	width: 1050px;
	padding: 0px;
	float:left;
	height: 16px;
	text-align: center ;
	border-top: 1px solid #CDCDCD;
	font-size: 10px;
}

#artikelhaeder {
	width: 1050px;
	float: left;
}

#artikeltext {
	margin-top: 10px;
	text-align: center;
	font-size: 14px;
	font-family: 'Droid Serif', serif;
}

#artikeltext p:first-child{
	margin-top: 20px;
}

#artikeltext p {
	margin-top: 5px;
}

#wrapper-leistungen {
	width: 900px;
	margin-top: 20px;
	margin-left: 65px;
	margin-bottom: 20px;
}

.leistungen {
	border-top: 5px #E4BD03 solid ; /*#8789ff*/
	display: block ;
/*	width: 218px; */
	width: 290px;
	float: left ;
	line-height: 30px;
	margin-top: 10px;
	margin-left: 5px;
	
	text-align: center;
	font-size: 14px;
	font-family: 'Droid Serif', serif;

	background: rgb(30,87,153); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(252,215,50,1) 0%, rgba(249,235,172,1) 0%, rgba(255,255,255,1) 78%, rgba(255,249,249,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,215,50,1)), color-stop(0%,rgba(249,235,172,1)), color-stop(78%,rgba(255,255,255,1)), color-stop(100%,rgba(255,249,249,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(252,215,50,1) 0%,rgba(249,235,172,1) 0%,rgba(255,255,255,1) 78%,rgba(255,249,249,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(252,215,50,1) 0%,rgba(249,235,172,1) 0%,rgba(255,255,255,1) 78%,rgba(255,249,249,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(252,215,50,1) 0%,rgba(249,235,172,1) 0%,rgba(255,255,255,1) 78%,rgba(255,249,249,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(252,215,50,1) 0%,rgba(249,235,172,1) 0%,rgba(255,255,255,1) 78%,rgba(255,249,249,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#fff9f9',GradientType=0 ); /* IE6-9 */

	-webkit-border-radius: 8px 8px 8px 8px;
	border-radius: 8px 8px 8px 8px;	-webkit-transition: all 250ms ease-in;

	-webkit-transition: all 250ms ease-in;
	-moz-transition: all 250ms ease-in;
	-ms-transition: all 250ms ease-in;
	-o-transition: all 250ms ease-in;
	transition: all 250ms ease-in;
}

#wrapper-leistungen .leistungen:hover  {
	border-top: 5px red solid ;

	-webkit-border-radius: 8px 8px 8px 8px;
	border-radius: 8px 8px 8px 8px;	-webkit-transition: all 250ms ease-in;

	-moz-transition: all 250ms ease-in;
	-ms-transition: all 250ms ease-in;
	-o-transition: all 250ms ease-in;
	transition: all 250ms ease-in;
}

.table {
	border: 0;
	width: 500px;
	align: center;
	
	background: #E4BD03; /* Old browsers */
	background: -moz-linear-gradient(top,  #E4BD03 0%, #ffffff 25%, #ffffff 72%, #E4BD03 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E4BD03), color-stop(25%,#ffffff), color-stop(72%,#ffffff), color-stop(100%,#8789ff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #E4BD03 0%,#ffffff 25%,#ffffff 72%,#8789ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #E4BD03 0%,#ffffff 25%,#ffffff 72%,#E4BD03 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #E4BD03 0%,#ffffff 25%,#ffffff 72%,#E4BD03 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #E4BD03 0%,#ffffff 25%,#ffffff 72%,#E4BD03 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E4BD03', endColorstr='#E4BD03',GradientType=0 ); /* IE6-9 */

	-webkit-border-radius: 8px 8px 8px 8px;
	border-radius: 8px 8px 8px 8px;

}

.homestar {
	width: 30%;
	height: 110px;
	display: block ;
	font-size: 50px;
	float: left ;
	text-align: right ;
}
.hometext {
	height: 110px;
	display: block ;
	font-size: 40px;
	margin-top: 30px;
}

div.imageHold {
  padding: 55px 85px; /* damit der container die höhe des großen bildes annimmt */
  /* andere formatierung, z.B. zentrieren/etc: */
  /* .... */
}

div.imageHold div {
  float: left;
  width: 230px;
  height: 150px;
  /* ab hier kann man die abstände
  und sonstiges der bilder eintragen */
  margin-left: 50px;
  margin-top: 20px;
  background-image: url('../grafiken/content/vorher_nachher/01-01.jpg');
}

div.imageHold img {
  width: 220px;  /* wir skalieren das große bild auf die kleine größe */
  height: 150px; /* um verpixelung beim vergößern zu verhindern       */
}

div.imageHold img:hover {
  position: absolute;
  margin-left: -85px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -55px;  /* hier genau so */
  width: 400px;       /* die weite beim vergrößern */
  height: 260px;      /* die höhe beim vergrößern */
  background-image: url('../grafiken/content/vorher_nachher/01-02.jpg');
  border: 5px solid red;
}



/* ************************** TYPO ****************************
*****************************************************************/

h1 {
	font-family: 'Cherry Cream Soda', cursive;
	font-weight: 400;
	color: #E4BD03;
	font-size: 18px;
	text-align: center ;
	line-height: 80px;
	margin-top: 30px;
}

h2 {
	font-family: 'Cherry Cream Soda', cursive;
	font-weight: 400;
	color: #E4BD03;
	font-size: 20px;
	text-align: center ;
	line-height: 20px;
	margin-top: 0px;
}