/* CONTENT
 * 
 * - general
 * - forms
 * 
 * - homepage
 * - breadcrumbnav
 * - ansatz (bereich)
 * - team (bereich)
 * - form (bereich)
 * - farbe (bereich)
 */




/* ----------------------------------------
 * =general
 */

html, body, ul, ol, li, p{
	padding: 0;
	margin: 0;				
}


html{
	height: 100%;
	color: #555;
}

img{
	border: 0;	
}

body{
	background: url(../../img/bg.png) repeat center center #FFF;
	padding: 0;
	margin: 0;
	font-family:Verdana,Arial,sans-serif;
	font-size: 11px;
	
	height: 100%;
}

/*
 * =clearfix
 * 
 *  to prevent clear-tags, src: http://jassesnee.de/easyclear/index.html (extended for ie7) 
 *  */

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* centering (v + h) with scrollbars
 * src: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
 */

#outer {
	width: 100%; 
	height: 100%; 
	overflow: hidden; 
	position: relative;
	background: url(../../img/bgshadow.png) center center no-repeat;
}
#outer[id] {
	display: table; 
	position: static;
}


#middle {
	/* ie */
	position: absolute;
	top: 50%; 
	/* end ie */
	width: 100%; 
	text-align: center;
} 
#middle[id] {
	display: table-cell; 
	vertical-align: middle; 
	position: static;
}
/* IE7 hack: schreibt die vorherigen werte wieder zurueck */
*:first-child+html #middle{  
	display: block; 
	vertical-align: middle; 
	position: absolute;
}	

#page{
	/* ie */
	position: relative; 
	/* error:
	top: -50%;
	*/
	/* end ie */
	margin: 0 auto; 
	text-align: left;
	overflow: visible;
	
	width: 1024px;
	height: 768px;				
}

/* IE7 hack: schreibt die vorherigen werte wieder zurueck */
*:first-child+html #page{  
	top: -50%;
}
/* end centering */

#logo{
	position: absolute; 
	left: 726px; 
	top: 8px; 
	width: 254px; 
	height: 81px;
}

#plus1{
	position: absolute; 
	left: 21px; 
	top: 0px; 
	width: 31px; 
	height: 768px; 
	background: url(../../img/plus_left.png) no-repeat top left;	
}
#plus2{
	position: absolute; 
	left: 551px; 
	top: 89px; 
	width: 386px; 
	height: 53px; 
	background: url(../../img/plus_top.png) no-repeat top left;			
}
#plus3{
	position: absolute; 
	left: 988px; 
	top: 152px; 
	width: 28px; 
	height: 608px; 
	background: url(../../img/plus_right.png) no-repeat top left;	
}


#cornerplus-nw{
	position: absolute; 
	left: 147px; 
	top: 196px; 
	width: 31px; 
	height: 31px; 
	background: url(../../img/cornerplus_medium.png) no-repeat top left;	
}
#cornerplus-ne{
	position: absolute; 
	left: 919px; 
	top: 165px; 
	width: 39px; 
	height: 37px; 
	background: url(../../img/cornerplus_big.png) no-repeat top left;	
}
#cornerplus-sw{
	position: absolute; 
	left: 93px; 
	top: 687px; 
	width: 39px; 
	height: 37px; 
	background: url(../../img/cornerplus_big.png) no-repeat top left;	
}
#cornerplus-se{
	position: absolute; 
	left: 884px; 
	top: 645px; 
	width: 31px; 
	height: 31px; 
	background: url(../../img/cornerplus_medium.png) no-repeat top left;	
}






.cornered div{
	position: absolute; 
	z-index: 40;
	background: url(../../img/cornerplus_small.png) no-repeat top left;	
	width: 16px;
	height: 17px;
}
.cornered .sub-nw{
	left: -9px;
	top: -9px;
}
.cornered .sub-ne{
	right: -9px;
	top: -9px;
}
.cornered .sub-sw{
	left: -9px; 
	bottom: -9px;
	
}
.cornered .sub-se{
	right: -9px;
	bottom: -9px;
}



