body{
	margin: 0px;
	padding: 0px;
	text-align: center;
	background-color: #000033;
	color: #666666;
	font-family:arial, sansserif;
	font-size: 12px;

}
/*-----------allgemeine auszeichnungen wie listen und ueberschriften-------------------*/
h1{
	margin-top: 0px;
	font-size: 12px;
	margin-bottom: 4px;
	color: #000033;
}
h2{
	font-size: 12px;
	border-bottom: 0px solid #666666;	
	display: inline;
	text-decoration: none;
	
}
h3{
	font-size: 9px;
	font-family:verdana, arial, sansserif;
	margin-bottom: 10px;
	color: #000033;
}
*html h3{
	margin-top: 6px;
}
h3a{
	font-size: 9px;
	font-family:verdana, arial, sansserif;
	font-weight:bold;
	color: #000033;
}
h3a{
	font-size: 9px;
	font-family:verdana, arial, sansserif;
	color: #000033;
}
ul{
	margin: 0px 0px 0px -26px;
	list-style-type: disc ;
}
*html ul{
	margin: -2px 0px 0px 15px;

}
li{
	margin: 0px 0px 0px 10px;
	
}
.klein{
	font-size: 9px;
}
a:link, a:visited{
	color: #000000;
	text-decoration: none;
}
a:hover, a.active{
	color: #000000;
	text-decoration: underline	;
}
/*-------die flaeche mit dem hintergrundbild wird hier zentriert*/
#main{
	/*width: 1017px;*/
	width: 997px;
	height: 659px;
	background-image: url(images/bg_site.gif);
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;	
	padding-top: 96px;
	text-align: center;

}
#content{
	width: 629px;
	height: 420px;
	margin-left: auto;
	margin-right: auto;

}
#navi{
	height: 28px;
	padding: 0px 5px 0px 33px;
	text-align: left;
	top: 0px;

}
*html #navi{
	padd\ing: 0px 5px 0px 40px;
}
/*----fuer jeden link der oberen navigation ist hier eine ID angegeben, damit man in den styles der links die grafik bei hover wechseln kann*/

#naviCatering a{
	background: url(images/nav_catering_off.gif) no-repeat 0px 0px;
	float: left;
	width: 94px;
	height: 28px;		
}
#naviCatering a:hover{
	background:url(images/nav_catering_over.gif) no-repeat;	
}
/*buffet*/
#naviBuffet a{
	background: url(images/nav_buffet_off.gif) no-repeat 0px 0px;
	float: left;
	width: 78px;
	height: 28px;
}
#naviBuffet a:hover{
	background:url(images/nav_buffet_over.gif) no-repeat;	
}
/*maske*/
#naviMaske a{
	background: url(images/nav_maske_off.gif) no-repeat 0px 0px;
	float: left;
	width: 122px;
	height: 28px;		
}
#naviMaske a:hover{
	background:url(images/nav_maske_over.gif) no-repeat;	
}
/*events*/
#naviEvents a{
	background: url(images/nav_events_off.gif) no-repeat 0px 0px;
	float: left;
	width: 80px;
	height: 28px;		
}
#naviEvents a:hover{
	background:url(images/nav_events_over.gif) no-repeat;	
}
/*referenzen*/
#naviReferenzen a{
	background: url(images/nav_referenzen_off.gif) no-repeat 0px 0px;
	float: left;
	width: 112px;
	height: 28px;		
}
#naviReferenzen a:hover{
	background:url(images/nav_referenzen_over.gif) no-repeat;	
}
/*friends*/
#naviFriends a{
	background: url(images/nav_friends_off.gif) no-repeat 0px 0px;
	float: left;
	width: 86px;
	height: 28px;		
}
#naviFriends a:hover{
	background:url(images/nav_friends_over.gif) no-repeat;	
}
/*der innere teil - das hintergrundbild wird auf jeder seite extra eingetragen, da es sich je nach bereich ändert*/
#inhalt{
	width: 569px;
	height: 328px;
	padding: 15px 25px 25px 45px;
	text-align: left;
	background-repeat: no-repeat;
	

}
*html #inhalt{
	/*border: 1px dotted red;*/
	w\idth: 616px;
	he\ight: 368px;
	padd\ing: 15px 25px 12px 50px;
	

}
#inhalt p{
	font-size: 12px;
	width: 480px;
	margin-top: 1px;
	
}
#divBox303030{
	height: 128px;

	width: 480px;
}

