/*  
  +++++++++++++++++++++++++++++++++++
  Reset und allgemeine Angaben 
  +++++++++++++++++++++++++++++++++++
  */
  * {
	margin: 0;
	padding: 0;
}
html {
	overflow-y: scroll;
}
html,
body {
	height: 100%;
}
body {
	font-size: 100.01%;
	text-align: left;
	position: relative;
	padding-left: 35px;
	padding-right: 35px;
	background: url(../bilder/hintergrund/hintergrund.jpg) no-repeat -320px -70px;
}
#haslayout {
	height: 100%;
}
#seite {
	min-height: 100%;
	margin-bottom: -100px;
}
fieldset,
img {
	border:0;
}
.clearfix:after {
	content: ".";
	clear: left;
	display: block;
	height: 0px;
	visibility: hidden;
}
select,
input,
textarea {
	font-size: 99%;
}
.skip,
a.skip {
	position: absolute;
	left: -2000em;
}
a:focus {
	outline: none;
}
#seite hr,
#topnav ul hr,
#kopfcontainer hr,
#hauptteil-container hr,
#hauptteil-innen hr,
#hauptteil-min-max hr,
.referenz-beispiele hr {
	clear: both;
	height: 1px;
	border: none;
	visibility: hidden;
	margin: 0;
	padding: 0;
}
/*  
  +++++++++++++++++++++++++++++++++++
  +++++++++++++++++++++++++++++++++++
  WEBSITE allgemein
  +++++++++++++++++++++++++++++++++++
  +++++++++++++++++++++++++++++++++++
  */
  body {
	color: #000;
	position: relative;
	font: 100%/1.4 "Trebuchet MS", Arial, Helvetica, sans-serif;
}
/*  
  +++++++++++++++++++++++++++++++++++
  Topnav
  +++++++++++++++++++++++++++++++++++
  */
  #topnavcontainer {
	position: relative;
	left: 50%;
	margin-left: -18em;
	clear: both;
	float: left;
}
#topnav {
	float: left;
	padding-right: 48px;
	background: url(../bilder/navigation/hauptnav-runder-abschluss-r.png) no-repeat right bottom;
}
#topnav ul {
	float: left;
	list-style-type: none;
	padding-left: 48px;
	background: url(../bilder/navigation/hauptnav-runder-abschluss.png) no-repeat left bottom;
}
#topnav ul li {
	position: relative;
	float: left;
	background: url(../bilder/navigation/hauptnav-verlauf.jpg) repeat-x left bottom;
}
#topnav ul li a {
	color: #888888;
	font-size: 0.95em;
	font-weight: bold;
	padding: 0.5em;
	text-decoration: none;
	text-align: center;
	display: block;
}
#topnav ul li a:hover,
#topnav ul li a:focus,
body.angebot #topnav ul li.angebot a,
body.leistung #topnav ul li.leistung a,
body.referenz #topnav ul li.referenz a,
body.kontakt #topnav ul li.kontakt a,
body.ueberuns #topnav ul li.ueberuns a {
	color: #E4239C;
}
/*  
  +++++++++++++++++++++++++++++++++++
  KOPF
  +++++++++++++++++++++++++++++++++++
  */
  #kopfcontainer {
	position: relative;
	clear: both;
}
#kopf {
	width: 80%;
	position: relative;
	max-width: 80em;
	margin: 0 auto;
	min-width: 900px;
}
#kopf #logo {
	padding-top: 50px;
	position: relative;
}
#kopf #logo a {
	width: 203px;
	margin: 0 auto;
	padding-top: 20px;
	display: block;
	font-size: 1em;
	font-weight: bold;
}
#kopf #logo a img {
	color: #0D1205;
	font-size: 0.8em;
	height: 80px;
	width: 203px;
}
#kopf #slogen {
	text-align: center;
	width: 850px;
	height: 223px;
	margin: 0 auto;
	clear: both;
	background: url(../bilder/kopf/slogan0.1.gif) no-repeat left top;
	text-indent: -9999em;
	margin-top: -137px;
}
/*  
  +++++++++++++++++++++++++++++++++++
  HAUPTTEIL allgemein
  +++++++++++++++++++++++++++++++++++
  */
  #hauptteil-container {
	clear: both;
	position: relative;
	padding-bottom: 100px;
}
#hauptteil-min-max {
	width: 80%;
	max-width: 80em;
	margin: 0 auto;
	min-width: 900px;
}
#hauptteil-innen {
	padding-left: 0;
}
/*  
  +++++++++++++++++++++++++++++++++++
  Spalte links - ausgeblendet
  +++++++++++++++++++++++++++++++++++
  */
  #spaltelinks {
	background: #9f0000;
	color: #ccc;
	float: left;
	width: 0;
	margin-left: -100%;
	position: relative;
	left: 0;
}
/*  
  +++++++++++++++++++++++++++++++++++
  Spalte Mitte
  +++++++++++++++++++++++++++++++++++
  */
  #inhalt {
	float: left;
	width: 99.5%;
	position: relative;
}
#inhalttext {
	width: 55em;
	position: relative;
	left: 4%;
	max-width: 950px;
	margin: 0px auto;
	clear: both;
}
#inhalttext h1,
#inhalttext h2 {
	font-size: 100%;
	margin-top: 10px;
	margin-bottom: -3px;
	position: relative;
	height: 40px;
	color: #333;
}
#inhalttext h1 span,
#inhalttext h2 span {
	position: absolute;
	left: -9999em;
}
#inhalttext p {
	font-size: 80%;
	margin-top: 1em;
	margin-bottom: 1em;
}
.textbox {
	width: 33%;
	float: left;
}
.textbox p {
	padding-right: 25px;
}
#inhalttext .zusatz {
	padding-top: 25px;
	padding-bottom: 35px;
	clear: both;
}
#inhalttext .zusatz h2 {
	color: #666666;
	font-size: 1em;
	height: auto;
	margin-bottom: 0.5em;
	padding-top: 0.5em;
	border-top: 1px dotted #CCC;
}
#inhalttext .zusatz p {
	margin-top: 0;
	clear: both;
}
.referenz-beispiele {
	position: relative;
	z-index: 5;
	width: 990px;
	margin-top: 25px;
	margin-bottom: 25px;
	left: 50%;
	margin-left: -470px;
}
.referenz-beispiele h2 {
	margin-bottom: 1em;
	font-size: 1.1em;
}
.referenz-beispiele ul {
	list-style-type: none;
	float: left;
	width: 990px;
}
.referenz-beispiele ul li {
	float: left;
	width: 75px;
	height: 75px;
	margin-right: 7px;
	margin-bottom: 7px;
}
.referenz-beispiele ul li a {
	display: block;
	position: relative;
	width: 75px;
	height: 75px;
	text-decoration: none;
}
.referenz-beispiele li img {
	margin: 0;
}
.referenz-beispiele em {/*Formatierung tooltip*/
	color: #666;
	font-size: 75%;
	font-weight: strong !important;
	text-align: center;
	font-style: normal;
	z-index: 100;
	position: absolute;
	top: -80px;
	left: -95px;
	width: 260px;
	height: 125px;
	padding: 10px 1px 20px;
	display: none;
	text-decoration: none;
	background: url(../bilder/tooltip/tooltip.png) no-repeat right top;
}
.referenz-beispiele em strong {
	position: relative;
	font-size: 100%;
	display: block;
	z-index: 10;
	width: 240px;
	margin-left: 11px;
	margin-bottom: -5px;
	padding-top: .4em;
	padding-bottom: .4em;
	background:  url(../bilder/referenzen/referenz-bild-verlauf.png) repeat-x left top;
	border-bottom: 1px solid #D1DCDC;
}
.projekte ul li .projekt-arbeit {
	margin-top: 5px;
}

