/*
	------------ FARBEN -----------------
	
	Textgrau: #60606A
	MM-pink: #F20D54
	MM-yellow: FDB60D

*/


* {
	margin: 0;
	padding: 0;
/*	border:0; */
	}


html {
	font:62.5%/1.3 verdana, helvetica, arial, sans-serif; /* Resets 1em to 10px */
	color: #60606A;
	}

body{
	text-align:center;
	background-color:white;
	}

img, img a {
	border:0;
	}
	
div#container{
	position:relative;
	margin:0 auto;
	width:835px;
	clear:both;
	}

a {
 	color:#F20D54;
 	text-decoration:none;
	}
	
p a{
	color:#F20D54;
	border-bottom:1px dotted #F20D54;	
	}
p a:hover{
	background-color:#F20D54;
	color:white;
	}

/* STARTPAGE */


#start_left{
	float:left;
	text-align:right;
	width:250px;
}

#start_container{
	position:relative;
	margin:auto;
	width:820px;
	clear:both;
	font-size:140%;
	top:70px;
	}

#start_main{
	top:70px;
	width:545px;
	float:right;
	text-align:left;
}

#start_text{
	width:545px;
	height:60px;
	margin-bottom:25px;
	text-align:right;
}

#start_text h1{
	margin-bottom:10px;
	color:black;
	font:200% verdana, helvetica, arial , sans-serif;
	font-weight:normal;
	letter-spacing:0.03em;
	text-transform:lowercase;
}

#start_news{
	float:left;
	background: url('images/start/wat-is-nieuw.gif') top left no-repeat;
	padding:27px 18px 18px 18px;
	width:224px;
	height:215px;
}

#start_news h3{
	color:#484848;
	font:85% verdana, arial, sans-serif;
	font-weight:bold;	
	margin-top:15px;
	margin-bottom:3px;
	text-transform:lowercase;
}

#start_news  p{
	color:#484848;
	font-weight:normal;
	font:75%/1.2 verdana, arial, sans-serif;
}

#start_news  a{
	text-decoration:none;
	color:#F20D54;
}

#start_news  a:hover{
	text-decoration:none;
	color:white;
	background-color:#F20D54;
}

#start_right{
	float:right;
	width:260px;
	height:260px;
}

#subbar{
	clear:both;
/*	padding-top:20px; */
	width:820px;
	background-color:#ffffff;
}

.subbar_button{
	float:left;
	margin-top:12px;
	margin-right:19px;
	border:0;
	}

#start_footer{
	padding-top:20px;
	text-align:left;
	clear:both;
	width:820px;
	color:#ddd;
	font-size:90%;
	}

#random_mix{
	width:250px;
	height:180px;
	text-align:center;
	}

#random_mix img.z{
	margin:9px;
	height:40px;
	width:60px;
	}	
	

/*  KOPF & MENUE */


#kopf{
	margin:auto;
	margin-top:0;
	position:relative;
	width:835px; 

	}


#kopf-logo{
	width:270px;
	position:relative;
    float:left;
	top:40px;
	}

#navigation{
	float:right;
	margin-top:61px;
	width:478px;
	text-align:right;
	}
	
.menu-element{
	float:left;
	margin-right:60px;
	padding:0;
	}

.menu-element-before-right{
	float:left;
	margin-right:0;
	padding:0;
	}

.menu-element-right{
	margin-right:0;
	padding:0;
	margin-left:0;
	}

/* SUBMENUE */

#left_sub{
	width:255px;
	float:left;	
/*	height:280%; */
	}

#submenu{
	margin:50px 0;
	text-align:right;
	}


.menue_1{ 
	text-align:right;
	font:170% verdana, helvetica, arial , sans-serif;
	font-weight:normal;
	letter-spacing:0.1em;
	text-transform:lowercase;
 	padding-bottom:8px;
 	padding-top:5px;
	}
.menue_1 a{
	text-decoration:none;
	color:black;
	}

.menue_1 a:hover{
	text-decoration:none;
	color:black;
	border-bottom:1px dotted black;
	}

.menue_1_top_space{
 	padding-top:30px;
	}

