/*
**	Fonts
*/
@font-face {
	font-family: fgCondDemi;
	src: url(FRADMCN.TTF) format("truetype");
}
@font-face {
	font-family: fgCondMedium;
	src: url(FRAMDCN.TTF) format("truetype");
}
@font-face {
	font-family: fgDemi;
	src: url(FRADM.TTF) format("truetype");
}
@font-face {
	font-family: fgDemiItalic;
	src: url(FRADMIT.TTF) format("truetype");
}
@font-face {
	font-family: fgHeavy;
	src: url(FRAHV.TTF) format("truetype");
}
@font-face {
	font-family: fgHeavyItalic;
	src: url(FRAHVIT.TTF) format("truetype");
}
@font-face {
	font-family: fgMedium;
	src: url(framd.ttf) format("truetype");
}
@font-face {
	font-family: fgMediumItalic;
	src: url(framdit.ttf) format("truetype");
}

.groceryList {
	font-size: 16pt;
}
.groceryCell {
	padding: 5px 15px;
	margin: 5px 15px;
	line-height: 100%;
}
.groceryFlav {
	font-family: FranklinGothicURWCompressedDemi;
}
.groceryML {
	font-family: FranklinGothicURWCondensedBook;
}
.groceryAmt {
	font-family: FranklinGothicURWCondensedDemi;
}

body {
	margin: 0px 40px 100px;
	font-family: FranklinGothicURWBook,sans-serif;
	font-size: 16pt;
	overflow-y: scroll;	/* This forces the right side scrollbar to always appear */
}

.vlHeaderLogo {
	padding-top: 20px;
	padding-left: 5px;
	padding-bottom: 20px;
}


.recipeNameBar {
	line-height: 100%;
	position: relative;
	top: 50%;
	transform: translateY(-50%); 
}