.container-2half .sub-left{
	float: left;
	width: 49%;
}
.container-2half .sub-right{
	float: right;
	width: 49%;
}




#header{
	margin-bottom: 2px;
}
#header img{
	margin-bottom: 30px;
	height: 22px;
}

#header img.subhl{
	height: 22px;
	margin-bottom: 15px;
}

#endline{
	position: absolute;
	left: 506px;
	top: 448px;
	width: 200px;
	text-align: right
}

#contentwrap{
	position: absolute;
	left: 178px;
	top: 218px;
	width: 720px;
	font-size: 12px;
}
#textwrap{
	font-size: 12px;
}


.lightbox-wrap{
	padding: 10px 10px 0 10px;
}
.lightbox-wrap #textwrap{
	position: static;
	left: 0;
	top: 0;
	width: auto;
}
.lightbox-wrap #endline{
	position: static;
	left: 0;
	top: 0;
	padding: 10px 0;
	width: auto;	
}

#textwrap p{
	padding-bottom: 1.4em;
}



#prevnext{
	position: absolute;
	text-align: right;
	top: -10px;
	right: 0px;
	width: 30px;
}
	
/* vor- und zurueck blaettern */
#prevnext a.sub-prev{
	display: block;
	width: 12px;
	height: 12px;
}

#prevnext a.sub-prev{ float: left; }
#prevnext a.sub-next{ float: right; }									
		
/* subnavigation im header-bereich */				
#nav{
	position: absolute;
	left: 110px;
	top: 95px;
}				
.navblock{
	margin-right: 2px;
	background-color: #FFF;
	float: left;
	padding: 8px 0 8px 8px;
	opacity: 0.8;
}
	
.navblock ul{
	list-style: none;
	float: left;
	padding-right: 8px;	
}
.navblock li{
	white-space: nowrap;
	float: left;
	clear: both;
	line-height: 17px;
}		
	
.navblock ul li span, .navblock ul li span a{
	color: #CF142B;
}


/* funktionsnavigation */
#fnav{
	position: absolute;				
	left: 111px;
	top: 11px;
}

#fnav ul{
	list-style-type: none;				
}

#fnav li{
	float: left;
	margin-right: 7px;
}

#fnav .sub-info{
	position: absolute;
	left: 38px;
	top: 0;
	font-size: 10px;	
}

/* subnavigation */
#snav{
	position: absolute;
	left: 118px;
	top: 88px;
}

#snav ul{
	list-style-type: none;
	line-height: 11px;
}

#snav li span,
#snav li span a{
	color: #CF142B;
}
	
#snav li a{
	text-decoration: none;
}
	
#snav li a:hover{
	text-decoration: underline;
}	
.snav-area{
	float: left;
	background: url(../../img/mnav/snav_bg.png) repeat top left;
	padding: 6px;
	position: relative;
	margin-right: 13px;
	font-size: 9px;
}


.snav-area div{
	position: absolute; 
	z-index: 40;
	background: url(../../img/mnav/snav_plus.png) no-repeat top left;	
	width: 7px;
	height: 7px;
}
.snav-area .sub-nw{
	left: -4px;
	top: -4px;
}
.snav-area .sub-ne{
	right: -4px;
	top: -4px;
}
.snav-area .sub-sw{
	left: -4px; 
	bottom: -4px;
	
}
.snav-area .sub-se{
	right: -4px;
	bottom: -4px;
}


ul.std{
	/*list-style-type: none;*/
	list-style-position: outside;
	padding: 0 0 1.4em 1.4em;
	list-style-image:url(../../img/bullet.png);
}

.error{
	color: #CF142B;
}

ul.error{
	list-style-position: outside;
	padding: 0 0 1.4em 1.4em;
	list-style-image:url(../../img/bullet.png);	
}

h3{
	padding: 0;
	margin: 0;
	font-size: 12px;
	font-weight: bold;	
}

a,
a:link,
a:visited,
a:hover,
a:active{
	text-decoration: underline;
	color: #555;
}