.box30{
	width: 30%;
	height: 128px;
	float: left;
	margin-right: 20px;
}
.box30 p{
	width: 200px;
	padding-left: 10px;
	margin-top: 0px;
	/*border: 1px dotted red;*/
	width: 30%;
}

.divBoxKuechenwagen{
	width: 450px;
	height: 110px;
	margin-bottom: 6px;
	border-bottom: 1px solid gray;
}
.box50{
	
	height: 128px;
	float: left;
	margin-right: 20px;
	border-bottom: 1px solid gray;
}
.box50 p{
	width: 200px;
	padding-left: 10px;
	margin-top: 0px;
	/*border: 1px dotted red;*/
	width: 65%;
}
.box20{
	width: 20%;
	height: 50px;
	float: left;
	margin-right: 10px;
	margin-top: -40px;
}
.box20 p{
	width: 100px;
	padding-left: 10px;
	margin-top: 0px;
	/*border: 1px dotted red;*/
	width: 65%;
}
/*-----------unternavigation*/
#subnavi{
	border-top: 1px solid #000033;
	padding-top: 10px;
	/*margin: 10px 10px 0px 0px;*/
	position: absolute;
	top: 450px;
	width: 500px;
	
}
*html #subnavi{
	width: 500px;
	padding: 0px;
	position: absolute;
	top: 450px;

}
#subnavi a:link, #subnavi a:visited{	
	background:url(images/star_white.gif) no-repeat 0px 2px; 	
	text-decoration: none;	
	font-size: 12px;
	color: #000033;
	font-weight: bold;
	height: 30px;	
	margin-right: 20px;
	padding: 8px;
	padding-left: 30px;
	
}
#subnavi a:hover{	
	background:url(images/star_yellow.gif) no-repeat 0px 2px; 
	
}

#star01_ON{
	padding-top: 10px;
	/*margin: 10px 10px 0px 0px;*/
	position: absolute;
	display: none;
	top: 445px;
	width: 26px;	
}	

*html #star01_ON{
	width: 26px;
	padding: 0px;
	position: absolute;
	display: none;
	top: 453px;
}

#star02_ON{
	padding-top: 10px;
	/*margin: 10px 10px 0px 0px;*/
	position: absolute;
	display: none;
	top: 445px;
	left: 380px;
	width: 26px;
}	
*html #star02_ON{
	width: 26px;
	padding: 0px;
	position: absolute;
	display: none;
	top: 453px;
	left: 380px;
}

#star03_ON{
	
	padding-top: 10px;
	/*margin: 10px 10px 0px 0px;*/
	position: absolute;
	display: none;
	top: 445px;
	left: 529px;
	width: 26px;
}	
*html #star03_ON{
	width: 26px;
	padding: 0px;
	position: absolute;
	display: none;
	top: 453px;
	left: 529px;
}

/*sterne fuer events*/
#starEvents01_ON{
	padding-top: 10px;
	/*margin: 10px 10px 0px 0px;*/
	position: absolute;
	display: none;
	top: 299px;
	left: 229px;
	width: 26px;
	z-index: 20;
}	
*html #starEvents01_ON{
	width: 26px;
	padding: 0px;
	position: absolute;
	display: none;
	top: 307px;
	left: 156px;	
}

#starEvents02_ON{
	padding-top: 10px;
	/*margin: 10px 10px 0px 0px;*/
	position: absolute;
	display: none;
	top: 299px;
	left: 370px;
	width: 26px;
	z-index: 20;
}	
*html #starEvents02_ON{
	width: 26px;
	padding: 0px;
	position: absolute;
	display: none;
	top: 307px;
	left: 297px;	
}

