﻿
table {width:100%; height: auto}
table.auto_w_h{width:auto; height: auto}

table.main{ margin-left:auto; margin-right:auto; width:1200px; height:100%}
table.content{ width:100%; height:auto; padding: 0 40px; background-color: white; float:left;}
table.kontakt{ background-color: #E7E7E7; height:125px; width:230px;}

td, div {font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #7a7a7a; vertical-align: top; line-height:150%;}
span {font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;font-size:14px;font-weight:normal;color:#7a7a7a;}

.empty{
	height:4px;
	padding:0px;
	clear:both;
	background-color:transparent;
	}
	
#empty{
	background-color:transparent; 
	height:8px;}

.hinweis {font-style:italic;}
.bild {font-style:italic;}

.achtung { font-style:italic; color:#DC0000;}
.quelle {font-size: 9pt; font-weight: 400;}

@media screen,projection{
.ym-column{display:table;width:100%}
.ym-col1{float:left;width:20%;}
.ym-col2{float:right;width:20%;}
.ym-col3{width:auto;margin:0 20%;}
.ym-cbox{padding:0 10px}
.ym-cbox-left{padding:0 10px 0 0}
.ym-cbox-right{padding:0 0 0 10px;}
.ym-ie-clearing{display:none}
.ym-grid{display:table;width:100%;table-layout:fixed;list-style-type:none;padding-left:0;padding-right:0;margin-left:0;margin-right:0;}
.ym-gl{float:left;margin:0}
.ym-gr{float:right;margin:0 0 0 -5px}
.ym-g5{width:5%}
.ym-g10{width:10%;}
.ym-g12{width:12%;}
.ym-g13{width:13.5%;}
.ym-g15{width:15%;}
.ym-g16{width:17%;}
.ym-g18{width:18%;}
.ym-g20{width:20%}
.ym-g25{width:25%}
.ym-g28{width:28%}
.ym-g30{width:30%}
.ym-g33{width:33.333%}
.ym-g38{width:38.2%}
.ym-g40{width:40%}
.ym-g45{width:45%}
.ym-g50{width:50%}
.ym-g55{width:55%}
.ym-g60{width:60%}
.ym-g62{width:61.8%}
.ym-g66{width:66.666%}
.ym-g70{width:70%}
.ym-g72{width:72%}
.ym-g75{width:75%}
.ym-g80{width:80%}
.ym-g85{width:85%}
.ym-g90{width:90%}

/* ______________________________________ 05 Formular-Design allgemein */

input, select {
	outline: none;
}
input, textarea, select {
	border: 1px solid #cccccc;
	padding: 8px;
	font-size: 114.286%;
	font-family: 'Open Sans', sans-serif;
	width: 100%; /* 300px; */
	margin: 0;
	color: #333333;
	box-shadow: unset;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
}
textarea {
	height: 100px;
}
input:focus, textarea:focus, select:focus {
    border-color: rgba(82, 168, 236, 0.75);
    box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
}

#field {background-color: #f0f0f0; margin:0px; height:24px; color:#666;}
input.fieldsize, textarea.fieldsize { width:auto;}

textarea.fieldsize { width:80%;}

input.field {background-color: #f0f0f0; margin:0px; height:11px; color:#666;}

label {
	display: block;
	margin: 0;
	padding: 0;
	font-weight: bold;
	font-size: 12px;
	color: #666;
	margin-bottom: 0;
	margin-left: 0;
	margin-top: 5px;
}
label:first-child {
	margin-top: 0px;
}


.hcenter { text-align: center;}
.hright { text-align: right;}
.hjustify { text-align:justify; }
.vmiddle{ vertical-align:middle;}
.vtop{ vertical-align:top;}
.vbottom { vertical-align:bottom; }
.underline { text-decoration:underline; font-size: 8pt;}
.lineheight { line-height:150% }
.lineheight215 { line-height:215% }
.top_balken { background-image: url('../images/navigation/top_balken.png'); background-repeat: no-repeat; width: 1200px; height: 100px;	}

.border_left {border-left-style: solid; border-left-width: 1px; border-color:#c0c0c0; padding:4px;}
.border_left_top {border-left-style: solid; border-left-width: 1px; border-top-style: solid; border-top-width: 1px; border-color:#c0c0c0; padding:4px;}
.border_right {border-right-style: solid; border-right-width: 3px; border-color: #dcdcdc;}
.border_right_grau {border-right-style: solid; border-right-width: 1px; border-color: #dc0000;}
.border_right_1 {border-right-style: solid; border-right-width: 1px; border-color: #dcdcdc;}
.border_right_top {border-right-style: solid; border-right-width: 1px; border-color: #c0c0c0; border-top-style: solid;border-top-width: 1px; border-color:#c0c0c0;}
.border_bottom {border-bottom-style: solid; border-bottom-width: 1px; border-color:#c0c0c0;}
.border_bottom_grau {border-bottom-style: solid; border-bottom-width: 3px; border-color:#dcdcdc;}
.border_bottom_red {border-bottom-style: solid; border-bottom-width: 3px; border-color:#dc0000;}
.border_top {border-top-style: solid; border-top-width: 4px; border-color:#dfdfdf;}
.border_top_white {border-top-style: solid; border-top-width: 1px; border-color:white;}
.border_right_white {border-right-style: solid; border-right-width: 1px; border-color:white;}
.border_red1 {border-style: solid; border-width: 1px; border-color:#dc0000;}
.border_red {border-style: solid; border-width: 2px; border-color:#dc0000;}
.border_blau {border-style: solid; border-width: 2px; border-color:#0000ff;}

.anstrich_grau{ background-image:url('../images/design/punkt_grau_kl.png'); background-repeat:no-repeat; background-position: center; height:15px; width:15px;}
.anstrich{ background-image:url('../images/design/rot-punkt_kl.png'); background-repeat:no-repeat; background-position: center; width:15px; height:15px; padding-left:4px; padding-right:4px;}
.anstrich_gruenok{ background-image:url('../images/design/punkt_gruen_ok.png'); background-repeat:no-repeat; background-position: center; width:28px; height:32px; padding-left:4px; padding-right:4px;}

.selly { color:#7b7b7b; font-weight:bold; font-size:13px;}
.order { color:#dc0000; font-weight:bold; font-size:13px;}
.sellyheader { color:#7b7b7b; font-size:1.3em; hyphens:none;}
.orderheader { color:#dc0000; font-size:15px; hyphens:none;}
.blau { color:#0000ff; font-weight:bold;}
.red_line { color:#dc0000;}
.hellblau { background-color:#d9ffff;}
.hellblau_grfaktor { background-color:#d9e7f9;}

.achtung { font-style:italic; color:#901010;}

header {
		height:105px;
		padding-bottom: 4px;
		background-color:#FFF;
		}

.header2 {
	background-image: url('../images/design/Bgr_grau_header2.png');
	background-repeat: repeat-x;
	font-size:11px;
	vertical-align: middle;
	font-weight: bold;
	color: #555555; 
	padding:2px; 
	height:18px}
	
.header4 {
	font-size:17px;
	vertical-align: top;
	padding-bottom: 16px;
	padding-top: 16px; padding-left:0;}
	
	
.header5 {
	font-size:13px;}
		
.header6 {
	vertical-align: middle;
	font-size:1.2em;
	padding-top: 20px;
	padding-bottom:15px; 
	padding-left:10px;
	height:25px;}
	

	
.red {color:#dc0000;}
	

.white_bigger { color:white;
				font-size:16px;}
	
	
.left0 { padding-left:0px;}
	
.produkticon {
	vertical-align: middle;
	padding-top: 20px;
	padding-bottom:15px; 
	padding-left:10px;
	height:25px;
	width:8%;}

.footer{
	
	padding-top:20px;
	padding-bottom: 15px;
	font-size:13px;}
	
footer.content-info {
    max-width: 2000px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    background-color: #f3f3f3;
    color: #303030;
    z-index: 99995;
    border-top: 1px solid rgba(0,0,0,.1);
    transition: all .8s ease;
}	


 @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src:	local('Open Sans Light'), 
  		local('OpenSans-Light');
  src:	url('../scripte/fonts/OpenSans/OpenSans-Light-webfont.eot'); 
  src:	url('../scripte/fonts/OpenSans/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
  		url("../scripte/fonts/OpenSans/OpenSans-Light-webfont.woff") format('woff'),
  		url("../scripte/fonts/OpenSans/OpenSans-Light-webfont.ttf") format('truetype'),
  		url("../scripte/fonts/OpenSans/OpenSans-Light-webfont.svg#OpenSansLight") format('svg');
} 
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src:	local('Open Sans'), 
  		local('OpenSans');
  src:  url("../scripte/fonts/OpenSans/OpenSans-Regular-webfont.eot");
  src:	url("../scripte/fonts/OpenSans/OpenSans-Regular-webfont.eot?#iefix") format('embedded-opentype'),
  		url("../scripte/fonts/OpenSans/OpenSans-Regular-webfont.woff") format('woff'),
  		url("../scripte/fonts/OpenSans/OpenSans-Regular-webfont.ttf") format('truetype'),
  		url("../scripte/fonts/OpenSans/OpenSans-Regular-webfont.svg#OpenSansRegular") format('svg');
  
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src:	local('Open Sans Bold'), 
  		local('OpenSans-Bold');
  src:	url("../scripte/fonts/OpenSans/OpenSans-Bold-webfont.eot");  		
  src:	url("../scripte/fonts/OpenSans/OpenSans-Bold-webfont.eot?#iefix") format('embedded-opentype'),
  		url("../scripte/fonts/OpenSans/OpenSans-Bold-webfont.woff") format('woff'),
  		url("../scripte/fonts/OpenSans/OpenSans-Bold-webfont.ttf") format('ttf'),
  		url("../scripte/fonts/OpenSans/OpenSans-Bold-webfont.svg#OpenSansBold") format('svg');
}

	
img { border-width:0; 
	max-width: 100%;
	height: auto;
	width:auto;
}
	.qlt_box {
		  position:relative;
		}
				
	.toollink {
		height: 3em;
		}
	
		
	.qlt_box a#tools {
		position:absolute; 
		 bottom: 1em;
	 	 right: 1em; 
	
		}
		
		.qlt_box a#tools2 {
		position:absolute; 
		 bottom: 1em;
	 	 right: 30%; 
	
		}

	
.p2t2b { padding-bottom:2px; padding-top:2px; }
.p4t { padding-top:4px; }
.p4b { padding-bottom:4px; }
.p4l { padding-left:4px;}
.p4r { padding-right:4px; }
.p4l4r { padding-left:4px; padding-right:4px; }
.p4t4b { padding-bottom:4px; padding-top:4px; }
.p5t {	padding-top:5px;}
.p6t3b { padding-bottom:3px; padding-top:6px; }
.p10l10r { padding-left:10px; padding-right:10px;}
.p10r {	padding-right:10px;}
.p10l {	padding-left:10px;}
.p10t {	padding-top:10px;}
.p10b { padding-bottom:10px;}
.p15l { padding-left:15px;}
.p15r { padding-right:15px;}
.p15b { padding-bottom:15px;}			
.p15t { padding-top:15px;}				
.p15t15b { padding-top:15px; padding-bottom:15px;}	
.p15l15r { padding-left:15px; padding-right:15px;}
.p20l20r { padding-left:20px; padding-right:20px;}
.p20t20b { padding-top:20px; padding-bottom:20px;}
.p20r {	padding-right:20px;}
.p20t {	padding-top:20px;}
.p20b { padding-bottom:20px;}
.p20l {	padding-left:20px;}
.p25b { padding-bottom:25px;}
.p25l {	padding-left:25px;}
.p40l40r { padding-left:40px; padding-right:40px;}	
.p30l30r { padding-left:30px; padding-right:30px;}	
.p30l { padding-left:30px; }
.p30r {	padding-right:30px;}
.p30t { padding-top:30px; }
.p30b {	padding-bottom:30px;}
.p40r {	padding-right:40px;}
.p40l {	padding-left:40px;}
.p40b {	padding-bottom:40px;}
.p40t {	padding-top:40px;}
.p50l {	padding-left:50px;}
.p50b {	padding-bottom:50px;}
.p50r {	padding-right:50px;}
.p50t {	padding-top:50px;}
.p60l {	padding-left:60px;}
.p60b {	padding-bottom:60px;}
.p60r {	padding-right:60px;}
.p60t {	padding-top:60px;}
.p70t {	padding-top:70px;}
.p70b {	padding-bottom:70px;}
.p70l {	padding-left:70px;}
.p80l {	padding-left:71px;}
.p80r {	padding-right:71px;}
.p80t {	padding-top:80px;}
.p80b {	padding-bottom:80px;}
.p90l {	padding-left:95px;}
.p90t {	padding-top:90px;}
.p90b {	padding-bottom:90px;}
.p100b {	padding-bottom:100px;}

.underline { text-decoration:underline; font-size:1em;}
.letterspacing { letter-spacing:-1px; }
.info {font-size: 9pt; letter-spacing:-1px}
.headerhellgruen { color:#b6db64; font-weight:bolder; font-size:x-large;}
.headergruen { color:#009166; font-weight:bolder; font-size:x-large;}

.xpointred { background-position: center center; background-image:url('../images/design/punkt_rot.png'); background-repeat:repeat-x;  padding-top:0.5em; padding-bottom:0.5em; padding-right:0.5em;}

.xpoint { background-position: center center; background-image:url('../images/design/Punkt_cdcdcd.png'); background-repeat:repeat-x;  padding-top:0.5em; padding-bottom:0.5em; padding-right:0.5em;}
.ypoint { background-position: center center; background-image:url('../images/design/Punkt_cdcdcd.png'); background-repeat:repeat-y;}

#hcenter { text-align: center;}
#hright { text-align: right;}
#hjustify { text-align:justify; }
#vmiddle{ vertical-align:middle;}
#vtop{ vertical-align:top;}
#vbottom { vertical-align:bottom; }
#underline { text-decoration:underline; font-size: 8pt;}
#lineheight { line-height:150% }

a.email	{font-family:"Open Sans",Arial, Helvetica, sans-serif; font-size: 14px;font-weight: normal;color: #E30000;text-decoration: none;}
a.link 	{font-family: "Open Sans",Arial, Helvetica, sans-serif; font-size: 14px;font-weight: normal;color: #7b7b7b;text-decoration: none;}
	
a#top_balken { color:#999; }
a#top_balken:hover, a#top_balken:focus { color:#dc0000; text-decoration:none;}
a#top_balken_ping { color: white; }
a#top_balken_ping:hover, a#top_balken_bing:focus { color: #C0C0C0; text-decoration:underline;}

a#tools {color:#dc0000; text-decoration:none;}
a#tools:hover, a#tools:focus {color:#6b6b6b; text-decoration: underline;} 

a#mail { color:#fff; }
a#mail:hover, a#mail:focus { color:#c2c2c2; text-decoration:underline;}

a#link { color:#202020; }
a#link:hover, a#link:focus { color:#555; text-decoration:underline;}


a.mark { color:white; font-size:0.2em;}
a.mark_f4f4f4 { color: #f4f4f4; font-size:0.4em;}

p.mark { color:white; font-size:0.2em;}

a#more { color:#b52929;}

a#more:hover, a#more:focus { text-decoration:underline;}


a#Lupe {
	background: url(../images/design/Lupe_Lupeover.png) top left no-repeat;
	width: 24px;
	height: 21px;
	position: absolute;
	text-indent: -10000px;
	z-index: 1000;
}
a#Lupe:hover, a#Lupe:focus {
	background-position: bottom left;
}


/* Boxen sellymenue*/
 
#additives-box {
padding: 0 10px 0 20px;
	width: 90%;
}

#additives-content {
	display: block;
	padding-top:8px;}
	
a.additives {
	cursor: pointer;
}

#DACH-box {
	width: 100%;
}

#DACH-content {
	display: block;
	padding-top:8px;}
	
a.DACH {
	cursor: pointer;
}

#Zutatfelder-box {
	width: 100%;
}

#Zutatfelder-content {
	display: block;
	padding-top:8px;}
	
a.Zutatfelder {
	cursor: pointer;
}

#WE-box {
	width: 400px;
}

#WE-content {
	display: block;
	padding-top:8px;}
	
a.WE {
	cursor: pointer;
}


#Allergen-box {
	background-color:#F3F3F3;
}

#Allergen-content {
	display: block;
	padding-top:8px;}
	
a.Allergen {
	cursor: pointer;
}

#Zutat-eigene-box {
	width: 500px;
}

#Zutat-eigene-content {
	display: block;
	padding-top:8px;
	padding-bottom:10px;}
	
a.Zutat-eigene{
	cursor: pointer;
}

#Zutat-oeffentliche-box {
	width: 500px;
}

#Zutat-oeffentliche-content {
	display: block;
	padding-top:8px;
	padding-bottom:10px;}
	
a.Zutat-oeffentliche{
	cursor: pointer;
}
#Zutat-manuelle-box {
	width: 900px;
}

#Zutat-manuelle-content {
	display: block;
	padding-top:8px;
	padding-bottom:10px;
	padding-left:30px;}
	
a.Zutat-manuelle{
	cursor: pointer;
}
/* Boxen sellyorder*/
 
#Box-box {
	width: 100%;
}

#Box-content {
	display: block;
	padding-top:8px;}
	
a.Box {
	cursor: pointer;}
	
#Box1-box {
	width: 100%;
}

#Box1-content {
	display: block;
	padding-top:8px;}
	
a.Box1 {
	cursor: pointer;}
	
#Box2-box {
	width: 100%;
}

#Box2-content {
	display: block;
	padding-top:8px;}
	
a.Box2 {
	cursor: pointer;}
	
#Box3-box {
	width: 100%;
}

#Box3-content {
	display: block;
	padding-top:8px;}
	
a.Box3 {
	cursor: pointer;}
	
#Box4-box {
	width: 100%;
}

#Box4-content {
	display: block;
	padding-top:8px;}
	
a.Box4 {
	cursor: pointer;}
	
	
#Box5-box {
	width: 100%;
}

#Box5-content {
	display: block;
	padding-top:8px;}
	
