/*
-----------------------------------------------------------------------------------------------
INHALT
-----------------------------------------------------------------------------------------------
=GENERELLER SEITENAUFBAU
	=BRANDING
	=NAVIGATION
	=SEITENTABS
	=ANGEBOTSINFORMATIONEN
  =SEITEN INFORMATION
	=BESTELL-HOTLINE
=SORTIMENT
=BER UNS
=NEWS
=ANGEBOT
=BESTELLUNG
=LIEFERUNG
=KONTAKT
=PARTNER
=ZULIEFERER
=UMLEITUNG

*/






/* Normalizes margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h1, h2, h3, h5, h6, pre, form, fieldset, input, p, blockquote, th, td, a {
	margin: 0;
	padding: 0;
	font-family: Lucida Sans, Tretbuchet, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	text-decoration: none;
	color: #5d482e;
}

/* Normalizes font-size for headers */
h1,h1,h2,h3,h5,h6 {
font-size : 100%;
}

/* Removes list-style from lists */
ol,ul { list-style : none; }

/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, th, var
{ font-style : normal; font-weight : normal; }

/* Removes list-style from lists */
table { border-collapse : collapse; border-spacing : 0; }

/* Removes border from fieldset and img */
fieldset,img { border : 0; }

/* Left-aligns text in caption and th */
caption,th { text-align : left; }

/* Removes quotation marks from q */
q:before, q:after { content :''; }

input, select, textarea {
	background: #fef7e5;
	border: none;
	border: #f29420 1px dotted;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	text-decoration: none;
	color: #666666;
	padding: 2px;
} 

input:hover {
	border: #666666 1px dotted;
} 

input:focus, select:focus, textarea:focus {
	background: #fff;
}



a {
    outline: none;
		text-decoration: underline;
}

a:hover {
	color: #F19122;
}






/*
-----------------------------------------------------------------------------------------------
=GENERELLER SEITENAUFBAU
-----------------------------------------------------------------------------------------------
*/
body {
	background: url(images/body.jpg) no-repeat #90c5e7 center 198px;
}

div#pageHeader {
	background: url(images/pageheader.jpg) no-repeat;
	background-position: center;
	background-position: top;
	height: 200px;
	margin: auto;
	position: relative;
	width: 100%;	
}

div#header {
	height: 200px;
	margin: auto;
	position: relative;
	width: 710px;
}

div#pageContent {
	margin: auto;
	position: relative;
	width: 100%;
}

div#content {
	background-image:url(images/content.png);
	border:#0066CC 0px solid;
	margin: auto;
	position: relative;	
	width: 710px;
}

div#partner {
	position: absolute;
	top: -9999px;
}



/* =BRANDING
----------------------------------------------------------------------------------------------- */
div#branding {
	height: 110px;
	left: -100px;
	margin: auto;		
	position: absolute;
	width: 200px;	
}




/* =NAVIGATION
----------------------------------------------------------------------------------------------- */
div#navigation {
	height: 50px;
	left: 275px;
	margin: auto;
	position: absolute;
	width: 510px;
}

ul#nav {
	height : 50px;
	position : relative;
	width : 510px;
}

	ul#nav li {
		display : inline;
	}

	ul#nav li#nav_home, ul#nav li#nav_offer, ul#nav li#nav_order, ul#nav li#nav_delivery {
		position : absolute; 
		display : block;
		height : 50px; 
		width : 160px;
	}

	ul#nav li#nav_home {
		background : url(images/nav_home.gif) no-repeat 0 0;
		left : 0;
	} 

	ul#nav li#nav_offer {
		background : url(images/nav_offer.gif) no-repeat 0 0;
		left : 140px;
	} 

	ul#nav li#nav_order {
		background : url(images/nav_order.gif) no-repeat 0 0;
		left : 260px;
	} 

	ul#nav li#nav_delivery {
		background : url(images/nav_delivery.gif) no-repeat 0 0;
		left : 380px;
	} 

		ul#nav li#nav_home a, ul#nav li#nav_offer a, ul#nav li#nav_order a, ul#nav li#nav_delivery a {
			display : block;
			height : 50px; 
			text-indent : -9999px;
			width : 120px; 
		}

		ul#nav li#nav_home a {
			width : 140px; 
		}

		ul#nav li#nav_home a:hover {
			background : url(images/nav_home_hover.gif) no-repeat 0 0;
		} 
		
		ul#nav li#nav_offer a:hover {
			background : url(images/nav_offer_hover.gif) no-repeat 0 0;
		} 
		
		ul#nav li#nav_order a:hover {
			background : url(images/nav_order_hover.gif) no-repeat 0 0;
		} 
		
		ul#nav li#nav_delivery a:hover {
			background : url(images/nav_delivery_hover.gif) no-repeat 0 0;
		} 