.menue_2, .menue_2_first, .menue_2_last {
	font:140% verdana, helvetica, arial , sans-serif;
	font-weight:normal;
	letter-spacing:0.1em;
	text-transform:lowercase;

	text-align:right;
	color:#555555;

	padding-bottom:3px;
	margin:0 3px 3px 40px;
	}


.menue_2_first {
 	padding-top:3px;
	border-top:1px dotted #dedede;
	padding-right:3px;
	}

.menue_2_last {
	border-bottom:1px dotted #dedede;
	padding-bottom:5px;
	margin-bottom:20px;
	}

		
.menue_2 a, .menue_2_first a, .menue_2_last a {
	color:#555555;
	}	

.menue_login{
	font:130%/2 verdana, helvetica, arial , sans-serif;
	font-weight:bold;
	text-transform:lowercase;
	text-align:right;
	color:black;

	margin-top:75px;
	}
.menue_login a{
	color:black;
	}

.menue_login a:hover{
	color:#F20D54;
	}

/* WARENKORB */

.warenkorb_status{
	width:120px;
	margin-top:70px;
	float:right;
	}


/* HAUPTFENSTER */

#main {
	position:relative;
	width:575px;
	text-align:left;
	margin-left:256px;
	margin-bottom:50px;

	}

#main_text{
	margin:57px 0 50px 96px;
	float:right;
	width:478px;
	}


h1{
	margin-bottom:15px;
	color:black;
	font:300% verdana, helvetica, arial , sans-serif;
	font-weight:normal;
	letter-spacing:0.03em;
	text-transform:lowercase;
	}

h2{
	margin-top:25px;
	margin-bottom:5px;
	padding-bottom:2px;

	color:black;
	font:220% verdana, helvetica, arial , sans-serif;
	font-weight:normal;
	letter-spacing:0.03em;
	text-transform:lowercase;
	
	border-bottom:1px solid #dedede;
	}
	
h2.alt{
	margin-bottom:15px;
	}	

h3{
	margin-bottom:10px;
	font:160%  helvetica, arial , sans-serif;
	font-weight:bold;
	}

h4 {
	font:16px verdana, helvetica, arial, sans-serif;
	color: black;
	margin:0;
	padding:0;
	margin-bottom:15px;
}

h2.draw_mix{
	margin-top:20px;
	margin-bottom:20px;
	}

#main p{
	font:135%/1.25 verdana, arial, sans-serif;
	}

p.story {
	font:120%/1.6 verdana, arial, sans-serif;
	text-align:justify;
	margin-bottom:1em;
	width:460px;
	float:none;
	}
	
.quote	{
	font:160%/1.4 times new roman, serif;
	font-style:italic;
	color:black;
	
	text-align:right;
	float:right;
	margin: 0 60px 10px 25px;
	padding-left:45px;
	padding-top:7px;
	width:170px;
	background:url('images/quote_back_gelb.gif') top left no-repeat;
	}

/* BLOG */
p.blog_intro {
	font:90%/1.6 verdana, arial, sans-serif;
	text-align:justify;	
	}
	
/* FAQ */

.frage{
	padding:0;
	margin:0;
	}
	
.frageblock{
	margin-bottom:0;
	}

.frage h3 a{

	text-decoration:none;
	color:#F20D54;
	font-weight:normal;
	}
	
.frage h3 a:hover{
	color:black;
	}

.antwort{
	/*height:5000px; */
	overflow:auto;
	background-attachment: scroll;
	}

	
/* MIXER STEPS */


#steps_mixer{
	position:absolute;
	margin:auto;
	top:25px;
	left:72px;
	}

#mixer_right_side{
	width:580px;
	float:right;
	}



#steps_order{
	height:40px;
	margin-bottom:10px;
	position:relative;
	text-align:left;
	}

.mixer_step{
	margin-left: 24px;
	}


#mixer_intro{
	text-align:left;
	margin-left:70px;
	width:400px;
	}

/* MIXER */

#mixer_dose{
	padding-top:30px;
	width:215px;
	float:left;
	}

#mixer_ingredients{
	margin-left:216px;
	}

/* ZUTATENFENSTER */

p.kategorie_beschreibung{
	color: #60606A;
	font: 100%/1.2 verdana, helvetica, arial, sans-serif;
	}

#mixer_zutatenfenster{
	top:90px;
	margin: auto;
	position:relative;
	width:580px;
	height:470px;
	overflow:auto;
	float:right;

	font-family: verdana, helvetica, arial, sans-serif;
	border-bottom: solid 1px silver;
	}

