html, body
{
font-family:            arial;
font-size:              14px;
color:                  #254e25;
width:                                        100%;
text-align:center;
height:100%;
}
p{font-size:1em;}
	a{cursor:pointer}
label{width:200px;height:30px;display: inline-block;text-align:left};
/* If the screen size is 600px wide or more */
@media screen and (min-device-width: 600px) {
  .menu_button_myfays {font-size: 2em !important;}
  }
/*MyFay's*/
/* If the screen size is 600px wide or less 
@media screen and (max-device-width: 800px) {
  .menu_button_myfays {font-size: 2.4em !important;}
  .font_majalla_12 {font-size:  1.8em !important;}
  table,input,label{font-size:1.4em !important}
}*/
.submenu{left:300px;position:absolute !important;}
.menu_button{width:200px !important; font-size:1rem !important;text-align:left !important}
.submenu_button{width:100% !important; font-size:1rem !important;text-align:left !important}
#menucontainer{display:none;max-width:200px;position:absolute;z-index:1;}
#id_kraeuter_wirkung_beschreibung{width:100% !important}
  .sc-cart-toolbar{width:210px !important}
  .class_kopfzeile_container_schrift_dr_gruber{top: 140px;position:relative;padding-left:3px}
  .class_id_kopfzeile_schrift_dr_gruber{font-size:0.6rem}
  .class_id_kopfzeile_schrift_gross_dr_gruber{font-size:1rem} 
#id_div_menu{
    border: 1px solid black;
    float: right;
    width: 50px;
    height: 60px;
    border-radius: 10px;
    margin-right: 5px;
    margin-top: 5px;
	background-color: aliceblue;
  }
  #id_div_menu_strich{
	height:2px;
	width:40px;
    margin: 8px 3px;
	background-color:black;
  }
/*@media (min-width: 550px) {*/
@media(max-width:550px) {
  body {max-width: 550px; margin-left: auto;margin-right:auto;}
  body, html{font-size:22px !important;}
  /*#id_div_kopfzeilenbild{background-image: url(/bilder/kopfzeilenbild_800_de_cosmetic.png);background-repeat:no-repeat;height:200px;padding-bottom:10px}*/
  #id_div_kopfzeilenbild{background-image: url(/bilder/kopfzeilenbild_550_de_dr_gruber.png);background-repeat:no-repeat;height:200px;padding-bottom:10px}
  .price,.sc-cart-summary-subtotal,.sc-cart-item-summary,table,input,p,h4,.btn{font-size:1em !important;} /*absatz, produktüberschriften, buttons*/
  label{width:200px !important}
  .btn{width:200px !important}
  input{width:220px !important}
}

/*@media (min-width: 800px) {*/
@media(min-width:551px) and (max-width:800px) {
  body {max-width: 800px; margin-left: auto;margin-right:auto;}
  body, html{font-size:18px !important;}
  #id_div_menu{width:90px;height:70px}
  #id_div_menu_menu{font-size:1.2rem;margin-left:15px !important}
  #id_div_menu_strich {width:80px}
  #id_div_kopfzeilenbild{background-image: url(/bilder/kopfzeilenbild_800_de_dr_gruber.png);background-repeat:no-repeat;height:200px;padding-bottom:10px}
  .price,.sc-cart-summary-subtotal,.sc-cart-item-summary,table,input,p,h4,.btn{font-size:1em !important;} /*absatz, produktüberschriften, buttons*/
  label{width:120px !important}
  .sc-cart-toolbar{width:100% !important}
  .class_kopfzeile_container_schrift_dr_gruber{top: 140px;position:relative;padding-left:3px}
  .class_id_kopfzeile_schrift_dr_gruber{font-size:0.7rem}
  .class_id_kopfzeile_schrift_gross_dr_gruber{font-size:1.2rem}
}
  
/*@media (min-width: 990px) {*/
@media(min-width:801px){ 
  body {max-width: 990px; margin-left: auto;margin-right:auto;}
  body, html{font-size:16px !important;}
  /*#id_div_kopfzeilenbild{background-image: url(/bilder/kopfzeilenbild_990_de_cosmetic.png);height:200px;}*/
  #id_div_kopfzeilenbild{background-image: url(/bilder/kopfzeilenbild_990_de_dr_gruber.png);height:200px;}
  #menucontainer{display:block;max-width:990px;position:relative;z-index:1;}
  .submenu{left:auto;position:fixed !important;}
  #id_div_menu{display:none}
  .menu_button{width:16.2% !important; font-size:1em !important;text-align:center !important}
  .submenu_button{font-size:1em !important;}
  #id_kraeuter_wirkung_beschreibung{width:460px !important}
  .price,.sc-cart-summary-subtotal,.sc-cart-item-summary,table,input,p,h4,.btn{font-size:1em !important;} /*absatz, produktüberschriften, buttons*/
  label{width:200px !important}
  .sc-cart-toolbar{width:100% !important}
  .class_kopfzeile_container_schrift_dr_gruber{top: 145px;position:relative;padding-left:3px}
  .class_id_kopfzeile_schrift_dr_gruber{font-size:0.7rem}
  .class_id_kopfzeile_schrift_gross_dr_gruber{font-size:1.2rem}
}


