html{height:100%}
body {background-color:#fff;font-family:MyArial;font-size:110%;}
img{border:0}
A:link {text-decoration: none; color: Orange;z-index:9999}
A:visited {text-decoration: none; color: Orange;}
A:active {text-decoration: none; color: Orange;}
A:hover {text-decoration: none; color: Orange; background-image:url(images/intro_back.png);}

A.next:link {text-decoration: none; color: Black;}
A.next:visited {text-decoration: none; color: Black;}
A.next:active {text-decoration: none; color: Black;}
A:hover {text-decoration: none; color: Black;background-image:none;}

input[type=text]
{
	border: 1px solid #bebebe;
}
input[type=password]
{
	border: 1px solid #bebebe;
}


.border1 {
	border: 1px solid #FF3300;
}
.border0 {
	border: 1px solid #bebebe;
}

.clear {clear:both}
#content {margin:0 auto;padding-top:20px;width:100%;}
#topbg {z-index:-1;margin:0 auto;position:fixed;left:0px;right:0px;top:0px;width:500px;height:100%;padding:60px 60px 60px 60px;background:url('images/hinten_lang.png') no-repeat;background-size:100%}

#topbgsmall {z-index:-1;margin:0 auto 0 auto;position:fixed;left:0;right:0;top:0;width:10%;padding:7% 10% 0 10%;background:url("images/hinten_oben_small2.png") bottom center no-repeat;color:#547430;background-size:80%;}

#topbglong {z-index:-1;margin:0 auto 0 auto;position:fixed;left:0;right:0;top:0;bottom:0;width:10%;padding:7% 10% 0 10%;background:url("images/hinten_lang_small.png") bottom center no-repeat;color:#547430;background-size:100%;height:100%}

#topbghalf {z-index:-1;margin:0 auto 0 auto;position:fixed;left:0;right:0;top:0;bottom:0;width:10%;padding:7% 10% 0 10%;background:url("images/hinten_lang_small.png") bottom center no-repeat;color:#547430;background-size:100%;height:30%}

/*#topbgsmall {z-index:-1;margin:0 auto;position:absolute;left:0px;right:0px;top:0px;width:500px;height:100px;padding:40px 10% 40px 10%;background:url('images/hinten_oben.png') no-repeat}
*/
#topbgbig {z-index:-1;margin:0 auto;position:fixed;left:0px;right:0px;top:0px;width:500px;height:100%;padding:60px 60px 60px 60px;background:url('images/hinten_lang.png') no-repeat;background-size:100%}
#bottombg {z-index:-1;margin:0 auto;position:fixed;left:0px;right:0px;bottom:0px;width:500px;height:400px;padding:0px 60px 0 60px;background:url('images/hinten.png') no-repeat} 
#bottombgsmall {z-index:-1;margin:0 auto;position:fixed;left:0px;right:0px;bottom:0px;width:500px;height:200px;padding:0px 60px 0 60px;background:url('images/hinten.png') no-repeat}
.hidden{display:none}

ul.side{list-style-type: none}
ul A:link{text-decoration: none; color:#00A600}
ul A:visited{text-decoration: none; color:#00A600}
ul A:active{text-decoration: none; color:#00A600}
ul A:hover{text-decoration: none; color:#6D963E;background-image:none}
li.selectedFG{color:#008000 !important}
li.selectedFG a{color:Orange !important;border-bottom:1px dashed silver}

@font-face
{
font-family: IDAutomation;
src: url('fonts/IDAutomationHC39M.ttf'),
     url('fonts/IDAutomationHC39M.eot'); /* IE9+ */
}

@font-face
{
font-family: MyArial;
src: url('fonts/ARIAL.ttf'),
     url('fonts/ARIAL.eot'); /* IE9+ */
}

table.login
{
	margin-left:auto; 
    	margin-right:auto;
        width:90%;
}

table.middle
{
	margin-left:auto; 
    margin-right:auto;
	width:30%;
	text-align:center;
}

#example {margin:20px auto 0 auto}
#example .flex {float:left;padding-top:150px;width:14%;height:200px;text-align:center}
#example .bg {background:url('buttons/weiter.png') center top no-repeat;background-size:170px 145px} 

table.example
{
	margin-top:-2em;
	margin-left:auto; 
    	margin-right:auto;
	width:90%;
	margin-bottom: 0em;
}

table.complete 
{
	margin-left:auto; 
    	margin-right:auto;
	width:90%;
	text-align:"center";
	-webkit-animation-name: opac;
    	-moz-animation-name: opac;
    	-webkit-animation-duration: .4s;
	-moz-animation-duration: 400ms;
}

td.login {
        vertical-align:top;
	padding:0.5em;
}

.green {color:#6D963E}
.darkgreen {color:#008000}
.bold {font-weight:bold}
.big {font-size:110%}
.small {font-size:70%} 
.sidegrey {color:grey}
.sideorange {color:orange}
.darkred {color:#CD0000}

td.centergrey {
	padding:3em;
	text-align:"left";
	color:Grey;
	width:33%;
}

td.centergreen {
	padding:3em;
	text-align:"left";
	color:#2F4B21;
	width:33%;
}


td.sacaback {

	background-image:url("images/saca_gruen.png");
	text-align:"left";
	color:Grey;
	width:33%;
}

#timeline {margin:0 auto;width:800px;z-index:1}
#timeline input {margin-top:10px;z-index:999}
#timeline #top{margin:0 auto;text-align:center;font-weight:bold;color:#6D963E}
#timeline #tmiddle {float:left;position:relative;margin:0px 0 0 0;width:100%}
#timeline #tright {float:left;position:relative;margin-top:100px;width:200px}

#timelist {position:absolute;top:15%;left:5%;margin: 0em 5px;color:#6D963E; z-index:0;font-size:90%;width:13%;}
#timelist #first{height:50px;padding:0 0 0 0px;}
#timelist #second{height:50px;padding:16% 0 0 0px;}
#timelist #third{height:50px;padding:16% 0 0 0px;}
#timelist #fourth{height:50px;padding:16% 0 0 0px;}
#timelist #fifth{height:50px;padding:16% 0 0 0px;}
#timelist #sixth{height:50px;padding:16% 0 0 0px;}
#edit{position:relative;padding:0% 0 0 0px;}

#sonnenmonde {position:fixed;top:10%;left:0;background:url("images/sonnen-monde.png") top left no-repeat;background-size:100%;width:70px;height:100%;z-index:-1}
#whatmeal {position:absolute;top:50px;left:15%;color:#6D963E;}

#header {font-size:120%;padding:10px 30px 0 30px;}
#header #hleft {float:left;width:38%}
#header #hleft img {width:20%}
#header #hcenter {position:absolute;width:95%;color:#6D963E;font-size:90%;margin:0 auto;text-align:center;}
#header #hright {position:relative;text-align:right}
#header #hright a {font-size:90%;z-index:99}

#login2 {z-index:1;margin:0 auto;width:400px;height:300px;padding-top:10px;color:#6D963E;-webkit-animation-name: opac;-moz-animation-name: opac;-webkit-animation-duration: .4s;-moz-animation-duration: 400ms}
#login2 input[type=text]{width:350px;color:#333}
input[type=radio]{margin:0 10px}
#login2 .radios {display:inline;padding-left:30px}  
#login2 .ptop {padding-top:15px}

#login3 {margin:50px auto 0 auto;z-index:9999;position:relative;-webkit-animation-name: popin;-moz-animation-name: popin;-webkit-animation-duration: .2s;-moz-animation-duration: 200ms;width:1100px}
#login3 .flex {float:left;width:26%}
#login3 .pleft {padding-left:120px}
#login3 .green {color:#6D963E}

#footer {position:fixed;bottom:0px;width:100%;font-size:100%;z-index:0;}
#footer #icleft {text-align:center;float:left;width:15%;height:100%;padding:5% 0px 5% 0px;background:url('buttons/saca-teller-v-25prozent.png') top center no-repeat;background-size:80%;}
#footer #icright {text-align:center;float:right;width:15%;padding:5% 0px 5% 0px;background:url('buttons/saca-teller-v-25prozent.png') top center no-repeat;background-size:80%;height:100px;}
#footer .back {width:90%}
#footer .back a{z-index:99999;font-size:100%;line-height:100%;background:#fff}
#footer .forward {width:80%;}
#footer  .forward a{font-size:100%;line-height:100%;background:#fff;}
#footer a{z-index:99999;}

#imagetext {left:0px;}

#lmless { z-index:99999;position:relative;top:260px;margin-left:35%;width:50% }
#lmmore { z-index:99999;position:relative;top:240px;margin-left:60%;width:50% }

#lmlesss { z-index:99999;position:relative;top:260px;margin-left:35%;width:50% }
#lmmores { z-index:99999;position:relative;top:240px;margin-left:60%;width:50% }

/*
#footer .back a{text-shadow:1px 0px 1px black, -1px 0px 1px black,0px 1px 1px black, 0px -1px 1px black;position:absolute;left:7px;top:36%;width:200px;height:200px;z-index:1;font-size:120%;font-weight:bold;line-height:80%}
#footer  .forward a{text-shadow:1px 0px 1px black, -1px 0px 1px black,0px 1px 1px black, 0px -1px 1px black;position:absolute;right:35px;top:36%;width:200px;height:200px;z-index:1;font-size:120%;font-weight:bold;line-height:80%}
#footer  .forward2 a{text-shadow:1px 0px 1px black, -1px 0px 1px black,0px 1px 1px black, 0px -1px 1px black;position:absolute;right:35px;top:62%;width:200px;height:200px;z-index:1;font-size:120%;font-weight:bold;line-height:80%}
*/
.bg{display:none}


#middle {margin:0 auto;width:20%;position:relative;z-index:9999;text-align:left;-webkit-animation-name: opac;-moz-animation-name: opac;-webkit-animation-duration: .4s;-moz-animation-duration: 400ms;}

#middle_login {z-index:1;margin:70px auto 0 auto;position:absolute;left:0;right:0;bottom:0%;top:300px;width:500px;min-height:300px;padding:40px 10% 0 10%;background:url("images/hinten_unten_small.png") top center no-repeat;color:#547430;background-size:80%;}

#middle_login input {width:350px;color:#333}
#middle_login #loginputs {z-index:2;text-align:left;margin:40px 0 0 70px;color:#6D963E}
#middle_login #loginputs .pt{margin-top:20px}
#middle_solid {margin:0 auto;text-align:center}

#smallmiddle {position:relative;color:#777;margin:50px auto 0 auto;padding:4px;width:50%;background:transparent;}

#smallmiddleNoAnim {position:relative;z-index:9;color:#777;margin:50px auto 0 auto;padding:4px;width:45%;background:transparent;}

#onemealmiddle {position:relative;color:#777;-webkit-animation-name: popin;-moz-animation-name: popin;-webkit-animation-duration: .2s;-moz-animation-duration: 200ms;margin:50px auto 0 24%;padding:10px auto 10px auto;width:70%;background:transparent;}

#smallmiddlebox{position:relative;z-index:9;color:#777;-webkit-animation-name: popin;-moz-animation-name: popin;-webkit-animation-duration: .2s;-moz-animation-duration: 200ms;margin: 50px auto 0 auto;padding:4px;width: 100%;background:transparent;border:1px solid green}

#smallmiddlebox table {width:100%;padding:6px;border:none}
#smallmiddlebox .nb{border:none !important}
#smallmiddlebox input{width:50px;}                                                                   
#smallmiddlebox input[type=submit]{width:50px}
table.meal {border:1px solid green;margin-top:10px;margin-bottom:10px;width:100%;}

#smallleftbox{position:absolute;z-index:9;color:#777;margin: 50px auto 0 0;padding:4px;width: 12%;background:transparent;border:1px solid green}
#smallleftbox td{border:1px solid green;padding:4px}
#smallleftbox .nb{border:none !important}
#smallleftbox input{width:50px}                                                                   
#smallleftbox input[type=submit]{width:50px}


#viewResults td{border:none;padding:2px 4px;min-width:180px}
#viewResults table{border:none}
#viewResults .reco{padding-left:30px;color:#6D963E !important;vertical-align:top}

#green {
	background:url("images/saca_gruen.png") top center no-repeat;
	background-size: 50%;
	min-height: 100%;
}

.android-ics {float:right;margin-right:20%}


form #main{position:relative}


#selectInputAndResponse {position:absolute;width:150px;z-index:9;}
#selectInput {width:40px;z-index:999}
#response{display:inline}

#invisible {
	display: none;
	margin-left:auto; 
    	margin-right:auto;
}

#notinvisible {
	margin-left:auto; 
    	margin-right:auto;
	width:100%;
	text-align:center;
/*	;*/
}

#jumpin {
    position: relative;
    -webkit-animation-name: head;
    -moz-animation-name: head;
    -webkit-animation-duration: .3s;
    -moz-animation-duration: 300ms;
    margin: 0 auto 0 auto;
    background: white;
}

#middle_select {z-index:1;margin:0 auto;position:absolute;left:0;right:0;bottom:0;width:500px;height:350px;padding:40px 2% 0 2%;}
#middle_select input {width:350px;color:#333}
#middle_select #loginputs {z-index:2;text-align:left;margin:40px 2% 0 2%;color:#6D963E}
#middle_select #loginputs .pt{margin-top:20px}

#middle_green {margin:0 auto;padding-top:150px;text-align:left;color:Grey;font-size:110%;-webkit-animation-name: opac;-moz-animation-name: opac;-webkit-animation-duration: .6s;-moz-animation-duration: 600ms}
#selectbox {width:400px;padding:5px; margin:20px auto -5px auto;overflow:hidden;border:1px solid #888;background: #fff;color:green;font-size: 110%;}
#selectbox input {margin-right:1em;}
#selectbox select.meal{text-overflow: ellipsis;padding:5px 0 0 20px;overflow:hidden;vertical-align:top;margin-top:0px;border:0;background:transparent;color:green;width:550px;font-size: 110%}


select.special{background:transparent;color:green;margin:0px;padding:0px;border:0px solid white;width:100%;font-size: 90%;clear:both;position:relative;}
.specialp{padding-left:110px}
.level{margin: 15px 0 20px 0; padding: 10px 0 10px 10px;}
.helplevel{margin: 15px 0 20px 0; padding: 10px 0 10px 10px}

option{padding:2px 0}
option::checked {background: blue; }

#mealselect{width:15%;overflow:hidden;display:block;color:green;padding:0px auto}
#mealselect input[type=text]{margin-left:10px;width:220px}


div#left{float:left;width:300px;z-index:999;padding-right:10px}
div#right{float:left;width:600px;z-index:999}

div#leftquestion{float:left;width:300px; padding:100px 10px 0px 20px}
div#rightquestion{margin-right:0px; float:right;width:300px; padding:100px 20px 0px 0px}


#foodgroups{position:absolute;width:628px;height:500px;top:24%;right:12%;z-index:9999;}
#foodgroups img{position:absolute;width:120px}

#foodgroupsbg {position:absolute;top:155px;left:210px;}
#foodgroupsbg img {width:220px}
#foodgroups #item1{position:absolute;top:30px;left:350px}
#foodgroups #item2{position:absolute;top:30px;left:220px}
#foodgroups #item3{position:absolute;top:260px;left:440px}
#foodgroups #item4{position:absolute;top:-40px;left:290px}
#foodgroups #item5{position:absolute;top:360px;left:80px}
#foodgroups #item6{position:absolute;top:50px;left:-40px}
#foodgroups #item7{position:absolute;top:360px;left:-60px}
#foodgroups #item8{position:absolute;top:80px;left:610px}
#foodgroups #item9{position:absolute;top:260px;left:550px}
#foodgroups #item10{position:absolute;top:508px;left:230px}
#foodgroups #item11{position:absolute;top:380px;left:310px}
#foodgroups #item12{position:absolute;top:420px;left:180px}
#foodgroups #item13{position:absolute;top:60px;left:480px}
#foodgroups #item14{position:absolute;top:165px;left:460px} /* Fisch*/
#foodgroups #item15{position:absolute;top:60px;left:100px}
#foodgroups #item16{position:absolute;top:150px;left:10px}
#foodgroups #item17{position:absolute;top:260px;left:40px}
#foodgroups #item18{position:absolute;top:380px;left:440px}
#foodgroups #item19{position:absolute;top:390px;left:560px}


/*
#foodgroups a{opacity:1}
#foodgroups a:hover, #foodgroups a:focus{opacity:.4}
*/
#searchresult {margin-top:10px;font-size:90%;margin-bottom:10px}
#searchresult a {z-index:999}

#foodgroupinfo1{font-size:90%;color:orange;width:90%}
#foodgroupinfo2{position:relative;margin-bottom:150px;width:90%;font-size:90%;color:orange}

#searchside{position:relative;right:0px;top:15%;padding-left:800px}

.imagetext{position:relative;width:70%;}
.imagetext img {position:absolute;width:550px;height:460px;z-index:1;left:50%;margin-left:-225px;}
.imagetext a{background-color:#fff;color:#333;font-weight:bold;padding:2px;z-index:2}
.imagetext a:hover{background-color:#ccc}
.imagetext .text {position:fixed;bottom:10px;left:53%;width:300px;z-index:2}
.imagetext .textsmall {position:relative;top:300px;left:120px;z-index:999;color:#000;font-size:110%}
.imagetext .small{font-size:74%;color:#000;z-index:2}

.imagetext .gram41{position:absolute;top:170px;left:280px;color:#000;z-index:2}
.imagetext .gram42{position:absolute;top:170px;left:550px;color:#000;z-index:2}
.imagetext .gram43{position:absolute;top:400px;left:280px;color:#000;z-index:2}
.imagetext .gram44{position:absolute;top:400px;left:550px;color:#000;z-index:2}

.imagetext .gram61{position:absolute;top:120px;left:160px;color:#000;z-index:2}
.imagetext .gram62{position:absolute;top:120px;left:350px;color:#000;z-index:2}
.imagetext .gram63{position:absolute;top:120px;left:540px;color:#000;z-index:2}
.imagetext .gram64{position:absolute;top:260px;left:160px;color:#000;z-index:2}
.imagetext .gram65{position:absolute;top:260px;left:350px;color:#000;z-index:2}
.imagetext .gram66{position:absolute;top:260px;left:540px;color:#000;z-index:2}

.imagetext .gram91{position:absolute;top:120px;left:200px;color:#000;z-index:2}
.imagetext .gram92{position:absolute;top:120px;left:380px;color:#000;z-index:2}
.imagetext .gram93{position:absolute;top:120px;left:560px;color:#000;z-index:2}
.imagetext .gram94{position:absolute;top:270px;left:200px;color:#000;z-index:2}
.imagetext .gram95{position:absolute;top:270px;left:380px;color:#000;z-index:2}
.imagetext .gram96{position:absolute;top:270px;left:560px;color:#000;z-index:2}
.imagetext .gram97{position:absolute;top:420px;left:200px;color:#000;z-index:2}
.imagetext .gram98{position:absolute;top:420px;left:380px;color:#000;z-index:2}
.imagetext .gram99{position:absolute;top:420px;left:560px;color:#000;z-index:2}


#mealsAsTable{width:75%;position:relative;z-index:1}

#searchfood {
    padding: 0px 5px;
    /* height: 26px; */
    border: 1px solid #bebebe;
	-moz-box-shadow: 3px 3px 2px #888;
	-webkit-box-shadow: 3px 3px 2px #888;
	box-shadow: 3px 3px 2px #888;
	font-size:120%;
	/*background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0.49, rgb(240,240,240)),
        color-stop(0.51, rgb(245,245,245))
    );
    background: -moz-linear-gradient(
        center top,
        rgb(240,240,240) 49%,
        rgb(245,245,245) 51%
    );*/
	background-color:white;
	color:grey;
    -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px}

/*
#thumb img {
    z-index:-1;
}

#thumb span {
    z-index:1;
    opacity: 0.5;
    text-align: right;
    bottom:0;
}

#thumb:hover span {
    opacity: 1;
}

#thumb img, #thumb div {
    position: absolute;
}
*/

.thumb {
    cursor: pointer;
	position:fixed;
	z-index:0;
}

.desc {
    cursor: pointer;
    position: absolute;
    color: #000;
    text-shadow: 0 0 5px 2px #fff;
    z-index: 1;
    text-align: center;
    padding: 10px 0;
}

div#foodgroupname{text-align:left;background-color:white}
div#nav0{float:left;width:18%;background-color:white}
div#nav1{float:left;width:18%;background-color:white}
div#nav2{float:left;width:18%;background-color:white}
div#nav3{float:left;width:12%;background-color:white}
div#nav4{float:left;width:12%;background-color:white}
div#nav5{float:left;width:18%;background-color:white}


@-webkit-keyframes head { 
    0% {
        -webkit-transform: translateY(-120px);
        
    }
    100% { -webkit-transform: translateY(10); }
}

@-moz-keyframes head {
    0% {
        -moz-transform: scale(0.5, 0.5);
        opacity: 0;
    }
    100% { -moz-transform: scale(1, 1) }
}


@-webkit-keyframes popin { 
    0% {
        -webkit-transform: rotateY(90deg); scale3d(0.5, 0.5, 1);
        opacity: 0;
    }
    100% { -webkit-transform: scale3d(1, 1, 1) }
}
@-moz-keyframes popin { 
    0% {
        -moz-transform: scale(0.5, 0.5);
        opacity: 0;
    }
    100% { -moz-transform: scale(1, 1) }
}


@-webkit-keyframes opac { 
    0% {
        opacity: 0;
    }
    100% { opacity: 100; }
}
@-moz-keyframes opac { 
    0% {opacity: 0;
    }
    100% { opacity:100; }
}


@page {
    size: A4 landscape;
	font-size:8pt;
}