#starEvents03_ON{	
	padding-top: 10px;
	/*margin: 10px 10px 0px 0px;*/
	position: absolute;
	display: none;
	top: 299px;
	left: 519px;
	width: 26px;
	z-index: 20;
}	
*html #starEvents03_ON{
	width: 26px;
	padding: 0px;
	position: absolute;
	display: none;
	top: 307px;
	left: 446px;
	
}

/*die gelbe box fuer die subnavipunkte*/

.popUpSubCatering{
	width: 279px;
	height: 900px;
	background:url(images/bg_sub_catering.jpg) no-repeat; 
	position: absolute;
	top: 180px;
	left: 400px;
	z-index: 11;
	display: none;
	padding: 20px 15px 20px 15px;
	color: #333333;
	font-family:arial, sansserif;
}
*html .popUpSubCatering{
	w\idth: 314px;
	he\ight: 900px;
	padd\ing: 10px 15px 20px 15px;
}
*html #menues p{
	marg\in: 8px 0px 0px 0px;
}
.popUpSubBuffet{
	width: 279px;
	height: 1200px;
	background:url(images/bg_sub_buffet.jpg) no-repeat; 
	position: absolute;
	top: 180px;
	left: 400px;
	z-index: 11;
	display: none;
	padding: 20px 15px 20px 15px;
	color: #333333;
	font-family:arial, sansserif;
}
*html .popUpSubBuffet{
	w\idth: 314px;
	he\ight: 1200px;
	padd\ing: 10px 15px 20px 15px;
}
*html #buffets p{
	marg\in: 8px 0px 0px 0px;
}

/*unterwegs*/
.popUpSubUnterwegs{
	width: 279px;
	height: 4200px;
	background:url(images/bg_sub_unterwegs.jpg) no-repeat; 
	position: absolute;
	top: 180px;
	left: 400px;
	z-index: 11;
	display: none;
	padding: 20px 15px 20px 15px;
	color: #333333;
	font-family:arial, sansserif;
}
*html .popUpSubUnterwegs{
	w\idth: 314px;
	he\ight: 4280px;
	padd\ing: 10px 15px 20px 15px;
}
*html #unterwegs p{
	marg\in: 8px 0px 0px 0px;
}

/*maskenmobil*/
.popUpSubMaskenmobil{
	width: 462px;
	height: 347px;
	background:url(images/bg_sub_maskenmobil.gif) no-repeat; 
	position: absolute;
	top: 180px;
	left: 400px;
	z-index: 11;
	display: none;
	padding: 25px 15px 20px 15px;
	color: #333333;
	font-family:arial, sansserif;	
}
*html .popUpSubMaskenmobil{
	width: 494px;
	height: 100px;

}
#closeMaske a{
	 background: url(images/close.gif);
	 width: 90px;
	 height: 18px;
	 display: block;
	 float: right;
	 position: relative;
	 top: -25px;
	 right: -15px;
}
*html #closeMaske a{	
	 position: absolute;
	 top: 0px;
	 right: 2px;
}
#nextMaske a{
	 background: url(images/next.gif);
	 width: 59px;
	 height: 19px;
	 display: block;
	 float: right;
	 position: absolute;
	 bottom: 5px;
	 right: 0px;
}
#nextMaskeOpera a{ /*musste ich einfuegen, da es in opera einen bug gab, der ohne extrastyle fuer schmale bilder nicht zu beheben war */
	 background: url(images/next.gif);
	 width: 59px;
	 height: 19px;
	 display: block;
	 float: right;
	 position: absolute;
	 bottom: 5px;
	 right: 0px;
}

*html #nextMaske a{
	position: absolute;
	 bottom: 2px;
	 right: 2px;
}
*html #nextMaskeOpera a{/*musste ich einfuegen, da es in opera einen bug gab, der ohne extrastyle fuer schmale bilder nicht zu beheben war */
	position: absolute;
	 bottom: 2px;
	 right: 2px;
}