#absatz_spruch_titelseite{margin-top: 10em}
input{margin-right:10px;}
fieldset {border:0 none;}
#id_div_bestellform_container{width:98%;margin:auto;text-align:left}
input[type=submit] {font-family:arial;font-size:16px;color:#254e25;}
#id_bestellsumme {margin:5px; border: solid 1px black;border-radius: 7px;background: #f1f4a9;}
#id_div_bestellung_success, #id_div_bestellung_error {display:none;position:absolute;top:300px;width:100%;border:1px; border-radius:3px; padding:10px; text-align:center}
.text_eingerahmt{margin:5px; border: solid 1px black;border-radius: 7px;background: #f1f4a9;overflow:auto; padding:3px}
/*
#success span, #error span {display:block;position:absolute;top:300px;width:100%}
#success span p, #error span p {margin-top:6em}
#success span p {color:#9bd32d;}
#error span p {color:#c0392b;}
*/
/*MyFay's Ende*/

#bodycontainer {text-align: left; margin: 0px auto; height:100%;width:100%}
#menucontainer{width:100%}
/*#id_hautp_fussteil{position:relative; overflow:auto;width:990px;height:100%}*/
#id_hautp_fussteil{position:relative; overflow:hidden;width:98%;margin: 0 auto;}

  
#id_hautpteil_{margin-left:10px; margin-right:10px;width:100%;min-height:10px;height:100%;overflow:hidden}
#id_kopfzeile{width:100%;z-index:100;overflow:hidden; background-color:white}


.__anchor {
    display: block;
    position: relative;
    top: -200px;
    visibility: hidden;
}
.menu_button:focus{background-color:#c0d0c0;}
.menu_button, .submenu_button{
    background-color: #cedece;
    border: none;
    color: #254e25;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 0px;
    cursor: pointer;
	z-index:2;
}
.menu_button_myfays{
    background-color: #e9f2f6;
    border: 1px solid;
	border-radius: 4px;
    color: #254e25;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 0px;
    cursor: pointer;
}
.div_kraeuter_wirkung{
    border: none;
    height: 19.16px;
    cursor: pointer;
    width:148px;
    margin-left:2px;
}
.bilder_wirkung_pflanzen{float:left; height:200px; padding-right:15px;padding-bottom:20px}
#id_kraeuter_wirkung_beschreibung{float:left;width:460px;height:400px;padding-top:45px;padding-left:20px}
#id_fusszeile{width: 100%;padding-top:30px;text-align:center; display:block;}
.clickable-row{cursor:pointer;}
/* set overlay color on ui-dialog*/
.ui-widget-overlay
{
  opacity: .50 !important; /* Make sure to change both of these, as IE only sees the second one */
  filter: Alpha(Opacity=50) !important;

  background: rgb(50, 50, 50) !important; /* This will make it darker */
}

 /* Dropdown Button */
.dropbtn {
    background-color: #cedece;
    border: none;
    color: #254e25;
    padding: 5px 2px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 0px;
    cursor: pointer;
    width:137px;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: contents;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	background-color: #cedece;
    border: none;
    color: #254e25;
    font-size: 16px;
    margin: 4px 0px;
    cursor: pointer;
    width:250px;
    display: none;
    position: fixed;
    z-index: 1;
	
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #254e25;
    padding: 5px 2px;
	margin: 4px 0px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f8fdf8;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/*cascade menu*/
/* Style the main menu */
    ul.menu {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    ul.menu li {
      display: inline-block;
      position: relative;
      margin-right: 20px;
    }

    ul.menu a {
      text-decoration: none;
      color: #333;
      padding: 10px;
    }

    /* Style the submenu */
    ul.submenu {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    ul.menu li:hover ul.submenu {
      display: block;
    }

    ul.submenu li {
      display: block;
	  color:254e25;
    }
/* Styles for the popup */
.popup {
    display: none;
    position: fixed;
    z-index: 1;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

.popup-content {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    display: block;
	background-color:white;
}

.close {
    color: black;
	background-color:white
    font-size: 60px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
#bild_ueberschrift{
	background-color:white;
	margin: auto;
    display: block;
}
#bild_beschreibung{
	background-color:white;
	margin: auto;
    display: block;
}