body#home ul#nav li#nav_home a {
	background : url(images/nav_home_hover.gif) no-repeat 0 0;
	cursor: default;
}

body#offer ul#nav li#nav_offer a {
	background : url(images/nav_offer_hover.gif) no-repeat 0 0;
	cursor: default;
}

body#order ul#nav li#nav_order a {
	background : url(images/nav_order_hover.gif) no-repeat 0 0;
	cursor: default;
}

body#delivery ul#nav li#nav_delivery a {
	background : url(images/nav_delivery_hover.gif) no-repeat 0 0;
	cursor: default;
}



/* =SEITENTABS
----------------------------------------------------------------------------------------------- */
h1 {
	border:#0066CC 0px solid;
	left: -169px;
	margin-top: -30px;
	position: absolute;
	text-indent: -9999px;
	width: 203px;
}

h1.news {
	background: url(images/sidetab_news.jpg) no-repeat 0 0;
	height: 280px;
	z-index: 10;
}

h1.assortment {
	background: url(images/sidetab_angebot.jpg) no-repeat 0 0;
	height: 280px;
	z-index: 10;
}

body#home h1.assortment {
	background: url(images/sidetab_beruns.jpg) no-repeat 0 0;
	height: 280px;
	top: 53px;
	z-index: 10;
}

h1.order {
	background: url(images/sidetab_bestellung.jpg) no-repeat 0 0;
	height: 280px;
	top: 10px;
}

h1.delivery {
	background: url(images/sidetab_lieferung.jpg) no-repeat 0 0;
	height: 280px;
}

h1.impress {
	background:url(images/sidetab_impressum.jpg) no-repeat 0 0;
	height: 280px;
}

h1.agbs {
	background:url(images/sidetab_agb.jpg) no-repeat 0 0;
	height: 283px;
}

h1.contact {
	background:url(images/sidetab_kontakt.jpg) no-repeat 0 0;
	height: 283px;
	top: 10px;
}

h1.partner {
	background:url(images/sidetab_kontakt.jpg) no-repeat 0 0;
	height: 283px;
	top: 10px;
}



/* =ANGEBOTSINFORMATIONEN
----------------------------------------------------------------------------------------------- */
div#info_angebot {
	background:url(images/info_angebot.jpg) no-repeat 0 0;
	font-weight: bold;
	height: 76px;
	margin-left: 55px;
	padding: 15px 0 0 0;
	text-align: center;
	width: 624px;
}

	div#info_angebot a {
		font-weight: bold;
	}
	
	div#info_angebot a:hover {
		color: #fff;
	}


/* =SEITEN INFORMATION
----------------------------------------------------------------------------------------------- */
div.seiten_information {
	background-image: url(images/seiten_information.png);
	background-repeat: no-repeat;
	border:#0066CC 0px solid;
	height: 50px;
	margin: auto;
	padding-top: 13px;
	position: relative;
	width: 710px;
}

ul#seiten_information {
	margin: 0px;
	position: relative;
	left: 50px;
	width: 700px;
}

	ul#seiten_information li {
		display: inline;
		font-size: 0.9em;
		margin-right: 10px;
		padding-right: 10px;
	}
	
		ul#seiten_information li a{
			font-size: 0.9em;
		}
		
		
		
/* =BESTELL-HOTLINE
----------------------------------------------------------------------------------------------- */
div.hotline {
	height: 122px;
	left: 630px;
	position: absolute;
	text-indent: 0;
	top: -145px;
	width: 224px;
	z-index: 10;
}





/*
-----------------------------------------------------------------------------------------------
=SORTIMENT
-----------------------------------------------------------------------------------------------
*/

h2.assortment {
	left: 25px;
	top: -120px;
	z-index: 10;
}

ul#nav_assortment {
	position : relative;
	top: -120px;
	margin : 0px 15px 0px 50px;
	width : 640px;
	height : 385px;
}

ul#nav_assortment li {
	display : inline;
}

li#nav_water, li#nav_lemonade, li#nav_beer, li#nav_juice {
	position : relative; 
}

ul#nav_assortment li a {
	position: relative;
	background-image: url(images/navigation.jpg)
}