.zutat{
	text-align:left;
	}

.zutat h3{
	margin-bottom:2px;
	margin-top:0;
	}

.zutat h3 a{
	color:#333;
	font: 140%/1.2 helvetica, arial, sans-serif;
	text-decoration:none;
	}

.zutat_bild, .zutat_bild_ausverkauft{
	margin:5px 0 10px 0;
	position:relative;
	float:left;
	width:150px;
	height:124px;
	padding-left:65px;
	background:url('/images/mixer-pfeil-leer.gif') no-repeat;
	
	}
	
.zutat_bild:hover{
	background:url('/images/mixer-pfeil.gif') no-repeat;
	}

.zutat_bild_ausverkauft:hover{
	background:url('/images/mixer-pfeil-ausverkauft.gif') no-repeat;
	}


.zutat_name{ 
	font: 100%/1.1 helvetica, arial, sans-serif;
	padding-top:35px;
/*	padding-right:20px; */
	float:right;
	position:relative;
	width:335px;
	}

.zutat_benefit{
	width:80%;
	font: 140%/1.2 arial, sans-serif;
	}

.zutat_info{
	font: 85% helvetica, arial, sans-serif;
	position:relative;
	width:300px;
	}

.zutat_aus{
	color:#b0b0b0;
	}
.zutat_small {
	font-size: 9px !important;
	color: #d0d0d0;
}
.zutat_spacer{
	clear:both;
	border-bottom:solid 1px #cecece;
	margin:0 20px 0 65px;
	height:0px;
	}

 .zutat_button{
 	text-decoration:none;
	margin:15px 0;
	padding-bottom:1px;
	font: 130%/1.2 helvetica, arial, sans-serif;
 	}
 	
  .zutat_button a:hover{
  	
  	border-bottom:1px dotted #F20D54;
  	text-decoration:none;
  	}
  
  .zutat_eigenschaft{
  	color:#ec4c0d;
	text-decoration:none;
	padding: 15px 10px 2px 19px;
	height:28px;
	background:url('images/harken_orange1.gif') left no-repeat;
	}
  
  .mixer_hover_pfeil{
  	width:65px;
  	float:left;
	}

.mixer_weiter{
	margin-top:10px;
	}

.mixer_weiter a{
  	color:white;
  	background:#F20D54;
  	padding:3px 8px;
  	text-decoration:none;
	}

.mixer_weiter a:hover{
  	background:white;
  	color:#F20D54;
  	border-bottom:1px dotted #F20D54;
  	}

/* ZUTATEN LEXIKON ****************************************** */

.lexikon_zutat{
	text-align:left;
	margin:20px 0 50px 0;
	}
	
.lexikon_zutat_bild{
	float:left;
	margin-top:10px;
	margin-right:10px;
	margin-bottom:25px;
	padding:0;
	}

.lexikon_zutat_text{
	font: 95%/1.4 verdana, arial, sans-serif;
	width:295px;
	float:right;
	padding-bottom:15px;
	}

.lexikon_zutat_text h3{
	font: 200%/1.2 helvetica, arial, sans-serif;
	padding-top:10px;
	position:relative;
	margin-bottom:10px;
	color:black;
	}

.lexikon_zutat_text p{
	font: 90%/1.2 helvetica, arial, sans-serif;
	}

.lexikon_zutat_eigenschaft{
  	color:#ec4c0d;
	text-decoration:none;
	padding: 15px 10px 2px 19px;
	height:28px;
	background:url('images/harken_orange1.gif') left no-repeat;
	}

.lexikon_zutat_eigenschaften{
	padding-top:15px;
	}

#lexikon div.zutat_spacer{
	clear:both;
	border-bottom:solid 1px #eeeeee;
	margin:0;
	height:0;
	}

/*  Kategorien ********************************************** */

#mixer_kategorien{
	top:90px;
	margin: auto;
	position:relative;
	float:right;
	width:580px;
	height:25px;
  	border-bottom: solid 1px #cccccc;
	
	text-align:left;
	}  

#mixer_kategorien a{
	font: 180%/1.2 helvetica, arial, sans-serif;
	color:#333;
	text-decoration:none;
	padding:5px 17px 3px 17px;
	top:2px;
	position:relative;
	}

