/*
-----------------------------------------------------------------------------------------------
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: 870px;
}

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



/* =BRANDING
----------------------------------------------------------------------------------------------- */
div#branding {
	height: 110px;
	left: -169px;
	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 scroll 0 0 transparent;
    font-weight: bold;
    height: 76px;
    margin-left: 55px;
    padding: 15px 10px 0;
    text-align: center;
    width: 755px;
}

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


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

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

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





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

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

ul#nav_assortment {
	position : relative;
	top: -118px;
	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,  li#nav_bio 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;
} 

li#nav_bio a {
	left: 640px;
	top: -1540px;
	background-position: -640px 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.bio ul#nav_assortment li#nav_bio 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;
}

body.juice ul#nav_assortment li#nav_bio 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: 750px;
}

	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: 2px 40px 0 25px;
	width: 305px;
}

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



/* ANGEBOT DES MONATS
----------------------------------------------------------------------------------------------- */
img#offerdisplay {
	width: 828px;
	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;
	}

table.offer tbody td img.badge {
	border: none;
	left: 20px;
	position: relative;
	top: -45px;
}

table.offer tbody td img.material {
	border: none;
	margin: 0 0 0 10px;
	position: relative;
	top: 2px;
}

body#offer h2 {
	background : url(images/orange.png) no-repeat 0 0;	
	margin-bottom: 30px;
}


tr.marked {
	background-color: #EBC968;
}

table.offer tbody tr.marked td {
    border-bottom: 1px dotted #000;
}



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

	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: 431px;
    top: -109px;
		width: 325px;
	}

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

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

	div.order ul.form li.gender label {
		width: 50px;
		display: inline-block;
		float: none;
	}

	div.order ul.form li.type label {
		width: 140px;
		display: inline-block;
		float: none;
	}

	div.order ul.form li label:focus {
		font-weight:bold;
	}
	
	div.order ul.form li.formbuttons input {
		background-image:url(images/button_send.png);
		border: none;
		color: #B37918;
		cursor: pointer;
		font-size: 1px;
		height: 37px;
		position: relative;
		width: 282px;
		text-align: right;
	}







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

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

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





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


ul#agb {
	width: 720px;
	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: 483px;
	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;
}

div.impress {
	margin-left: 85px;
	width: 600px;
}


/*
-----------------------------------------------------------------------------------------------
=KONTAKT
-----------------------------------------------------------------------------------------------
*/
ul#contact {
	height: 500px;
	margin: 0px 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;
}





/*
-----------------------------------------------------------------------------------------------
=SINGLE
-----------------------------------------------------------------------------------------------
*/

div.brand {
	float: right;
	margin: 50px 40px 0 0;	
	width: 100px;
}

div.description {
	display: inline-block;
	margin-left: 60px;	
	width: 450px;
}


/*
-----------------------------------------------------------------------------------------------
=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;
}





/* =PARTNER
----------------------------------------------------------------------------------------------- */
div#partner, div.webdesigner {
	position: absolute;
	top: -9999px;
}

div.partnerwrapper {
	background: url(images/partner.jpg) no-repeat 35px 0;	
	padding-top: 25px;
}

div.partner {
	font-size: 10px;
	position: relative;
	margin: 0 0 10px 80px;
	width: 675px;
	max-height: 65px;
	overflow: hidden;
	color: #fff;
}

div.partner a {
	font-size: 10px;
	color: #fff;	
}

div.partner a:first-child {
	padding-top: 10px;
	display: inline-block;
}



#order #content {
	margin-top: 13px;
}











/* =DATEPICKER
----------------------------------------------------------------------------------------------- */

/* the div that holds the date picker calendar */
.dpDiv {
	}


/* the table (within the div) that holds the date picker calendar */
.dpTable {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	color: #505050;
	background-color: #ece9d8;
	border: 3px solid #5D482E;
	width: 205px;
	}


/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {
	}


/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {
    background-color: #5D482E;
    height: 30px;
}


/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {
	}


/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {
	display: none;
	}


/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
	border: 1px solid #ece9d8;
	}


/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
	background-color: #EBC968;
	}


/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
	background-color: #EBC968;
	cursor: pointer;
	color: black;
	}


/* the table cell that holds the name of the month and the year */
.dpTitleTD {
	color: #fff;	
	}


/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
	}


/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
	}


/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
	background-color: #05A8DF;
	color: white;
	}


/* additional style information for the text that indicates the month and year */
.dpTitleText {
	font-size: 12px;
	color: #fff;
	font-weight: bold;
	}


/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ 
.dpDayHighlight {
	color: 4060ff;
	font-weight: bold;
	}


/* the forward/backward buttons at the top */
.dpButton {
    background: none repeat scroll 0 0 #3D362D;
    border: 1px solid #000000;
    color: white;
		cursor: pointer;
    font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif;
    font-size: 10px;
    font-weight: bold;
    padding: 0;
}


/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: gray;
	background: #d8e8ff;
	font-weight: bold;
	}
	
input.cal {
	background-image:url(images/button_calendar.png);	
	border: none;
	cursor: pointer;
	font-size: 1px;
	width: 90px;
	height: 25px;
	color: #AC7417;
	text-align: left;
}
	
	


/* =PIXXELPASSION-BADGE
----------------------------------------------------------------------------------------------- */
div.disc {
	background: url(http://www.pixxelpassion.de/banner/disclaimer_155x84.png) no-repeat 0 -40px;
	display: inline-block;
	height: 45px;
	width: 160px;
}

div.disc a {
    color: #333333;
    display: block;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 17px !important;
    font-weight: bold;
    padding: 24px 0 0 37px;
    text-transform: uppercase;
	text-decoration: none !important;	
}

div.disc:hover {
	background: url(http://www.pixxelpassion.de/banner/disclaimer_155x84.png) no-repeat 0 0px;
}

div.disc a:hover {
	color: #717f21 !important;
}

a.link {
	text-decoration: none;	
}