/*  
  +++++++++++++++++++++++++++++++++++
  Spalte Rechts - ausgeblendet
  +++++++++++++++++++++++++++++++++++
  */
  #spalterechts {
	color: #000;
	float: left;
	width: 0;
	position: relative; /* IE < 7 und Safari 1.3 bis 2.0.4 */
}
/*  
  +++++++++++++++++++++++++++++++++++
  Fuss
  +++++++++++++++++++++++++++++++++++
  */
  #fuss {
	width: 80%;
	position: relative;
	max-width: 80em;
	margin: 0 auto;
	min-width: 900px;
	position: relative;
	clear: both;
	color: #FFF;
	height: 100px;

}
#fuss #adresse {
	clear: both;
	font-size: 75%;
	width: 48em;
	text-align: center;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 5px;
	color:#666;
}
#fuss #adresse a {
	color: #333;
	text-decoration: none;
}
#fuss #adresse a:hover {
	color: #FF02A5;
	text-decoration: none;
}
/*  
  +++++++++++++++++++++++++++++++++++
  +++++++++++++++++++++++++++++++++++
  WEBSITE einzelne Seiten
  +++++++++++++++++++++++++++++++++++
  +++++++++++++++++++++++++++++++++++
  */
  
  /*
  +++++++++++++++++++++++++++++++++
  Seite Home 
  +++++++++++++++++++++++++++++++++
  */

