/*====================================================
	
	0.) CSS sticky footer (optional)
	1.) Grundgerüst
	2.) Navigation
	3.) Inhaltselemente
		a.) Gemischtes
		b.) Bereich 1
		c.) Bereich 2
	4.) Textgestaltung global
	5.) Formulare
	6.) Script-Module
	
===================================================*/

@import url(reset.css);

/*=====================================================
	0.) CSS STICKY FOOTER 

	Sticky Footer Solution
	by Steve Hatcher 
	http://stever.ca
	http://www.cssstickyfooter.com
	
=====================================================*/

html, body { height: 100%; }
html {
    overflow: -moz-scrollbars-vertical;
}

#wrapper { min-height: 100%;}

#main{ 
	overflow:auto;
	padding-bottom: 1px; /* must be same height as the footer */
} 

#footer { 
	clear:both;
	position: relative;
	height: 1px;
	margin-top: -1px; /* negative value of footer height */
} 

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}


/*=====================================================
	1.) GRUNDGERÜST 
=====================================================*/

body, html {
	background:#FFF url(../images/background.jpg) top center no-repeat;
}

#wrapper {
	position: absolute;
	left: 50%;
	margin-left: -487px;
	width: 975px;
}

#main {
	position: relative;
	top: 150px;
}

#image_animation {
	position: relative;
}

#image_animation div {
	position: absolute;
	height: 213px;
	width: 975px;
	overflow: hidden;
}

#image_animation .bringdienst  	{	background:#def2ea url(../images/slider_bringdienst.jpg) center 78px no-repeat; }
#image_animation .service  		{	background:#def2ea url(../images/slider_service.jpg) center center no-repeat; }
#image_animation .gruppenfoto  {	background: url(../images/slider_gruppenfoto.jpg) top center no-repeat; }

#image_animation img {
	position: absolute;
}





#footer {
}


/*=====================================================
	2.) NAVIGATION 
=====================================================*/


/*=====================================================
	3.) INHALTSELEMENTE 
=====================================================*/

/*==3.) a.) GEMISCHTES ====================================*/
.spalte {
	float: left;
    margin-left: 20px;
    width: 210px;
	text-align: center;
}

.spalte .ansicht {
	width: 210px;
	height: 126px;
	overflow: hidden;
}

.spalte.steinach   	{ background: url(../images/ansicht_steinach.jpg) center 0 no-repeat; }
.spalte.kurgarten 	{ background: url(../images/ansicht_kurgarten.jpg) center 0 no-repeat; }
.spalte.zunsweier 	{ background: url(../images/ansicht_baeren.jpg) center 0 no-repeat; }
.spalte.baeren 		{ background: url(../images/ansicht_zunsweier.jpg) center 0 no-repeat; }

.spalte .button {
	margin-left:-10px;
	margin-top:30px;
}
.spalte .button a {
	float: left;
	display: block;
	margin-left:8px;
	width: 220px;
	height: 56px;
	background: url(../images/button_shop.jpg) -229px 0 no-repeat;
}

.spalte .button a:hover {
	background-position: -6px 0px;
}

.spalte .button_email {
	float: left;
	display: block;
}



#mainbutton {
	clear: both;
	padding: 111px 0 50px 0;
	width: 622px;
	margin: 0 auto;
}

#mainbutton a {
	display: block;
	width: 622px;
	height: 56px;
	background: url(../images/mainbutton.jpg) 0 0 no-repeat;
}

#mainbutton a:hover {
	background-position: 0px -56px;
}


#app {
	position: relative;
	overflow: hidden;
	clear: both;
	margin: 0 auto 50px auto;
	width: 885px;
	height: 117px;
	background:url(../images/mainbutton.jpg) center bottom no-repeat;	
	padding: 130px 0 0 0;
}

#notfall {
	position: relative;
	overflow: hidden;
	clear: both;
	margin: 0 auto 0px auto;
	width: 984px;
	height: 117px;
	background:url(../images/notfallplan.jpg) center bottom no-repeat;	
	padding: 0 0 0 0;
	margin-top:190px;
	margin-left:-5px;
}

#app a {
	display: block;
	width: 170px;
	height: 60px;
	position: absolute;	
	top: 156px;
}
#app .apple {
	left: 513px;
}
#app .google {
	left: 692px;
}

.app {
	clear: both;
	display: block;
	width: 282px;
	height: 50px;
	margin: 0 0 7px 9px;
}


.app.kur { background:#FFF url(../images/app_freischaltcode_kur.jpg) 0 0 no-repeat; }
.app.zun { background:#FFF url(../images/app_freischaltcode_zun.jpg) 0 0 no-repeat; }
.app.baer { background:#FFF url(../images/app_freischaltcode_baer.jpg) 0 0 no-repeat; }

/*==3.) b.) BEREICH 1 =====================================*/

/*==3.) b.) BEREICH 2 =====================================*/

/*	=====================================================
	4.) TEXTGESTALTUNG GLOBAL 
=====================================================*/


/*=====================================================
	5.) FORMULARE 
=====================================================*/


/*=====================================================
	6.) SCRIPT-MODULE 
=====================================================*/

/*=====================================================
	ENDE DES STYLESHEETS
=====================================================*/