li#nav_water a, li#nav_lemonade a, li#nav_beer a, li#nav_juice a  {
	display : block;
	height : 385px; 
	width : 160px; 
	text-indent : -9999px;
}

li#nav_water a {
	left: 0px;
	background-position: 0px 0px;
} 

li#nav_lemonade a {
	left: 160px;
	top: -385px;
	background-position: -160px 0px;
} 

li#nav_beer a {
	left: 320px;
	top: -770px;
	background-position: -320px 0px;
} 

li#nav_juice a {
	left: 480px;
	top: -1155px;
	background-position: -480px 0px;
} 

ul#nav_assortment li a:hover {
	background-image: url(images/navigation_hover.jpg)
}


body.water ul#nav_assortment li#nav_water a {
	background-image: url(images/navigation_hover.jpg);
	cursor: default;
}

body.lemonade ul#nav_assortment li#nav_lemonade a {
	background-image: url(images/navigation_hover.jpg);
	cursor: default;
}

body.beer ul#nav_assortment li#nav_beer a {
	background-image: url(images/navigation_hover.jpg);
	cursor: default;
}

body.juice ul#nav_assortment li#nav_juice a {
	background-image: url(images/navigation_hover.jpg);
	cursor: default;
}






/*
-----------------------------------------------------------------------------------------------
=BER UNS
-----------------------------------------------------------------------------------------------
*/

/* =INTRO
----------------------------------------------------------------------------------------------- */
div#intro {
	background:transparent url(images/line.gif) repeat-x scroll center bottom;
	font-size: 1.2em;
	margin: -20px 0 50px 55px;
	padding-bottom: 10px;
	position: relative;
	top: -110px;
	width: 620px;
}

	div#intro p strong {
		font-size: 1.3em;
	}

ul.intro {
	margin-top: 20px;
}

ul.intro li {
	background: url(images/orange_small.gif) no-repeat top left;
	display: inline-block;
	margin-top: 5px;
	padding-top: 2px;
	padding-left: 25px;
	width: 250px;
}

ul.links {
	list-style-image: url(images/icon_arrow.gif);
	margin: 20px 0 0 30px;
}



/* ANGEBOT DES MONATS
----------------------------------------------------------------------------------------------- */
img#offerdisplay {
	width: 670px;
	height: 310px;
	margin: 0 0 -164px 34px;
	position: relative;
	top: -162px;
}



/*
-----------------------------------------------------------------------------------------------
=NEWS
-----------------------------------------------------------------------------------------------
*/
ul#newsticker {
	margin: 0 0 0 85px;
	position: relative;
	text-align: justify;
	width: 590px;
}

	ul#newsticker li {
		padding-bottom: 50px;
	}

h2 {
	padding: 25px 0px 0px 30px;
	position: relative;
	left: -32px;
	color: #f19122;
	font-size: 1.8em;
	background : url(images/orange.gif) no-repeat 0 0;
}

strong.subtitle {
	font-size: 1.2em;
}

ul#newsticker h2 + p + p {
	font-size: 0.9em;
	font-weight: bold;
	left: 530px;
	margin-bottom: -5px;
	position: relative;
	top: -15px;
	width: 40px;
}

ul#newsticker h2 + p + p + p {
	line-height: 1.6em;
	margin: 7px 0px 0px 15px;
	padding-bottom: 10px;
	background: url(images/line.gif) repeat-x;
	background-position: bottom;
}





/*
-----------------------------------------------------------------------------------------------
=ANGEBOT
-----------------------------------------------------------------------------------------------
*/
table.offer {
	height: 310px;
	margin-left: 55px;
	position: relative;
	top: -100px;
}

	table.offer thead th {
		border-bottom: #666666 3px solid;
		font-size: 1.2em;
		font-weight: bold;
		padding-bottom: 3px;
	}

	table.offer tbody td {
		border-bottom: #cccccc 1px dotted;
		height: 20px;
		vertical-align: top;
	}

	table.offer tbody td.price, table.offer thead th.price {
		text-align: right;
	}

	table.offer tbody td img {
		border: #cccccc 1px solid;
		margin: 10px 10px 10px 0px;
	}

	table.offer tbody tr.partition {
		border-bottom: #666666 1px solid;
		height: 70px;
	}

	table.offer tfoot td {
		border-bottom: none;
		border-top: #f39825 2px solid;
	}