.projekte h1 {
	color: #333;
	margin-left: 25px;
	font-size: 120%;
}
.projekte {
	position: relative;
	z-index: 4;
	margin-top: 0px;
}
#slider-box {
	position: relative;
	margin: 0px auto;
	width: 894px;
		z-index: 6;
	-webkit-box-shadow: 0px 4px 6px #747474;
	-moz-box-shadow: 0px 4px 6px #747474;
	box-shadow: 0px 4px 6px #747474;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 4px solid #FFF !important;
	background: #89A737 url(../bilder/easy-slider/hintergrund.jpg) repeat-x left top;
}
#slider {
	padding-left: 260px;
	padding-top: 25px !important;
	position: relative;

}
#slider-angebot {
	padding-top: 35px;
	overflow: hidden;
	width: 250px;
	height: 205px;
	background:#DEDFE1;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 7;
	border-right: 1px solid #FFF;
}
#slider-angebot img  {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
}
#slider ul {
	list-style-type: none;
}
#slider ul li {
	width: 633px;/*	border: 1px solid #CCC;	*/
	border: none !important;
}
#slider li h2 {
	margin-top: 0;
	margin-right: 15px;
	margin-left: 200px;
	padding-top: 5px;
	color: #515151;
	font-size: 95%;
	background-image: url(../bilder/easy-slider/texthintergrund.png);
	background-repeat: repeat-x;
	background-position: left top;
}
#slider li p.titelzusatz {
	margin-top: 0;
	margin-right: 15px;
	margin-bottom: 10px;
	margin-left: 200px;
	padding-top: 3px;
	padding-bottom: 7px;
	border-bottom: 1px solid #E0E0E0;
	background-image: url(../bilder/easy-slider/texthintergrund.png);
	font-size: 75%;
	color: #555;
	font-weight: bold !important;
}
#slider ul li a {
	color: #666;
}
#slider li p span {
	display: block;
	font-size: 80%;
	margin-right: 15px;
	margin-bottom: 2px;
	margin-left: 200px;
	padding-right: 10px;
	padding-bottom: .1em;
	padding-top: .1em;
	background-image: url(../bilder/easy-slider/texthintergrund.png);
	color: #FFF;
}
#slider li img  {
	float: left;
	margin-right: 15px;
	margin-left: 15px;
	background-color: #FFF;
	padding: 4px;
	border: 1px solid #E1E1E1;
	border-right: 2px solid #DFDFDF;
	-webkit-box-shadow: 0px 2px 4px #414141;
	-moz-box-shadow: 0px 2px 4px #414141;
	box-shadow: 0px 2px 4px #414141;
}