#mixer_kategorien a.last{
	padding:0 0 0 17px;	
	color:#F20D54;
	}

#mixer_kategorien a:hover{
	background:#F20D54;
	color:#ffffff;
	}  
  
a.mixer_kategorien_aktiv{
	color:black;
	background:white;
	border:1px solid #cccccc;
	border-bottom:1px solid white;
	}  
  
p.kategorie_beschreibung {
	margin-left:62px;
	padding:25px;
	text-align:left;
	font: 100%/1.2 helvetica, arial, sans-serif;
	} 

.kategorie_beschreibung h3{
	color:#70707A;
	font: 170%/1.2 helvetica, arial, sans-serif;
	text-decoration:none;
	}
  
/*  Vitalstoffe ******************************************* */


#mixer_vitalstoffe{
	
	position:relative;
	float:right;
	
	margin-top:75px;
	
	color:black;
	
	width:575px;
	height:100px;
	text-align:center;
	
	}

/*  Opgeslagen muesli's **************************************** */

.recommend_muesli_small  {
	float: right;
	margin: -43px 0 0;
}
.recommend_muesli  {
	float: right;
	margin: 10px 0 40px;
}
 	
/*  Bestellfenster **************************************** */
  
  div#bestellfenster{
	top:70px;
	margin: auto;
	position:relative;
	width:600px;
/*	height:450px; */
	overflow:auto;
	float:right;
 	border-bottom: solid 1px #cccccc;  
	}
  
  div#bestellposten{
/*  	width:420px; */
/*   	border-top: solid 1px #cccccc;  */
	padding-bottom:100px;
  }
  
 .mix_name{
 	font:120% arial, helvetica, sans-serif;
	color:black;
  }
  
  #new_mix_name{
  	border:1px solid #F20D54;
  	width:180px;
  }
    
  .line, .noline, .endline{
/*  width:420px; */
  	clear:both;
   	border-top: solid 1px #cccccc;
  }
  
  .noline{
   	border:0;
  }
  
  .endline{
  	color:black;
 	border-top: solid 2px black;  	
 	
  }
  
  .endline span{
  	font-weight:bold;
  }
  
  .gespart{
  	color:#F20D54;	
  }
  
  .left{
  	float:left;
  }
  .right{
  	float:right;
  }  
  
  ul{
  	margin-top:10px;
  	margin-left:20px;
  }
  
  li{
  	margin-bottom:5px;
  	font-size:130%;
  }
  
  .button{
  	font-size:130%;
  	color:white;
  	background:#F20D54;
  	padding:3px 8px;
  	text-decoration:none;
  }
  
  #bestellbutton{
  	width:250px;
  	margin-top:20px;
  	padding:5px;
  	font-size:130%;
  }
  
  .bestell_weiter, .bestell_back {
  	font-size:140%;
  	color:white;
  	background:#F20D54;
  	padding:3px 8px;
  	text-decoration:none;
  }
  .bestell_weiter {  
   	float:right;
	}
  .bestell_back{
  	float:left;
  }
  .bestell_weiter:hover, .bestell_back:hover, .button:hover {
  	color:#F20D54;
  	background:white;  
  }
  
/*  Mix Galerie *************************************************/

.button_mix_interact{
	margin-top:15px;
	font-size:120%;
	}

.button_mix_interact a{
	margin-right:10px;
	padding:3px 5px;
	}

.button_mix_interact a:hover{
  	color:white;
  	background:#F20D54;
	}
  
.draw_mix_thumbs img{
	margin:7px;
	}
 
/* PRESS ********************************************************/

.medium {clear:both;width:450px;padding-bottom:20px;}
.medium_logo {float:left;width:200px;text-align:right;padding-bottom:30px;}
.medium_info {width:230px;text-align:left;margin-left:220px;}
.medium_quelle {font:90%/1.2 arial, helvetica, sans-serif;font-style:italic;color:black;}
 
/* FORMULARE ***************************************************/ 
 
.fehlermeldung{
	background:#F20D54;
	padding:10px;
	color:white;
	font-size:130%;
	}
 
.radio_button{
	margin:5px;
	padding-top:4px;
	color:red;
	}
 