/*
-----------------------------------------------------------------------------------------------
=BESTELLUNG
-----------------------------------------------------------------------------------------------
*/
div.order {
	height: 620px;
	margin: -13px 0 0 36px;
	background-image:url(images/order.jpg);
	background-repeat: no-repeat;	
	position: relative;
	width: 666px;
}

	div.order ul.phone {
		position: relative;
		left: 50px;
		top: 40px;
		width: 250px;
	}
	
	div.order ul.phone li.contact {
		font-size: 1.4em;
		font-weight: bold;
		padding: 5px 0px 0px 10px;
	}
	
	div.order ul.phone li.time {
		font-size: 0.95em;
		padding: 5px 0px 30px 13px;
	}


	div.order ul.form{
		position: relative;
		left: 320px;
		top: 70px;
		width: 325px;
	}

	div.order ul.form li{
	  margin-bottom: 10px;

	}
	
	div.order ul.form li label {
		width: 150px;
		display: block;
		float: left;
	}

	div.order ul.form li.gender label {
		width: 50px;
		display: inline-block;
		float: none;
	}
	
	div.order ul.form li label:focus {
		font-weight:bold;
	}
	
	div.order ul.form li.formbuttons input {
		position: relative;
		left: 232px;
	}







/*
-----------------------------------------------------------------------------------------------
=LIEFERUNG
-----------------------------------------------------------------------------------------------
*/
ul.delivery {
	height: 650px;
	margin: 0px 0px 0px 85px;
	position: relative;
	width: 250px;
}

	ul.delivery h2 + p {
		padding-bottom: 10px;
	}

img#map {
	position: absolute;
	top: -30px;
	left: 330px;
	z-index: 10;
}





/* AGB'S
----------------------------------------------------------------------------------------------- */


ul#agb {
	width: 570px;
	margin: 0px 0px 0px 85px;
	padding-bottom: 100px;
	position: relative;
	text-align: justify;
}

ul#agb h2 + p {
	margin: 7px 0px 15px 15px;
	padding-bottom: 10px;
	background: url(images/line.gif) repeat-x;
	background-position: bottom;
}

ul#agb .date {
	font-size: 0.8em;
	position: relative;
	float: right;
}

/* IMPRESSUM
----------------------------------------------------------------------------------------------- */

ul#impress {
	width: 350px;
	position: relative;
	margin: 0px 0px 0px 37px;
	padding: 100px 0px 160px 340px;
	background: url(images/impress.jpg) no-repeat;
	top: -40px;
}

ul#impress .title {
	margin: 30px 0px 5px 0px;
}

ul + li {
	font-weight: bold;
	padding-bottom: 10px;
}


/*
-----------------------------------------------------------------------------------------------
=KONTAKT
-----------------------------------------------------------------------------------------------
*/
ul#contact {
	height: 500px;
	margin: -15px 0px 0px 36px;
	padding: 40px 0 0 50px;
	background: url(images/contact.jpg) no-repeat;
}

ul#contact li {
	margin-bottom: 15px;
	width: 450px;
}

ul#contact li label {
	width: 80px;
	display: block;
	float: left;
}

ul#contact li label:focus {
	font-weight:bold;
}

ul#contact li.formbuttons input {
	position: relative;
	left: 80px;
	margin-right: 30px;
}

div.contact_confirmation {
	margin-left: 80px;
	padding-bottom: 40px;
	width: 400px;
}

div.contact_confirmation p {
	margin-top: 10px;
}





/*
-----------------------------------------------------------------------------------------------
=PARTNER
-----------------------------------------------------------------------------------------------
*/

h2.partner, p.partner {
	margin-left: 60px;
	z-index: 10;
}

ul.partner {
	height: 500px;
	margin: 20px 0 0 50px;
	width: 620px;
}

ul.partner li {
	outline: 1px solid;
	float: left;
	height: 100px;
	margin: 10px;
	width: 165px;
}



/*
-----------------------------------------------------------------------------------------------
=ZULIEFERER
-----------------------------------------------------------------------------------------------
*/

h2.supplier, p.supplier {
	margin-left: 90px;
	z-index: 10;
}

ul.supplier {
	height: 500px;
	margin: 20px 0 0 80px;
	width: 620px;
}

ul.supplier li {
	float: left;
	margin: 10px;
}

ul.supplier li a img {
	border: 1px solid #CCCCCC;
}

ul.supplier li a img:hover {
	border: 1px solid #000;
}

/*
-----------------------------------------------------------------------------------------------
=UMLEITUNG
-----------------------------------------------------------------------------------------------
*/
p.umleitung {
	color: #fff;
	font-size: 2em;
	position: relative;
	text-align: center;
	top: 70px;
}

p.umleitung a {
	color: #fff;
	font-size: 1em;
}