<html>
<head>
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
body {
background: #E9EBEE;
margin: 0;
padding: 0;
}
.container {
max-width: 1000px;
margin:0 auto;
}
ul {
width:100%;
margin:0;
padding:0;
}
li {
list-style-type: none;
margin: 0;
padding-bottom: 10px;
width:100%;
display: table;
horizontal-align: left;
}
div {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 250;
color: #000000;
}
.banner {
width: 100%;
display: block;
margin: 0;
padding: 0;
}
.logoImage {
width:35%;
max-width:150px;
height:auto;
float: left;
}
.title {
width: 70%;
float: none;
text-align:center;
}
.categoryName {
font-size: 2em;
}
.categoryDescription {
font-size: 1.2em;
}
.tapList {
width: 100%;
display:block;
margin:0;
padding:0;
}
.lineItem {
display: table-row;
width:100%;
margin:0;
padding:0;
}
.tapName {
width:10%;
display: table-cell;
font-size: 1.5em;
vertical-align: middle;
text-align: center;
}
.beverageLogoWrapper {
width: 4%;
horizontal-align: left;
vertical-align: middle;
display: table-cell;
}
.beverageLogoBackground {
width: 50px;
height: 50px;
border-radius: 7px;
background: #FFFFFF;
border-radius: 7px;
}
.beverageLogo {
width: 50px;
height: 50px;
border-radius: 7px;
}
.beverageInfo {
padding-left: 10px;
width: 60%;
display: table-cell;
}
.producerName {
font-size: 1.2em;
float: left;
margin-right: 5px;
}
.beverageName {
font-size: 1.2em;
color: #EC702A;
}
.beverageColor {
width: 10px;
height: 10px;
margin-top: 1px;
float: left;
border-style : solid;
border-width: 1px;
border-color: #FFFFFF
}
.dryness {
font-size: .9em;
margin-left: 20px;
}
.beverageStyle {
font-size: .9em;
margin-left: 20px;
}
.producerLocation {
margin-left: 0;
font-size: .9em;
float: left;
}
.producerLocationMore {
margin-left: 10px;
font-size: .9em;
float: left;
}
.abv {
margin-left: 10px;
font-size: .9em;
float: left;
}
.ibu {
margin-left: 10px;
font-size: .9em;
}
.smv {
margin-left: 10px;
font-size: .9em;
}
.kegLevelWrapper {
width: 8%;
position: relative;
}
.kegLevel {
position:absolute;
bottom:7px;
left:10px;
width: 21px;
opacity: 0.7;
}
.justTapped {
display: table-cell;
width:10%;
color: #000000;
vertical-align: bottom;
padding-bottom: 7px;
font-size: .75em;
}
.priceList {
margin: 0;
padding:0;
}
.priceInfo {
list-style-type: none;
margin: 0%;
padding: 0;
overflow: hidden;
background-color: #cccccc;
}
.individualPrice {
margin: 0;
padding-bottom: 10px;
padding-right: 10px;
width:10%;
display:table;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="banner">
<figure class="logoImage" >
<img src="DigitalPour logo.png" />
</figure>
<div class="title"><h2>Current Tap List</h2></div>
</div>
<div class="categoryGroup">
<ul>{{#BeverageCategories}}
<li>
<div class="categoryHeader">
<div class="categoryName">{{CategoryName}}</div>
<div class="categoryDescription">{{CategoryDescription}}</div>
</div>
<div class="tapList">
<ul>{{#../MenuItems}}
<li>
{{#equal MenuItemProductDetail.BeverageCategory ../CategoryName}}
<div class="lineItem">
<div class="tapName">{{MenuItemDisplayDetail.DisplayName}}</div>
<div class="beverageLogoWrapper" ><div class="beverageLogoBackground"><img class="beverageLogo" src="{{LogoUrl MenuItemProductDetail.Beverage}}" /></div></div>
<div class="beverageInfo" name="beerLayout" style="display:{{VisibleBeverageDiv MenuItemProductDetail.BeverageType 'Beer'}}">
<div class="producerName">{{FullProducerName MenuItemProductDetail.Beverage.Brewery.BreweryName MenuItemProductDetail.Beverage.Collaborators}}</div>
<div class="beverageName">{{MenuItemProductDetail.Beverage.BeerName}}</div>
<div class="beverageColor" style="background:{{ToHexColor MenuItemProductDetail.Beverage.BeerStyle.Color}}"></div>
<div class="beverageStyle">{{FullStyleName "Beer" MenuItemProductDetail.Beverage}}</div>
<div class="producerLocation">{{MenuItemProductDetail.Beverage.Brewery.Location}}</div>
<div class="abv" style="visibility:{{VisibleIfAboveZero MenuItemProductDetail.Beverage.Abv}}">{{MenuItemProductDetail.Beverage.Abv}}% </div>
<div class="ibu" style="visibility:{{VisibleIfAboveZero MenuItemProductDetail.Beverage.Ibu}}">{{MenuItemProductDetail.Beverage.Ibu}} IBU</div>
</div>
<div class="beverageInfo" name="ciderLayout" style="display:{{VisibleBeverageDiv MenuItemProductDetail.BeverageType 'Cider'}}">
<div class="producerName">{{FullProducerName MenuItemProductDetail.Beverage.Cidery.CideryName MenuItemProductDetail.Beverage.Collaborators}}</div>
<div class="beverageName">{{MenuItemProductDetail.Beverage.CiderName}}</div>
<div class="beverageColor" style="background:{{ToHexColor MenuItemProductDetail.Beverage.CiderStyle.Color}}"></div>
<div class="dryness">{{MenuItemProductDetail.Beverage.CiderStyle.Dryness}}</div>
<div class="beverageStyle">{{FullStyleName "Cider" MenuItemProductDetail.Beverage}}</div>
<div class="producerLocation">{{MenuItemProductDetail.Beverage.Cidery.Location}}</div>
<div class="abv" style="visibility:{{VisibleIfAboveZero MenuItemProductDetail.Beverage.Abv}}">{{MenuItemProductDetail.Beverage.Abv}}% </div>
</div>
<div class="beverageInfo" name="meadLayout" style="display:{{VisibleBeverageDiv MenuItemProductDetail.BeverageType 'Mead'}}">
<div class="producerName">{{FullProducerName MenuItemProductDetail.Beverage.Meadery.MeaderyName MenuItemProductDetail.Beverage.Collaborators}}</div>
<div class="beverageName">{{MenuItemProductDetail.Beverage.MeadName}}</div>
<div class="beverageColor" style="background:{{ToHexColor MenuItemProductDetail.Beverage.MeadStyle.Color}}"></div>
<div class="beverageStyle">{{FullStyleName "Mead" MenuItemProductDetail.Beverage}}</div>
<div class="producerLocation">{{MenuItemProductDetail.Beverage.Meadery.Location}}</div>
<div class="abv" style="visibility:{{VisibleIfAboveZero MenuItemProductDetail.Beverage.Abv}}">{{MenuItemProductDetail.Beverage.Abv}}% </div>
</div>
<div class="beverageInfo" name="hardSeltzerLayout" style="display:{{VisibleBeverageDiv MenuItemProductDetail.BeverageType 'Hard Seltzer'}}">
<div class="producerName">{{FullProducerName MenuItemProductDetail.Beverage.HardSeltzerMaker.HardSeltzerMakerName MenuItemProductDetail.Beverage.Collaborators}}</div>
<div class="beverageName">{{MenuItemProductDetail.Beverage.HardSeltzerName}}</div>
<div class="beverageColor" style="background:{{ToHexColor MenuItemProductDetail.Beverage.HardSeltzerStyle.Color}}"></div>
<div class="beverageStyle">{{FullStyleName "Hard Seltzer" MenuItemProductDetail.Beverage}}</div>
<div class="producerLocation">{{MenuItemProductDetail.Beverage.HardSeltzerMaker.Location}}</div>
<div class="abv" style="visibility:{{VisibleIfAboveZero MenuItemProductDetail.Beverage.Abv}}">{{MenuItemProductDetail.Beverage.Abv}}% </div>
</div>
<div class="beverageInfo" name="softDrinkLayout" style="display:{{VisibleBeverageDiv MenuItemProductDetail.BeverageType 'Soft Drink'}}">
<div class="producerName">{{FullProducerName MenuItemProductDetail.Beverage.SoftDrinkMaker.SoftDrinkMakerName MenuItemProductDetail.Beverage.Collaborators}}</div>
<div class="beverageName">{{MenuItemProductDetail.Beverage.SoftDrinkName}}</div>
<div class="beverageColor" style="background:{{ToHexColor MenuItemProductDetail.Beverage.SoftDrinkStyle.Color}}"></div>
<div class="beverageStyle">{{FullStyleName "Soft Drink" MenuItemProductDetail.Beverage}}</div>
<div class="producerLocation">{{MenuItemProductDetail.Beverage.SoftDrinkMaker.Location}}</div>
</div>
<div class="beverageInfo" name="kombuchaLayout" style="display:{{VisibleBeverageDiv MenuItemProductDetail.BeverageType 'Kombucha'}}">
<div class="producerName">{{FullProducerName MenuItemProductDetail.Beverage.KombuchaMaker.KombuchaMakerName MenuItemProductDetail.Beverage.Collaborators}}</div>
<div class="beverageName">{{MenuItemProductDetail.Beverage.KombuchaName}}</div>
<div class="beverageColor" style="background:{{ToHexColor MenuItemProductDetail.Beverage.KombuchaStyle.Color}}"></div>
<div class="beverageStyle">{{FullStyleName "Kombucha" MenuItemProductDetail.Beverage}}</div>
<div class="producerLocation">{{MenuItemProductDetail.Beverage.KombuchaMaker.Location}}</div>
<div class="abv" style="visibility:{{VisibleIfAboveZero MenuItemProductDetail.Beverage.Abv}}">{{MenuItemProductDetail.Beverage.Abv}}% </div>
</div>
<div class="beverageInfo" name="coffeeLayout" style="display:{{VisibleBeverageDiv MenuItemProductDetail.BeverageType 'Coffee'}}">
<div class="producerName">{{FullProducerName MenuItemProductDetail.Beverage.CoffeeProducer.CoffeeProducerName MenuItemProductDetail.Beverage.Collaborators}}</div>
<div class="beverageName">{{MenuItemProductDetail.Beverage.CoffeeName}}</div>
<div class="beverageColor" style="background:{{ToHexColor MenuItemProductDetail.Beverage.CoffeeStyle.Color}}"></div>
<div class="beverageStyle">{{FullStyleName "Coffee" MenuItemProductDetail.Beverage}}</div>
<div class="producerLocation">{{MenuItemProductDetail.Beverage.BeanLocation}}</div>
<div class="roasting">{{MenuItemProductDetail.Beverage.Roasting}} </div>
</div>
<div class="beverageInfo" name="wineLayout" style="display:{{VisibleBeverageDiv MenuItemProductDetail.BeverageType 'Wine'}}">
<div class="producerName">{{FullProducerName MenuItemProductDetail.Beverage.Winery.WineryName MenuItemProductDetail.Beverage.Collaborators}}</div>
<div class="beverageName">{{MenuItemProductDetail.Beverage.WineName}}</div>
<div class="beverageColor" style="background:{{ToHexColor MenuItemProductDetail.Beverage.Color}}"></div>
<div class="beverageStyle">{{MenuItemProductDetail.Beverage.WineStyle.StyleName}}</div>
<div class="producerLocation">{{MenuItemProductDetail.Beverage.Winery.Country}}</div>
<div class="producerLocationMore">{{MenuItemProductDetail.Beverage.Winery.Region}}</div>
<div class="producerLocationMore">{{MenuItemProductDetail.Beverage.Winery.Subregion}}</div>
<div class="producerLocationMore">{{MenuItemProductDetail.Beverage.Winery.Appellation}}</div>
<div class="abv" style="visibility:{{VisibleIfAboveZero MenuItemProductDetail.Beverage.Abv}}">{{MenuItemProductDetail.Beverage.Abv}}% </div>
</div>
<div class="beverageInfo" name="sakeLayout" style="display:{{VisibleBeverageDiv MenuItemProductDetail.BeverageType 'Sake'}}">
<div class="producerName">{{FullProducerName MenuItemProductDetail.Beverage.Kura.KuraName MenuItemProductDetail.Beverage.Collaborators}}</div>
<div class="beverageName">{{MenuItemProductDetail.Beverage.SakeName}}</div>
<div class="beverageColor" style="background:{{ToHexColor MenuItemProductDetail.Beverage.Color}}"></div>
<div class="beverageStyle">{{FullStyleName "Sake" MenuItemProductDetail.Beverage}}</div>
<div class="producerLocation">{{MenuItemProductDetail.Beverage.Kura.Location}}</div>
<div class="abv" style="visibility:{{VisibleIfAboveZero MenuItemProductDetail.Beverage.Abv}}">{{MenuItemProductDetail.Beverage.Abv}}% </div>
<div class="smv" style="visibility:{{VisibleIfAboveZero MenuItemProductDetail.Beverage.Ibu}}">{{MenuItemProductDetail.Beverage.Smv}} SMV</div>
</div>
<div class="beverageInfo" name="customBeverageLayout" style="display:{{VisibleBeverageDiv MenuItemProductDetail.BeverageType 'Custom'}}">
<div class="beverageName">{{MenuItemProductDetail.Beverage.CustomBeverageName}}</div>
<div class="beverageColor" style="background:{{ToHexColor MenuItemProductDetail.Beverage.Color}}"></div>
<div class="abv" style="visibility:{{VisibleIfAboveZero MenuItemProductDetail.Beverage.Abv}}">{{MenuItemProductDetail.Beverage.Abv}}% </div>
</div>
<div class="justTapped" style="opacity:{{JustTappedOpacity DatePutOn}}" >Just Tapped</div>
<div class="kegLevelWrapper" style="display:{{KegLevelVisibility}}">
<img src="empty_keg_bottom.png" style="position:absolute;bottom:0px;width:40px;height=55px;" />
<img src="empty_keg_front.png" style="position:absolute;bottom:0px;width:40px;height=55px;opacity:0.5;z-index:5;" />
<div class="kegLevel" style="background:{{KegLevelColor MenuItemProductDetail.PercentFull}};height:{{KegLevelHeight MenuItemProductDetail.PercentFull}};" />
</div>
</div>
{{/equal}}
</li>
<div class="priceList">
<ul class="priceInfo">{{#MenuItemProductDetail.Prices}}
<li class="individualPrice">
<div>{{DisplayName}}</div>
<div>${{Price}}</div>
</li>
{{/MenuItemProductDetail.Prices}}
</ul>
</div>
<br>
{{/../MenuItems}}</ul>
</div>
</li>
{{/BeverageCategories}}</ul>
</div>
</div>
</body>
<html>