@import url(https://fonts.googleapis.com/css?family=Roboto:300);
@import url(https://fonts.googleapis.com/css?family=Vollkorn);

html, body {height: 100%; width: 100%; margin: 0px; padding: 0px;}

#homeright {position: fixed; right: 0px; width: 3.38in; box-sizing: border-box; -moz-box-sizing: border-box; height: 100%; background-color: rgba(255,255,255,0.6);}
#homeright > div {box-sizing: border-box; -moz-box-sizing: border-box; height: 20%; line-height:100px; color: rgb(148,102,110); font-family: Georgia; text-align: center;}
#homeright img {max-width: 90%; max-height: 100%; vertical-align: middle;}
#home #menubuttons {font-size: 36pt; height: 60%;}
#home #menubuttons > div.menubutton {box-sizing: border-box; -moz-box-sizing: border-box; margin-bottom: 20px; margin-left: 10px; margin-right: 10px; background-color: rgba(220,220,220,0.8); line-height: 75px;}
#home #mainbutton {font-size: 24pt;}
#home #Q {position: fixed; right: 20px; bottom: 20px; width: 60px; height: 60px; background-image: url(graphics/tablet/Q.png); background-position: center; background-size: contain; background-repeat: no-repeat;}

#left {position: fixed; top: 0px; background-color: rgba(90,81,85,1.0); text-align: center; z-index: 100;}
#left img {width: 60px;}
#left img#mainlogo {width: 1in; height: auto;}
#left img#backbutton {content:url("/wineinsight/graphics/tablet/image18w.png");}
#left img#homebutton {content:url("/wineinsight/graphics/tablet/image12w.png");}

/* 
#header {position: fixed; pointer-events: auto; top: 0px; width: 100%; height: 28px; font-family: "Roboto"; text-align: center;}
#header span {padding: 5px; background-color: #F2EEEA;}
 */
#top {position: fixed; right:0px; right:0px; margin: 0 auto; text-align: center; z-index: 101;}
#top .flex-container {display: none;}
#sectionselect {width: 300px; font-size: 133%; font-family: "Roboto"; border-color:grey;}
/* 
#footer {position: fixed; pointer-events: none; bottom: 0px; width: 100%; height: 60px; text-align: right; padding-right: 50px; box-sizing:border-box; -moz-box-sizing:border-box; text-align: center;}
#footer span {padding: 5px; background-color: #F2EEEA;}
 */
#background img {position: fixed; height: 100%; top:0px; left: 0px; width: 100%; z-index: -1; opacity: 0.075;}

/* #header > div {font-size: 60pt; line-height: 117px; text-transform: uppercase; color:rgb(166,166,166);} */
div.left {box-sizing: border-box; -moz-box-sizing: border-box; width: 50%; float: left; text-align: left;}
div.right {box-sizing: border-box; -moz-box-sizing: border-box; width: 50%; float: right; text-align: right;}

/* #wine {background-image: url(graphics/tablet/image16.png); background-size:100% 100%; background-repeat:no-repeat; background-attachment: fixed;} */
#wine {background-color: #F2EEEA;}
#wine #content {box-sizing: border-box; -moz-box-sizing: border-box; color:rgb(127,127,127); padding: 10px; width: 100%; -webkit-overflow-scrolling: touch; font-family: Georgia;}

@media only screen and (orientation: landscape) {
	body, table {font-size: 125%}
	#homemain img {height: 768px;}
	#homelogo {position: absolute; left: 0px; right: 0px; margin-left: 1.17in; margin-right: 3.38in; top: 50px; text-align: center;}
	#homeright {top: 0px;}
	#left {width: 1.17in; height: 100%; }
	#left img {margin-top: 25px;}
	#left img#mainlogo {position: absolute; left: 8px; top: 7px;}
	#left img#backbutton {position: absolute; left: 26px; bottom: 25px;}
	#left img#homebutton {position: absolute; left: 26px; bottom: 110px;}
	#top {top:0px; left:112px;}
	#wine #content {border-left: 112px solid transparent; margin-top: 28px;}
	#price {top: 10px;}
	#label {padding-top:130px;}
	.winename.bin {width: 65px; padding-top: 0.14in;}
	.winename.price {width: 45px; padding-top: 0.11in}
	.winename.size {width: 45px; padding-top: 0.14in;}
}
@media only screen and (orientation: portrait) {
	body, table {font-size: 100%}
	#homemain img {height: 1024px;}
	#homelogo {position: absolute; left: 0px; right: 0px; margin-top: 112px; margin-right: 3.38in; top: 50px; text-align: center;}
	#homeright {top: 112px;}
	#left {height: 112px; width: 100%; }
	#left img {margin-left: 25px;}
	#left img#mainlogo {position: absolute; top: 14px; left: 7px;}
	#left img#backbutton {position: absolute; top: 26px; right: 25px;}
	#left img#homebutton {position: absolute; top: 26px; right: 110px;}
	#top {top:0px; left:0px;}
	#wine #content {border-top: 112px solid transparent; margin-top: 28px;}
	#price {top: 122px;}
	#label {padding-top:242px;}
	.winename.bin {width: 50px; padding-top: 0.10in;}
	.winename.price {width: 35px; padding-top: 0.08in;}
	.winename.size {width: 35px; padding-top: 0.10in;}
}

.lists {font-family: "Roboto"; font-weight: 300; font-size: 267%; color:rgb(127,127,127); margin-bottom: 20px; text-align: center; text-transform: uppercase;}
div + div.lists {margin-top: 100px;}
.lists img {width: 275px;}
.areadescription {font-family: "Roboto"; font-size: 133%; color:rgb(127,127,127); margin-top: -20px; margin-bottom: 20px; text-align: center;}
/* .wines {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;} */
.section {-webkit-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid;}
.section + .section {margin-top: 30px; padding-bottom: 0px;}
.pwlhead + .pwlhead {margin-top: 30px; padding-bottom: 0px;}
.pwlhead {padding-bottom: 5px; font-family: "Roboto"; font-size: 233%; line-height: 1; color:rgb(127,127,127); text-align: left; text-transform: uppercase; border-bottom: 1px solid rgb(143,159,149);}
.pwlsubhead {padding-top: 10px; font-family: "Roboto"; font-size: 133%; line-height: 1; color:rgb(127,127,127); text-align: left;}
.level2 {padding-left: 30px; font-size: 180%;}
.level3 {padding-left: 60px; font-size: 160%;}
.w {padding-top: 10px; padding-bottom: 10px;}
.wines .w table {width: 100%;}
.winename.a {font-size: 117%; text-transform: uppercase;}
.winename.b {font-size: 150%; font-weight: bold; margin-top: -3px; color:rgb(89,89,89);}
.winename.b2 {font-size: 130%; font-weight: bold; margin-top: -3px; color:rgb(89,89,89); white-space: normal;}
.gc1.pwlhead, .gc1 .winename.a, .gc1 .winename.b, .gc1 #vintage, .gc1 #type, .gc1 #score, .gc1 #ws, .gc1 .ws {color: #009999;}
.gc2.pwlhead, .gc2 .winename.a, .gc2 .winename.b, .gc2 #vintage, .gc2 #type, .gc2 #score, .gc2 #ws, .gc2 .ws {color: #999900;}
.gc3.pwlhead, .gc3 .winename.a, .gc3 .winename.b, .gc3 #vintage, .gc3 #type, .gc3 #score, .gc3 #ws, .gc3 .ws {color: rgb(130,0,0);}
.gc4.pwlhead, .gc4 .winename.a, .gc4 .winename.b, .gc4 #vintage, .gc4 #type, .gc4 #score, .gc4 #ws, .gc4 .ws {color: rgb(213,132,0);}
.gc5.pwlhead, .gc5 .winename.a, .gc5 .winename.b, .gc5 #vintage, .gc5 #type, .gc5 #score, .gc5 #ws, .gc5 .ws {color: black;}
.winename.bin {color:rgb(127,127,127); vertical-align: top; font-family: "Roboto"; font-size: 75%;}
.winename.wine {vertical-align: top;}
.winename.c {font-size: 100%;}
.winename.price {vertical-align: top; text-align: right;}
.winename.size {color:rgb(127,127,127); vertical-align: top; text-align: left; font-family: "Roboto"; font-size: 75%; line-height: 1.5;}
.winename.calories {white-space: nowrap;}
.winename.ws {color:rgb(127,127,127); font-family: "Roboto"; font-size: 83%; white-space: nowrap;}
.winename.qty {color:rgb(127,127,127); font-family: "Roboto"; font-size: 83%; white-space: nowrap;}

#detail {font-family: Georgia; padding: 30px; color: rgb(89,89,89);}
#detail.red, #detail.red #price {color: rgb(217,217,217);}
#detail.white, #detail.white #price {}
#price {position: fixed; right: 0px; width: 38%; width: -webkit-calc(40% - 30px); width: calc(40% - 30px); box-sizing: border-box; -moz-box-sizing: border-box; text-align: center; font-family: "Roboto";}
#price table {margin-left: auto; margin-right: auto; font-size: 75%;}
#price img {height: 90px;}
#price .text {font-size: 150%;}
/* #nameheader {position: fixed; width: 58%; width: -webkit-calc(46% - 30px); width: calc(60% - 30px); background-color: white;} */
#producer {font-size: 150%; text-transform: uppercase; width: 58%; width: -webkit-calc(46% - 30px); width: calc(60% - 30px); border-bottom: 1px solid rgb(143,159,149); }
#producer > div {display: inline-block; width: 75%; padding-bottom: 0px;}
#country {display: inline-block; width: 21%;}
#origin {font-size: 100%; margin-top: 10px; width: 58%; width: -webkit-calc(60% - 30px); width: calc(60% - 30px);}
#vintage {font-size: 233%; margin-top: 20px;}
#type {width: -webkit-calc(60% - 30px); width: 58%; width: calc(60% - 30px); font-size: 233%;}
.varcomp {white-space: nowrap;}
.stories {width: -webkit-calc(60% - 30px); width: 58%; width: calc(60% - 30px); box-sizing: border-box; -moz-box-sizing: border-box; padding-right: 0px; font-size: 117%; margin-top: 10px;}
.stories.heading {font-weight: bold; text-transform: uppercase; padding-top: 20px;}
/* iframe {width: 50%; height: 300px;} */
/* #description {width: -webkit-calc(60% - 30px); width: 58%; width: calc(60% - 30px); font-size: 167%; margin-top: 20px; } */
#ws {font-size: 150%; text-transform: uppercase; padding-left: 50px;}
#score {font-size: 167%; text-transform: none; margin-top: 25px;}
#label {position: fixed; top: 0px; right: 0px; width: 38%; width: -webkit-calc(40% - 30px); width: calc(40% - 30px); box-sizing: border-box; -moz-box-sizing: border-box; padding-bottom: 70px; padding-right: 10px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
#label img {max-width: 100%; max-height: 100%;}
#winesheet {width: 100%; margin-bottom: 44px;}
.prevbutton img {position: fixed; bottom: 0px; left: 62%; left: -webkit-calc(60% + 30px); left: calc(60% + 30px); height: 24px; padding: 20px;}
embed/*, iframe*/ {width: 100%; height: 1600px;}
.nextbutton img {position: fixed; bottom: 0px; right: 0px; height: 24px; padding: 20px;}

#footer img {height: 50px; pointer-events: auto;}