a.Box5 {
	cursor: pointer;}
	
#Box6-box {
	width: 100%;
}

#Box6-content {
	display: block;
	padding-top:8px;}
	
a.Box6 {
	cursor: pointer;}
	
#Box7-box {
	width: 100%;
}

#Box7-content {
	display: block;
	padding-top:8px;}
	
a.Box7 {
	cursor: pointer;}
	
	


#sellyApps-Installation-box {
	width: 100%;
}

#sellyApps-Installation-content {
	display: block;
	padding-top:8px;
	padding-bottom:10px;
	padding-left:30px;}
	
a.sellyApps-Installation{
	cursor: pointer;
}



.c-banner__text
{
	color: gray;
}

.c-banner.t-indigo {
    background-color: #eeeeee;
}




 @media screen and ( max-width: 980px )  {
    .color_on_small {
		  	background-color:white;
	  } 
	 .border_on_small {
	 	border-bottom-style: solid; border-bottom-width: 4px; border-color:#dcdcdc;
		  	background-color:white;
	  }
	}
   
 @media screen and ( max-width: 760px )  {
	      .linearize-level-1,
	      .linearize-level-1 > [class*="ym-g"] {
	        display: block;
	        float: none;
	        padding: 0;
	        margin: 0;
	        width: 100% !important;
	      }
	      .linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"] {
	        overflow: hidden; 
	        padding: 0;
	        margin: 0;
	      }
	      
	      .logo_header {
			text-align:center;
		  }
		  
		  .logo_header > img {
			margin: 1em 0;
		   }
		  .hide_on_small {
		  	display:none !important;
		  }
		
		.top_on_small {
		  	 margin-top: 12em;
			text-align:left;
			margin-left:30px;
		  }
						  
		.to_small {
		
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;

		  }
}	
 
	

@media screen and ( max-width: 580px ) {
	
	.page_head_navi {
	margin-top: 5.3em;
	text-align:left;
	margin-left:30px;
	}
	
}


/*@media screen and (min-width:48rem)*/
.c-banner--bottom {
    width: 20rem;
    right: 40px;
    bottom: 70px;
    left: auto;
}
.c-banner--bottom {
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
}

.c-banner {
    z-index: 1000;
    padding: 1.5rem 2rem 1.5rem 1.5rem;
    position: fixed;
}

/*@media screen and (min-width:48rem)*/
.c-banner {
    box-shadow: 0px 0px 2rem rgba(0,0,0,0.1);
    border-radius: 4px;
}

:focus {
    outline-color: #eeb523;
}
*, ::after, ::before {
    box-sizing: inherit;
}


[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: none;
    background: 0 0;
    border: none;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    border-radius: 4px;
    text-align: center;
    padding: 0;
}

.c-banner__close
{
	position:absolute;
	top: 1em;
	right: 1em;
	width: 12px;
	height: 12px;
}



