@charset "utf-8";
html { height: 100%;  overflow-y: scroll; }
body { height: 100%; min-width: 320px; }
menu, ol, ul { padding: 0; margin: 0; }
#center { margin: 0 auto; width: 1024px; min-height: 100%;
background-image: -webkit-linear-gradient(90deg, #fff 0px, #fff 364px, #dfdbd0 364px);
background-image: -o-linear-gradient(90deg, #fff 0px, #fff 364px, #dfdbd0 364px);
background-image: linear-gradient(90deg, #fff 0px, #fff 364px, #dfdbd0 364px);
}

#header { position: relative;}
#logo { position: absolute; height: 170px; right: 0px; top: 0px; background: url("../images/logo.png") no-repeat scroll 0 0 / cover;}

#logo img { width: 528px; height: 170px; }

#jf-logo { position: absolute; top: 87px;}
#jf-logo > img { background: url("../images/jf-logo.png")  repeat-x scroll 0 0 / cover; width: 1024px; height: 175px;}
#jf-logo > div a { height: 176px; left: 59px; position: absolute; width: 176px; }

#left { width: 364px; float: left; background-color: #FFF; min-height: calc(100% - 241px); min-height: -webkit-calc(100% - 241px); }
#right { width: 660px; float: left; background-color: #dfdbd0; min-height: calc(100% - 241px); min-height: -webkit-calc(100% - 241px);}
#footer { width: 660px; float: right; }
#content_footer {width: 1024; float: left; background-image: url(../images/fh_pre_footer.jpg)}
#navigation { margin-top: 25px; padding-left: 92px; text-align: left; }
#navigation-bottom { margin-top: 25px; margin-bottom: 40px; padding-left: 92px; text-align: left; }

#cmsarea1 { position: absolute; top: 130px; right: 72px; width: 390px; height: 0; font-family: Arial, Helvetica, sans-serif ; font-size: 16px; color: #E1DCC3; letter-spacing: 2.4px; z-index: 1; }
#cmsarea2 { width: 100%; height: 170px; }
#cmsarea3 { width: 100%; }
#cmsarea3-index, #cmsarea4-index { padding: 15px 28px; width: 514px; color: #50462d; font-size: 12px;}
#cmsarea3-index p, #cmsarea4-index p{font-size: 11px; line-height: 18px; color: #50462D;} 
#weinlieferung { width: 100%; height: 43px; padding-top: 28px; background: #fff; }
#weinlieferung table {color: #847348; float: right; font-size: 16px; font-weight: bold; margin-right: 45px; width: calc(100% - 453px); width: -webkit-calc(100% - 453px);}
#cmsarea3-bkg { width:570px; background: #fff; border: 1px solid #50462D;}
#cmsarea4-bkg { margin: 25px 0; width: 570px; background: #fff; border: 1px solid #50462D;}

#cmsarea3-index > table, #cmsarea4-index > table { margin-bottom: 5px; }
#cmsarea5 { width: 660px; }
#cmsarea3-outer { margin: 56px 45px 0 45px; }
/* html #cmsarea3-outer { position: relative; margin-top: -369px; margin-left: 100px; }*/

.clearfix:after {
  content: " ";
  clear: both;
/*  height: 0;*/
  visibility: hidden;
  display: block;
}
.clearfix {
  display: inline-block; /* Fixes IE/Mac */
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.black {/*background-color: #000; color: #b59f66 !important*/}

#menu-button { display: none;}


#orders {
	display: none;
	width: 800px;
	height: 500px;
    background-image: url(../images/orders_bg.jpg);
	background-repeat: repeat-y;
	opacity: 0;
	border: 10px solid #b59f66;
	z-index:200;
	overflow: hidden;
	overflow-y: auto;
}

#orders-body { width: 100%; }

#bookings {
	display: none;
	width: 800px;
	height: 500px;
    background-image: url(../images/orders_bg.jpg);
	background-repeat: repeat-y;
	opacity: 0;
	border: 10px solid #b59f66;
	z-index:200;
	overflow: hidden;
	overflow-y: auto;
}

#bookings-body { }




#overlay {
   position: fixed;
   z-index:199;
   top: 0px;
   left: 0px;
   height:100%;
   width:100%;
   background-color:#000;
   opacity: 0.50;
   -moz-opacity: 0.50;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
}