.small{
	font-size: 10px;				
}

/* hauptnavigation innenseiten */

#mnav{
	position: absolute;
	top: 35px;
	left: 111px;						
}
#mnav ul{
	list-style-type: none;						
	width: 380px;
}

#mnav li{
	float: left;	
	height: 38px;						
}
#mnav li.sub-ansatz{ width: 105px; }
#mnav li.sub-team{ width: 93px; }
#mnav li.sub-farbe{ width: 89px; }
#mnav li.sub-form{ width: 87px; }


#mnav .sub-info{
	position: absolute;
	left: 260px;
	top: 15px;
	font-size: 14px;
	width: 200px;
}

/* ----------------------------------------
 * =forms
 */

#contactform{
	width: 450px;
}
label{
	float: left;
	width: 100px;
}
	
div.formcol{
	float: left;
	width: 350px;
}
	
div.formcol input,
div.formcol textarea{		
	width: 100%;
	border: 1px solid #555;
	font: inherit;
}
	
div.formrow{
	margin-bottom: 5px;			
}		
	
form .sendline{
	text-align: right;
}	
/* ----------------------------------------
 * =homepage
 */

#page.hp{
	background-image: url(../../img/home/bg.jpg);
}

#page.hp .sub-title{				
	position: absolute; 
	left: 565px; 
	top: 713px; 
	width: 403px; 
	height: 45px;
}

/* navigationspunkte */

#hpnav{
	list-style-type: none;
	position: absolute;
	top: 0;
	left: 0;
}

#hpnav li{
	position: absolute;
}


#hpnav li span{
	position: absolute;
	display: none;
}
#hpnav li.sub-ansatz{
	left: 248px;
	top: 70px;
	width: 74px;
	height: 63px;
}
#hpnav li.sub-ansatz span{
	left: 0px;
	top: 82px;				
}

#hpnav li.sub-form{
	left: 97px;
	top: 291px;
	width: 218px;
	height: 193px;
}
#hpnav li.sub-form span{
	left: 15px;
	top: 156px;				
}

#hpnav li.sub-team{
	left: 118px;
	top: 676px;
	width: 204px;
	height: 83px;
}
#hpnav li.sub-team span{
	left: 213px;
	top: -9px;				
}

#hpnav li.sub-farbe{
	left: 786px;
	top: 510px;
	width: 103px;
	height: 84px;
}
#hpnav li.sub-farbe span{
	left: 30px;
	top: -34px;				
}

/* text-teaser*/
#hpteaser{
	position: absolute;
	left: 688px;
	top: 174px;
	width: 250px;
}
#hpteaser .sub-inner{
	padding: 11px;
	position: relative;										
}
#hpteaser .sub-inner p{
	font-size: 10px;
	line-height: 2em;
	padding-bottom: 0;
}
#hpteaser .sub-inner div{
	position: absolute;
	background: url(../../img/plus_h.png) top left no-repeat;	
	width: 10px;
	height: 10px;			
}

#hpteaser .sub-inner .sub-nw{ top: 0; left: 0; }
#hpteaser .sub-inner .sub-ne{ top: 0; right: 0; }
#hpteaser .sub-inner .sub-sw{ bottom: 0; left: 0; }
#hpteaser .sub-inner .sub-se{ bottom: 0; right: 0; }


/* ----------------------------------------
 * =breadcrumbnav
 */

#navbreadcrumbs{
	position: absolute;
	left: 174px; 
	top: 160px;
	line-height: 17px;
	color: #CF142B;
	font-size: 10px;
}
#navbreadcrumbs span{
	position: relative;
	display: block;
	float: left;
	margin: 0 4px;
	/* font-weight: bold;*/
}
#navbreadcrumbs span li a{
	font-weight: normal;
	text-decoration: underline;
	color: #555; 
}
#navbreadcrumbs span li strong a{
	/*font-weight: bold;*/
	font-weight: normal;
	text-decoration: none;
	color: #CF142B;
}
#navbreadcrumbs a{
	color: #CF142B;
	text-decoration: none;
}
#navbreadcrumbs strong{
	font-weight: normal;
}									
												