input.disabled {
	border: 1px solid #F2F2F2;
	background-color: #F2F2F2;
	}

.form-row{
	font-size:130%;
	}	
	
.form-row input, input.required, textarea, textarea.required {
	border: 1px solid #999999;
	padding:3px 0;
	}
	
input.validation-failed, textarea.validation-failed {
	border: 1px solid #F20D54;
	color : #F20D54;
	}
	
input.validation-passed, textarea.validation-passed {
	border: 1px solid #00CC00;
	color : #000000;
	}

.validation-advice, .custom-advice {
	margin:3px 0;
	padding:3px;
	background-color: #F20D54;
	color : white;
	}

fieldset {
	border:0;
	}

label {
	border:0;
	}

.form-row {
	clear: both;
	padding: 0.5em;
	}

.field-label {
	font:120% black arial, helvetica, sans-serif;
	}

.field-widget input, .field-widget textarea{
	font:180% black arial, helvetica, sans-serif;
	padding:7px 0 5px 0;
	background:#f9f9f9;
	}
.field-widget textarea{
	padding:5px;
	}
.field-widget select {
	padding:7px 10px 5px 3px;
	font:160% black arial, helvetica, sans-serif;
	background:#f9f9f9;
	}
select.anrede{
	width:190px;
	}
.half {
	width:190px;
	}
  
#contactform{
	text-align:left;
	}


#change_units{
	text-align:center;
	}

.recipent_address{
	font-size:120%;
	font-weight:bold;
	color:black;
	margin-left:0px;
	margin-top:20px;
	border-left:10px solid #f1f1f1;
	padding-left:15px;
	}

/*  Widget *************************************************/  
 
.link_embedd{
	border:1px solid silver;
	padding:2px;
	width:450px;
	}

.widget_embedd{
	border:1px solid silver;
	padding:4px;
	width:450px;
	overflow:hidden;
	}


/* BOXES */

.box_grey{
	width:478px;
	margin:0;
	padding:0;
	background:url('/images/boxes/grey/body.gif') repeat-y left;
	}

.box_head{
	background:url('/images/boxes/grey/head.gif') no-repeat top left;
	height:52px;

	}

.box_head h3{
	padding-left:23px;
	padding-top:15px;
	color:black;
	}

.box_body{
	padding:0 25px;
	}
.box_bottom{
	background:url('/images/boxes/grey/bottom.gif') no-repeat bottom left;
	height:23px;
	}	
  
/*  Footer *************************************************/
  
#footer_ganze_seite{
	width:835px;
	text-align:right;
	margin:auto;
	clear:left;
	top:55px;
	padding:80px 0 40px 0;
	
	}

#footer{
	width:475px;
	text-align:right;
	margin:auto;
	clear:left;
	top:55px;
	margin-left:355px;
	padding:80px 0 40px 0;

	}
	
#footer_left{
	text-align:left;
	float:left;
	}

#footer_right{
	text-align:right;
	}

	
#footer, #footer a, #start_footer a, #start_footer, a.note{
	border:0;
	color:silver;	
	font:10px verdana, helvetica, arial , sans-serif;
	text-decoration:none;
	}

#footer a:hover, #start_footer a:hover, a.note:hover{
	color:#666666;
	background-color:white;
	}

.infotext{
	color:#F20D54;
	font:150% verdana, helvetica, arial , sans-serif;	
	}



/* Specials **************************************/


.detail_change_button{
	font-size:11px; 
}

.detail_change_button a{
	padding:1px 2px 0 2px;
}

.detail_change_button a:hover{
	background-color:#F20D54;
	color:white;	
	padding:1px 2px 1px 2px;
}

.detail_nutrition_table_left{
	border-right:1px solid;
	text-align:right;
	color:black;
	padding: 7px;
}

.specials_button_text{
	font-weight:bold;
	font-size:7x;
	color:black;
}

/* Recommendation **************************************/

#recommendation {
	border-bottom:1px solid silver;
	border-top:1px solid silver;
	padding:10px;
	position:absolute;
	margin:auto;
	top:114px;
	left:-380px;
	z-index:99;
	width:130px;
}

.recommend_pic{
	text-align:center;
	margin-top:15px;
}
.recommend_pic:hover{
	background:url('/images/mixer/recommend-arrow.gif') right no-repeat;
}