* html #overlay { /* ie6 hack */
   position: absolute;
   height: expression(document.body.scrollHeight > document.body.
    offsetHeight ? document.body.scrollHeight : document.body.
    offsetHeight + 'px');
}

.white { color: #fff; }
.hiddenDiv { display: none; width: 100%; /*width: 400px;  margin-left: 70px; */ margin-bottom: 20px;}
.hiddenDiv p { line-height: 1.3em;}
.weinname { color: #000; font-size: 14px; }
.itemRight {color: #50462d;}
#ordercloser { position: absolute; top: 0px; right: 0px;}
#orderForm input { border: 1px solid #50462d; padding: 3px 5px; margin-right: 2px; width: 2.5em; text-align: right;}
#bookingForm input {border: 1px solid #50462d; padding: 3px 5px;}

#bookingForm .itemOuter { margin-bottom: 5px; float: left; width: 100%;}
#bookingForm .itemLeft { width: 170px; height: auto;  }
#bookingForm .itemRight {  width: -webkit-calc(100% - 170px); width: calc(100% - 170px); height: auto; }

#bookingForm .itemRight > div, #bookingForm .itemRight > label { float: left;}
.bookingSubmit > img { float: right; }

#bookingForm .itemLeft > input { float: right; margin-right: 1em; margin-top: 0.2em; }

#bookingForm .itemLeft > div { display: inline-block; float: right; margin-right: 0.5em;}


#bookingcloser { position: absolute; top: 0px; right: 0px;}

.itemLeft { float: left; width: -webkit-calc(100% - 220px); width: calc(100% - 220px); height: 30px; }
#orderForm table { line-height: 30px; }

.itemLeft td:first-child { width: 0; } 
.itemLeft td:first-child.orderEdit { width: 53px; }

.itemRight { float: right; text-align: right; width: 220px; height: 30px; /*font-size: 12px;*/ }
.spacer { height: 3px; clear: both; }

.weinheader { font-size: 16px; font-weight: bold; color: #50462d;} 

.co-input { border: 1px solid #50462d; width: calc(100% - 10px); width: -webkit-calc(100% - 10px); font-family: Arial, Verdana, sans-serif; font-size:12px; padding: 3px 5px; }
.co-textarea { border: 1px solid #50462d; width: calc(100% - 10px); width: -webkit-calc(100% - 10px); font-family: Arial, Verdana, sans-serif; font-size:12px; padding: 3px 5px;}


.attributeinput > input {
    border: 1px solid;
}

#checkoutForm .weinname { width: 20%; min-width: 95px;}

.shadow { box-shadow: 3px 3px 3px #333333; }

#footer_logos { margin: 90px 0 30px 45px;}
#footer_logos > p { font-size: 18px; font-weight: bold; letter-spacing: 0.4px; margin-bottom: 10px;}
#footer_logos > a { margin-right: 56px; }
#footer_logos > a:last-child { margin-right: 0;}
  

@media (max-width: 1023px) {
#center {width: 100%; background: #dfdbd0;}
#logo { right: calc(7% - 36px); right: -webkit-calc(7% - 36px); }

#jf-logo { overflow: hidden; width: calc(93% + 72px); width: -webkit-calc(93% + 72px); left: calc(-72px + 7%); left: calc(-72px + 7%);}



#menu-button { display: block; position: absolute; right: 7%; top: 128px; }

#left { display: none; width: 100%; min-height: unset; position: absolute; }
#navigation, #navigation-bottom { padding-left: 7%; }
#navigation {margin-top: 0;}
#navigation-bottom {padding-bottom: 50px;}

#right { width: 100%; min-height: calc(100% - 284px); min-height: -webkit-calc(100% - 284px); }
  
#cmsarea3-outer { margin: 30px auto 0; width: 86%; }
#cmsarea3-bkg, #cmsarea4-bkg { width: 100%;}
#cmsarea3-index, #cmsarea4-index { width: 86%; padding: 15px 7%;}

#cmsarea1 { right: calc(7% + 60px); right: -webkit-calc(7% + 60px); text-align: right;}

#weinlieferung { height: 86px;}
#weinlieferung table { margin-right: 7%; width: calc(86% - 200px); width: -webkit-calc(86% - 200px);}

#footer_logos { margin: 100px 7% 0;}

#footer_logos > a { margin-right: 7%; width: 86%; margin-bottom: 10px;}

/*.itemLeft { width: 50%;}*/


}

@media (max-width: 760px) {
.itemLeft { width: -webkit-calc(100% - 220px); width: calc(100% - 220px);}
.itemRight { width: 220px; }
}

@media (max-width: 740px) { 

#cmsarea1 { display: none;}




#weinlieferung td {
    display: inline-block;
    text-align: right;
    width: 100%;
  }



}


@media (max-width: 740px) { 

  #cmsarea2 { height: 85px; background-size: cover !important; }

  #jf-logo { left: calc(-36px + 5%); left: -webkit-calc(-36px + 5%); width: calc(95% + 36px); width: -webkit-calc(95% + 36px); top: 43px;  }

  #jf-logo > img { width: 100%; height: 87px; background: url("../images/jf-logo.png") repeat-x scroll 0 0 / 740px auto rgba(0, 0, 0, 0); }

  #jf-logo > div a { height: 88px; left: 29px; position: absolute; width: 88px; }

  #logo { right: calc(5% - 18px); right: -webkit-calc(5% - 18px); height: 85px; }
  #logo img { float: right;  height: 85px; width: 264px; }

  #menu-button { right: 5%; top: 64px; }
  #menu-button img { width: 50%; height: auto; float: right;}

  #navigation, #navigation-bottom { padding-left: 5%; }

  #weinlieferung { height: 50px; padding-top: 10px; }

  #weinlieferung table { width: calc(90% - 80px); width: -webkit-calc(90% - 80px); margin-right: 5%; }

  #right { min-height: calc(100% - 145px); min-height: -webkit-calc(100% - 145px);}

  #cmsarea2 { background-position: 0 0 !important; background-size: 110% auto !important;}

  #cmsarea3-index, #cmsarea4-index { padding: 15px 5%; width: 90%; }
  #cmsarea3-outer { width: 90%; }

  #footer_logos { margin: 50px 5% 0;}
  #footer_logos > a { display: block; width: 90%; }




}



@media (max-width: 625px) {
.itemLeft { width: -webkit-calc(100% - 200px); width: calc(100% - 200px);}
.itemRight { width: 200px; }
}

@media (max-width: 600px) {
  .itemLeft { float: left; width: 100%; height: 20px; padding: 0; }
  .itemRight { height: 20px; padding-bottom: 20px; }
  #orderForm table { line-height: 20px; }
  #bookingForm .itemRight { width: 100%; padding-bottom: 5px;}
  #bookingForm .checkbox .itemLeft { width: 30px; }
  #bookingForm .checkbox .itemRight { width: webkit-calc(100% - 30px); width: calc(100% - 30px); text-align: left; }
  #bookingForm .itemLeft > div { float: left; }
  #bookingForm .itemLeft > input { float: left; }
  .toggleDiv {display: none;}
  .hiddenDiv {display: block; font-size: 11px;}

}

@media (max-width: 512px) {
  #cmsarea2 { background-size: cover !important; background-position: center !important; }

}

@media (max-width: 380px) { 
  #logo { position: absolute; right: 0px; top: 0px; background: url("../images/logo-kurz.png") no-repeat scroll 0 0 / cover;}
}

@media (min-width: 1024px) {
  #left { display: block !important;}
  
}