/*body.home .referenz-beispiele {
	margin-left: -470px;
}*/
/* 
  +++++++++++++++++++++++++++++++++
  Seite Angebot 
  +++++++++++++++++++++++++++++++++
  */
  body.angebot .referenz-beispiele {
	margin-top: 5px;
}
  body.angebot #inhalttext {
	padding-top: 25px;
}
body.angebot #inhalttext .mobile,
body.angebot #inhalttext .wartung,
body.angebot #inhalttext .abo {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px dotted #CCC;
}
body.angebot #inhalttext p.intro {
	color: #7DB500;
	font-weight: bold;
}
/* 
  +++++++++++++++++++++++++++++++++
  Seite Leistung 
  +++++++++++++++++++++++++++++++++
  */
    body.leistung .referenz-beispiele {
	margin-top: 5px;
}
  body.leistung #inhalttext {
	padding-top: 25px;
}
body.leistung #inhalttext a,
body.angebot #inhalttext a {
	color: #7DB500;
	font-weight: bold;
	text-decoration: none;
}
/* 
  +++++++++++++++++++++++++++++++++
  Seite Referenz  
  +++++++++++++++++++++++++++++++++
  */
    body.referenz #inhalttext {
	left: -10px;
}
body.referenz #inhalttext #MooFlow-box {
	width: 520px;
	margin: 0 auto;
	background: repeat-x;
}
body.referenz #inhalttext #MooFlow-box h1 {
	display: none;
	margin-bottom: -40px;
}
body.referenz #inhalttext #MooFlow-box h1 span,
body.referenz #inhalttext .projekte h2 span {
	position: absolute;
	left: -9999em;
}
body.referenz #inhalttext .inhalt-spalten {
	position: relative;
	width: 49.5%;
	float: left;
	margin-top: 65px;
}
body.referenz #inhalttext .inhalt-spalten .projekte {
	width: 85%;
	padding-left: 0;
}
body.referenz #inhalttext .linke-spalte .projekte {
	margin-right: 25px;
}
body.referenz #inhalttext .rechte-spalte .projekte {
	margin-left: 35px;
}
body.referenz #inhalttext .inhalt-spalten .projekte ul  {
	margin-top: 5px;
	list-style-type: none;
}
body.referenz #inhalttext .inhalt-spalten .projekte ul li {
	margin-bottom: 15px;
	border: 1px solid #CCC;
	width: 100%;
	background: #84A135 url(../bilder/referenzen/hintergrund-verlauf.jpg) repeat-x left top;
	-webkit-box-shadow: 0px 4px 6px #747474;
	-moz-box-shadow: 0px 4px 6px #747474;
	box-shadow: 0px 4px 6px #747474;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 4px solid #FFF !important;	
}
body.referenz #inhalttext .inhalt-spalten .projekte ul li span.img-hintergrund {
	width: 100%;
	background:  url(../bilder/referenzen/referenz-bild-verlauf.png) repeat-x left top;
}
body.referenz #inhalttext .inhalt-spalten .projekte  span.img-hintergrund img {
	margin-top: 15px;
	margin-right: 15px;
	margin-left: 21px;
	background-color: #FFF;
	padding: 4px;
	border: 1px solid #E1E1E1;
	border-right: 2px solid #DFDFDF;
	-webkit-box-shadow: 0px 2px 4px #414141;
	-moz-box-shadow: 0px 2px 4px #414141;
	box-shadow: 0px 2px 4px #414141;
}
body.referenz #inhalttext .inhalt-spalten .projekte  a {
	color: #D2E2A9;
	font-weight: bold;
	display: block;
	background:  url(../bilder/referenzen/pfeil.png) no-repeat left center;
	margin-left: 5px;
	margin-top: 15px;
	margin-bottom: 25px;
	padding-left: 25px;
}
body.referenz #inhalttext .inhalt-spalten .projekte a:hover {
	color: #FFF;
}
body.referenz #inhalttext .inhalt-spalten .projekte h3 {
	height: auto;
	color: #515151;
	font-size: 95%;
	clear: both;
	margin-right: 20px;
	margin-left: 20px;
	margin-top: 15px;
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border-top: 1px solid #86A23C;
	background-image: url(../bilder/easy-slider/texthintergrund.png);
}
body.referenz #inhalttext .inhalt-spalten .projekte p.titelzusatz {
	font-size: 75%;
	color: #555;
	margin-right: 20px;
	margin-top: 0;
	margin-left: 20px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 0.8em;
	border-bottom: 1px solid #ccc;
	background-image: url(../bilder/easy-slider/texthintergrund.png);	
}
body.referenz #inhalttext .inhalt-spalten .projekte p {
	clear: both;
	margin-top: .3em;
}
body.referenz #inhalttext .inhalt-spalten .projekte p span {
	color: #FFF;
	margin-right: 20px;
	margin-left: 20px;
	margin-bottom: 3px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: .2em;
	padding-top: .2em;
	display: block;
	background-image: url(../bilder/easy-slider/texthintergrund.png);
	border-top: 1px solid #86A23C;
	border-bottom: 1px solid #86A23C;
}
/* 
  +++++++++++++++++++++++++++++++++
  Seite Kontakt
  +++++++++++++++++++++++++++++++++
  */
    body.kontakt .referenz-beispiele {
	margin-top: 5px;
}
  body.kontakt #inhalttext {
	padding-top: 25px;
}
      body.kontakt #inhalttext {
	position: relative;
	margin-left: 7%;
}
body.kontakt #inhalttext #kontakt {
	margin: 0 auto;
	width: 40%;
}
      body.kontakt #inhalttext #kontakt strong {