.base			{ color: #dddddd; text-decoration: none; }
.cheer		{ color: #e8ccf3; text-decoration: none; }
.comet		{ color: #fecc2b; text-decoration: none; }
.crush		{ color: #f17e00; text-decoration: none; }
.eden			{ color: #b0d520; text-decoration: none; }
.festival	{ color: #ffc2d0; text-decoration: none; }
.paradise	{ color: #7dcde7; text-decoration: none; }
.venom		{ color: #eb3d50; text-decoration: none; }
.peachpie	{ color: #e9ec99; text-decoration: none; }


.baseBG		{ background-color: #DDDDDD; }
.cheerBG		{ background-color: #e8ccf3; }
.cometBG		{ background-color: #fecc2b; }
.crushBG		{ background-color: #f17e00; }
.edenBG		{ background-color: #b0d520; }
.festivalBG	{ background-color: #ffc2d0; }
.paradiseBG	{ background-color: #7dcde7; }
.venomBG		{ background-color: #eb3d50; }
.peachpieBG	{ background-color: #e9ec99; }


.highlight {
	background-color: #FFFDD0;	/* Cream */
}

.recipeCell {
	text-align: right;
	padding: 25px 10px;
	vertical-align: middle;
}

.bolden {
	font-family: fgCondDemi;
	font-size: 24pt;
}

.recipeTable {
	border: black solid 2px;
}

.btn-volume {
	width: 90px;
	padding: 15px 20px;
	text-align: middle;
	margin-right: 10px;
	font-family: FranklinGothicURWCompressedDemi;
	font-size: 16pt;
}

.btn { border: white solid 6px; }
.btn.active { border: black solid 6px; }

.btn-blue { color: white; background-color: #0088bf; }
.btn-green {color: white;  background-color: #00A368; }
.btn-red { color: white; background-color: #C40223; }

.btn-flavor {
	width: 150px;
	padding: 10px;
	text-align: middle;
	margin-right: 10px;
	font-family: fgDemi;
	font-size: 16pt;
	margin-bottom: 8px;
}

.btn-flavor:checked {
	color: blue;
}

.stepDesc {
	font-family: FranklinGothicURWCompressedDemi;
	font-size: 36pt;
	padding-bottom: 10px;
	padding-top: 20px;
}
.pnButton {
	width: 150px;
	height: 75px;
	font-family: FranklinGothicURWDemi;
	font-size: 18pt;
}

.volButtons input[type="radio"]:checked ~ * { 
    background:pink !important;
}

.bottles {
	font-size: 13pt;
	text-align: center;
	padding: 0px 20px 0px;
}
.bottlesNum {
	font-size: 18pt;
	font-family: fgCondDemi;
	text-align: center;
	padding: 0px 20px 0px;
}


.stepBox {
	border: black solid 10px;
	padding-top: 30px;
	padding-bottom: 30px;
}
.flavorBrand {
	font-family: FranklinGothicURWDemi;
	font-size: 2em;
}
.flavorName {
	position: relative;
	top: .5em;
	padding-left: 30px;
	font-family: fgCondDemi;
	font-size: 16pt;
//	line-height: 1em;
	padding-bottom: 30px;
}
H1 {
	font-family: FranklinGothicURWCondensedDemi;
	font-size: 24pt;
}
.flavorGrams {
	font-family: FranklinGothicURWHeavy;
	font-size: 8em;
	line-height: 0.8em;
}
.flavorGramLabel {
	font-family: FranklinGothicURWDemi;
	font-size: 2em;
}

td.heading {
	padding: 2px 14px;
	background: #333;
	color: white;
	font-family: FranklinGothicURWBook;
	font-size: 16pt;
}
td.shopList {
	padding: 2px 14px;
	font-family: FranklinGothicURWBook;
	font-size: 14pt;
}
.align-left { text-align: left; }
.align-right { text-align: right; }
.align-center { text-align: center; }


@font-face {
	font-family: FranklinGothicURWBookItalic;
	src: url(/fonts/Franklin-Gothic-URW-Book-Italic.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWBook;
	src: url(/fonts/Franklin-Gothic-URW-Book.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWCompressedBookItalic;
	src: url(/fonts/Franklin-Gothic-URW-Compressed-Book-Italic.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWCompressedBook;
	src: url(/fonts/Franklin-Gothic-URW-Compressed-Book.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWCompressedDemiItalic;
	src: url(/fonts/Franklin-Gothic-URW-Compressed-Demi-Italic.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWCompressedDemi;
	src: url(/fonts/Franklin-Gothic-URW-Compressed-Demi.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWCondensedBookItalic;
	src: url(/fonts/Franklin-Gothic-URW-Condensed-Book-Italic.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWCondensedBook;
	src: url(/fonts/Franklin-Gothic-URW-Condensed-Book.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWCondensedDemiItalic;
	src: url(/fonts/Franklin-Gothic-URW-Condensed-Demi-Italic.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWCondensedDemi;
	src: url(/fonts/Franklin-Gothic-URW-Condensed-Demi.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWCondensedMediumItalic;
	src: url(/fonts/Franklin-Gothic-URW-Condensed-Medium-Italic.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWCondensedMedium;
	src: url(/fonts/Franklin-Gothic-URW-Condensed-Medium.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWDemiItalic;
	src: url(/fonts/Franklin-Gothic-URW-Demi-Italic.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWDemi;
	src: url(/fonts/Franklin-Gothic-URW-Demi.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWExtraCompressedBook;
	src: url(/fonts/Franklin-Gothic-URW-Extra-Compressed-Book.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWExtraCompressedDemi;
	src: url(/fonts/Franklin-Gothic-URW-Extra-Compressed-Demi.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWHeavyItalic;
	src: url(/fonts/Franklin-Gothic-URW-Heavy-Italic.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWHeavy;
	src: url(/fonts/Franklin-Gothic-URW-Heavy.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWLight;
	src: url(/fonts/Franklin-Gothic-URW-Light.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWMediumItalic;
	src: url(/fonts/Franklin-Gothic-URW-Medium-Italic.otf) format("opentype");
}
@font-face {
	font-family: FranklinGothicURWMedium;
	src: url(/fonts/Franklin-Gothic-URW-Medium.otf) format("opentype");
}
-