.hovernav{
	display: none;
	font-size: 10px;
	position: absolute;
	left: -8px;
	top: -38px; /* 0 - 8 - 2*11 - 2*(15-11) */
	z-index: 100;
	background-color: #FFF;
	float: left;
	padding: 8px;
}
.hovernav ul{								
	list-style: none;	
}
.hovernav li{
	white-space: nowrap;
	float: left;
	clear: both;
	line-height: 17px;
}
.hovernav li a{
	display: block;
}
.hovernav li a:hover{
	color: #cf142b;
}

/* schliessen-button lightbox */
#closeBut{
	z-index: 500;
}


/* ----------------------------------------
 * =ansatz
 */

 #page.ansatz{
	background-image: url(../../img/ansatz/bg.jpg);
}

#page.ansatz #deco1{
	position: absolute; 
	left: 81px; 
	top: 146px; 
	width: 74px; 
	height: 60px;
	background: url(../../img/ansatz/butterfly1.png) no-repeat top left;	
}

#page.ansatz #deco2{
	position: absolute; 
	left: 898px; 
	top: 666px; 
	width: 74px; 
	height: 60px;
	background: url(../../img/ansatz/butterfly2.png) no-repeat top left;	
}

/* ----------------------------------------
 * =team
 */

 #page.team{
	background-image: url(../../img/team/bg.jpg);
}

#page.team #deco1{
	position: absolute; 
	left: 86px; 
	top: 158px; 
	width: 60px; 
	height: 55px;
	background: url(../../img/team/feet1.png) no-repeat top left;	
}

#page.team #deco2{
	position: absolute; 
	left: 901px; 
	top: 677px; 
	width: 60px; 
	height: 55px;
	background: url(../../img/team/feet2.png) no-repeat top left;	
}

#page.team .sub-container .sub-left{
	float: left; 
	width: 220px;
}
#page.team .sub-container .sub-left .cornered{
	width: 212px; 
	position: relative;
	margin-bottom: 20px;
}
#page.team .sub-container .sub-right{
	float: right; 
	width: 470px;
}


/* ----------------------------------------
 * =form
 */

 #page.form{
	background-image: url(../../img/form/bg.jpg);
}

#page.form #deco1{
	position: absolute; 
	left: 85px; 
	top: 172px; 
	width: 40px; 
	height: 123px;
	background: url(../../img/form/graph1.png) no-repeat top left;	
}

#page.form #deco2{
	position: absolute; 
	left: 924px; 
	top: 583px; 
	width: 40px; 
	height: 128px;
	background: url(../../img/form/graph2.png) no-repeat top left;	
}


/* ----------------------------------------
 * =funktion
 */

 #page.funktion{
	background-image: url(../../img/funktion/bg.jpg);
}

/* ----------------------------------------
 * =farbe
 */

 #page.farbe{
	background-image: url(../../img/farbe/bg.jpg);
}
#page.farbe #deco1{
	position: absolute; 
	left: 86px; 
	top: 158px; 
	width: 60px; 
	height: 55px;
	background: url(../../img/farbe/flower1.png) no-repeat top left;	
}

#page.farbe #deco2{
	position: absolute; 
	left: 901px; 
	top: 670px; 
	width: 60px; 
	height: 55px;
	background: url(../../img/farbe/flower2.png) no-repeat top left;	
}

#page.farbe .cornered{
	float: left; 
	width: 345px; 
	position: relative;
}

#page.farbe .sub-description{
	float: right; 
	width: 358px;
}

#page.farbe .sub-footnote{
	position: absolute; 
	bottom: 0;  
	right: 0; 
	height: 3.8em; 
	width: 358px;
}
#page.farbe .cornered span{
	display: block; 
	width: 345px; 
	height: 335px; 
	background-color: #FFF;
}
#page.farbe .cornered img{
	width: 345px;
	height: 335px;
}