#close a{
	 background: url(images/close.gif);
	 width: 90px;
	 height: 18px;
	 display: block;
	 float: right;
	 position: relative;
	 top: -20px;
	 right: -15px;
}
*html #close a{	
	 pos\ition: relative;
	 top: -10px;
	 r\ight: -10px;
}
#next a{
	 background: url(images/next.gif);
	 width: 59px;
	 height: 19px;
	 display: block;
	 float: right;
	 position: absolute;
	 bottom: 45px;
	 right: 30px;
}

/*-------------kontaktbox, die auf klick aufgeht*/
#kontakt{
	width: 227px;
	height: 139px;
	background:url(images/bg_kontakt.gif) no-repeat; 
	position: relative;
	top: -355px;
	left: -40px;
	z-index: 100;
	display: none;
	padding: 25px 15px 20px 15px;
	/*border: 1px dotted red;*/
	text-align: left;
}
*html #kontakt{
	width: 260px;
	height: 186px;
	position: relative;
	top: -355px;
	left: -60px;

}
#kontakt p{
	margin: 0px 0px 15px 0px;
	text-align: left;
	width: 100%
}
#closeKontakt a{
	 background: url(images/close.gif);
	 width: 90px;
	 height: 18px;
	 display: block;
	 float: right;
	position: absolute;
	 top: 0px;
	 right: 0px;
}
*html #closeKontakt a{
	
	 pos\ition: relative;
	 top: -25px;
	 r\ight: -11px;
}
/*-------------impressumbox, die auf klick aufgeht*/
#impressum{
	width: 227px;
	height: 360px;
	background:url(images/bg_impressum.gif) no-repeat; 
	position: relative;
	top: -571px;
	left: -40px;
	z-index: 12;
	display: none;
	padding: 25px 15px 20px 15px;
	
	text-align: left;
}
*html #impressum{
	width: 260px;
	height: 400px;
	position: relative;
	top: -571px;
	left: -60px;

}
#impressum p{
	margin: 0px 0px 15px 0px;
	text-align: left;
	width: 100%
}
#closeImpressum a{
	 background: url(images/close.gif);
	 width: 90px;
	 height: 18px;
	 display: block;
	 float: right;
	 position: absolute;
	 top: 0px;
	 right: 0px;
}
*html #closeImpressum a{
	
	 pos\ition: relative;
	 top: -25px;
	 r\ight: -11px;
}
/*-------------eventbox, die auf klick aufgeht*/
.events{
	width: 227px;
	height: 139px;
	background:url(images/bg_kontakt.gif) no-repeat; 
	position: relative;
	top: -200px;
	left: -100px;
	z-index: 12;
	display: none;
	padding: 25px 15px 20px 15px;
	/*border: 1px dotted red;*/
	text-align: left;
}
*html .events{
	width: 260px;
	height: 186px;
	position: absolute;
	top: 200px;
	left: 160px;

}
.events p{
	margin: 0px 0px 15px 0px;
	text-align: left;
	width: 100%
}
#closeEvents a{
	 background: url(images/close.gif);
	 width: 90px;
	 height: 18px;
	 display: block;
	 float: right;
	 position: relative;
	 top: -25px;
	 right: -15px;
}

#boxenEvents{	
	height:400px;
	position: absolute;
	left: auto;
	right: auto;
	margin-top: 50px;
	z-index: 20;
}
*html #boxenEvents{
	height: 400px;
	pos\ition: absolute;
	margin-left: -100px;
	margin-right: -200px;
	
}