color: #7DB500;
font-size: 130%
}
      body.kontakt #inhalttext #kontakt p.intro {
		  margin-top: 25px;
		  padding-top: 15px;
		  border-top: 1px solid #ccc;
}
body.kontakt #inhalttext #kontakt a {
	color: #333;
	padding-left: 0;
}
body.kontakt #inhalttext #kontakt a:hover {
	color: #FF02A5;
}
/* 
  +++++++++++++++++++++++++++++++++
  Seite Über uns
  +++++++++++++++++++++++++++++++++
  */
    body.ueberuns .referenz-beispiele {
	margin-top: 5px;
}
  body.ueberuns #inhalttext {
	padding-top: 25px;
}
  #personal {
	width: 700px;
	margin: 0 auto;
}
ul#ueberuns {
	position: relative;
	list-style-type: none;
	float: left;
}
ul#ueberuns li {
	width: 33%;
	float: left;
	color: #ADADAD;
	line-height: 1.2em;
	margin-top: 20px;
}
ul#ueberuns li img {
	background-color: #FFF;
	padding: 3px;
	border: 1px solid #E1E1E1;
}
ul#ueberuns li p {
	color: #333;
	margin-top: 5px;
	padding-right: 15px;
}
ul#ueberuns li p span.abstand {
	border-bottom: 1px dotted #CFCFCF;
	display: block;
	padding-top: .2em;
	padding-bottom: .2em;
}
ul#ueberuns li span.personaltitel {
	font-weight: bold;
	font-size: 110%;
	padding-bottom: .2em;
	color: #7DB500;
}
ul#socials  {
	position: fixed;
	top: 250px;
	left: 0;
	width: 75px;
	z-index: 35; 
	}
ul#socials {
	list-style-type: none;
	}
ul#socials li a {
	display: block;
	height: 75px;
	width: 135px;
	}
ul#socials li a:hover {
	height: 75px;
	width: 135px;
	}

ul#socials li.facebook a {
	background: url(../bilder/share/facebook.png) no-repeat -15px top;
	}
ul#socials li.facebook a:hover {
	background: url(../bilder/share/facebook-hover.png) no-repeat 10px top;
	}
ul#socials li.twitter a {
	background: url(../bilder/share/twitter.png) no-repeat -15px top;
	}
ul#socials li.twitter a:hover {
	background: url(../bilder/share/twitter-hover.png) no-repeat 10px top;
	}
ul#socials li.linkedin a {
	background: url(../bilder/share/linkedin.png) no-repeat -15px top;
	}
ul#socials li.linkedin a:hover {
	background: url(../bilder/share/linkedin-hover.png) no-repeat 10px top;
}
ul#socials li.digg a {
	background: url(../bilder/share/digg.png) no-repeat -15px top;
	}
ul#socials li.digg a:hover {
	background: url(../bilder/share/digg-hover.png) no-repeat 10px top;
	}