/*-------------entertainmentbox , die auf klick aufgeht*/
.entertainmentbox{
	width: 227px;
	height: 139px;
	background:url(images/bg_entertainment.gif) no-repeat; 
	position: absolute;
	top: 100px;
	left: 120px;
	z-index: 12;
	display: none;
	padding: 25px 15px 20px 15px;
	/*border: 1px dotted red;*/
	text-align: left;
	color: #333333;
	font-family:arial, sansserif;
}
*html .entertainmentbox{
	width: 260px;
	height: 186px;
	position: absolute;
	top: 100px;
	left: 20px;
}
.entertainmentbox p{
	margin: 0px 0px 15px 0px;
	text-align: left;
	width: 100%
}
#closeEntertainment a{
	 background: url(images/close.gif);
	 width: 90px;
	 height: 18px;
	 display: block;
	 float: right;
	 position: relative;
	 top: -25px;
	 right: -15px;
}
*html #closeEntertainment a{
	pos\ition: relative;
	r\ight: -11px;
	
}

/*-------------eventmitschnitttbox , die auf klick aufgeht*/
.eventmitschnittbox{
	width: 227px;
	height: 139px;
	background:url(images/bg_eventmitschnitt.gif) no-repeat; 
	position: absolute;
	top: 100px;
	left: 385px;
	z-index: 12;
	display: none;
	padding: 25px 15px 20px 15px;
	/*border: 1px dotted red;*/
	text-align: left;
	color: #333333;
	font-family:arial, sansserif;
}
*html .eventmitschnittbox{
	width: 260px;
	height: 186px;
	position: absolute;
	top: 100px;
	left: 290px;
}
.eventmitschnittbox p{
	margin: 0px 0px 15px 0px;
	text-align: left;
	width: 100%
}
#closeEventmitschnitt a{
	 background: url(images/close.gif);
	 width: 90px;
	 height: 18px;
	 display: block;
	 float: right;
	 position: relative;
	 top: -25px;
	 right: -15px;
}
*html #closeEventmitschnitt a{	
	 r\ight: -11px;
}
/*-------------entertainmentbox , die auf klick aufgeht*/
.komplettloesungbox{
	width: 227px;
	height: 139px;
	background:url(images/bg_komplettloesung.gif) no-repeat; 
	position: absolute;
	top: 100px;
	left: 650px;
	z-index: 12;
	display: none;
	padding: 25px 15px 20px 15px;
	/*border: 1px dotted red;*/
	text-align: left;
	color: #333333;
	font-family:arial, sansserif;
}
*html .komplettloesungbox{
	width: 260px;
	height: 186px;
	position: absolute;
	top: 100px;
	left: 560px;

}
.komplettloesungbox p{
	margin: 0px 0px 15px 0px;
	text-align: left;
	width: 100%
}
#closeKomplettloesung a{
	 background: url(images/close.gif);
	 width: 90px;
	 height: 18px;
	 display: block;
	 float: right;
	 position: relative;
	 top: -25px;
	 right: -15px;
}
*html #closeKomplettloesung a{
	 pos\ition: relative;
	 r\ight: -11px;
}
/*-----------------------*/

#logoKlein{
	z-index: 10; 
	position: relative; 
	top: -86px; 
	left: 510px; 
	width: 200px;
}
*html #logoKlein{
	z-index: 10; 
	position: relative; 
	top: -100px; 
	left: 300px; 
}

/*mit den links zu impressum und kontakt und der grafik "the good catering"*/
#abschluss{
	width: 583px;
	height: 25px;
	background:url(images/bg_abschluss.gif) no-repeat;
	font-family: verdana, arial, sanserif;
	text-align: left;
	font-weight: bold;
	font-size: 10px;
	color: #FFCC00;
	padding:  0px 0px 0px 42px;	
}
*html #abschluss{
	w\idth: 617px;
}
*html #abschluss p{
	margin: 10px 0px 0px 0px;
}
#abschluss a{	
	color: #FFCC00;
	text-decoration: none;
	letter-spacing: 0.2em;
}

#abschluss a:hover, a.active{
	color: #ffffff;
}



#footer{
	position: absolute;
	left: 5px;
	bottom: 5px;

}

*html #footer{
	position: absolute;
	left: 5px;
	bottom: 5px;
}