/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

body { background-color: white; font-family: Helvetica, Arial, sans-serif; }

.header { background: #b4bc55; background-image: linear-gradient(bottom, #b4bc55, #989f3f); background-image: -moz-linear-gradient(#b4bc55, #989f3f); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4bc55), to(#989f3f)); border-bottom: 1px solid #6f7339; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25); padding-bottom: 5px; padding-top: 5px; position: relative; text-align: center; width: 100%; }

.main { background: #e2c792; background-image: linear-gradient(bottom, #e2c792, #f2e6ce); background-image: -moz-linear-gradient(#e2c792, #f2e6ce); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e2c792), to(#f2e6ce)); color: #111111; padding-bottom: 10px; padding-top: 10px; width: 100%; }
.main:after { content: ""; display: table; clear: both; }

.action-bar { background-color: #c8a870; border-top: 1px solid white; box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25); padding-bottom: 10px; padding-top: 10px; position: relative; width: 100%; }

.footer { background: #545454; background-image: linear-gradient(bottom, #545454, #393939); background-image: -moz-linear-gradient(#545454, #393939); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#545454), to(#393939)); border-top: 1px solid #393939; padding-bottom: 20px; padding-top: 20px; text-align: center; }
.footer ul { display: inline-block; }
.footer ul:after { content: ""; display: table; clear: both; }
.footer li { color: #ffffff; cursor: pointer; float: left; font-size: 12px; font-weight: bold; padding: 10px; text-align: center; text-shadow: 0px 1px 0px black; }

.centered-copy { left: 50%; position: relative; margin-left: -200px; text-align: center; width: 400px; }
@media screen and (max-width: 480px) { .centered-copy { left: 0; position: normal; width: 80%; margin-left: 10%; margin-right: 10%; } }

.one-button-centered-group { text-align: center; }

.two-button-centered-group { text-align: center; }
.two-button-centered-group button:first-child { margin-right: 10px; }

.brew-mini-sample-pic { height: 165px; margin: 0 auto; width: 125px; }

h2 { color: white; font-size: 40px; font-weight: bold; text-shadow: 0 2px 3px gray; }
@media screen and (max-width: 480px) { h2 { font-size: 20px; } }

h3 { font-size: 22px; font-weight: bold; padding-bottom: 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); }
@media screen and (max-width: 480px) { h3 { font-size: 16px; } }

p { color: #111111; font-size: 16px; line-height: 20px; padding-bottom: 5px; padding-top: 5px; }
@media screen and (max-width: 320px) { p { font-size: 12px; line-height: 16px; } }

a { text-decoration: none; }

input[type=text], textarea { -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out; -ms-transition: all 0.20s ease-in-out; transition: all 0.20s ease-in-out; border-radius: 3px; border-color: #c8a870; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25); font-size: 16px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 5px; outline: none; overflow: auto; resize: none; width: 300px; }
@media screen and (max-width: 320px) { input[type=text], textarea { font-size: 14px; padding: 3px; width: 250px; } }
input[type=text]:focus, textarea:focus { -webkit-box-shadow: 0 0 5px #6f7339; -moz-box-shadow: 0 0 5px #6f7339; box-shadow: 0 0 5px #6f7339; border: 1px solid #6f7339; }

.hidden { display: none; }

.message-group { padding-bottom: 15px; }
.message-group li { padding-bottom: 10px; }

.popup { background-color: #c8a870; border: 10px solid white; border-radius: 15px; color: #111111; left: 50px; padding: 10px; position: fixed; top: 175px; z-index: 20; }
@media screen and (max-height: 300px) { .popup { position: absolute; } }
.popup .popup-panel:after { content: ""; display: table; clear: both; }
.popup .popup-type-group { margin-bottom: 10px; width: 100%; }
.popup .popup-button-group { margin-bottom: 10px; margin-top: 10px; text-align: center; }
.popup .popup-button-group button:first-child { margin-right: 10px; }
.popup .popup-type-header { background: #b4bc55; background-image: linear-gradient(bottom, #b4bc55, #989f3f); background-image: -moz-linear-gradient(#b4bc55, #989f3f); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4bc55), to(#989f3f)); border-bottom: 1px solid #6f7339; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25); color: white; font-size: 24px; padding: 5px; padding-left: 0; padding-right: 0; padding-top: 5px; padding-bottom: 5px; text-align: center; text-shadow: 0 2px 3px gray; }
@media screen and (max-width: 320px) { .popup .popup-type-header { font-size: 20px; } }
.popup .popup-type-header-selected { color: #6f7339; }
.popup .popup-header-tab-group { border-bottom: 1px solid #6f7339; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25); margin-bottom: 10px; }
.popup .popup-header-tab-group li:first-child { margin-right: 7px; }
@media screen and (max-width: 320px) { .popup .popup-header-tab-group li:first-child { margin-right: 4px; } }
.popup .popup-header-tab-group li:last-child { margin-left: 8px; }
@media screen and (max-width: 320px) { .popup .popup-header-tab-group li:last-child { margin-left: 6px; } }
.popup .popup-header-tab { border-top-left-radius: 5px; border-top-right-radius: 5px; cursor: pointer; float: left; width: 95px; }
@media screen and (max-width: 320px) { .popup .popup-header-tab { width: 80px; } }
.popup .item-choice { cursor: pointer; padding-bottom: 5px; padding-left: 5px; padding-top: 5px; background-color: #color-mid-dark; }
.popup .item-choice:hover { background-color: white; }
.popup .item-choice:active { background-color: #989f3f; }
.popup .item-choice.selected { background-color: #989f3f; color: white; }
.popup .item-choice .color-sample { border: 2px solid white; border-radius: 15px; float: left; height: 15px; margin-right: 5px; margin-top: -2px; width: 15px; }
.popup.showPopIn { -moz-animation: bounceIn 0.5s 1 linear; -webkit-animation: bounceIn 0.5s 1 linear; animation: bounceIn 0.5s 1 linear; }
.popup.hidePopOut { -moz-animation: bounceOut 0.5s 1 linear; -webkit-animation: bounceOut 0.5s 1 linear; animation: bounceOut 0.5s 1 linear; }

.popup-underlay { background-color: rgba(0, 0, 0, 0.75); height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 10; }

.recipe-popup { left: 50%; margin-left: -170px; top: 50px; width: 300px; }
@media screen and (max-width: 320px) { .recipe-popup { margin-left: -145px; width: 250px; } }
.recipe-popup .recipe-list { height: 210px; overflow-y: scroll; }

.ingredient-popup { left: 50%; margin-left: -170px; top: 75px; width: 300px; }
@media screen and (max-width: 320px) { .ingredient-popup { margin-left: -145px; top: 50px; width: 250px; } }
.ingredient-popup .ingredient-list { height: 210px; overflow-y: scroll; }

.confirm-popup { left: 50%; margin-left: -170px; top: 125px; width: 300px; }
@media screen and (max-width: 320px) { .confirm-popup { margin-left: -145px; top: 105px; width: 250px; } }

.legal-popup { left: 0; margin-left: 10%; position: absolute; top: 25px; width: 70%; }
.legal-popup .message { max-height: 400px; overflow-y: scroll; }
@media screen and (max-height: 480px) { .legal-popup .message { max-height: 275px; } }

button { border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow: 0px 1px #b6e6ff inset; -moz-box-shadow: 0px 1px #b6e6ff inset; box-shadow: 0px 1px #b6e6ff inset; background: #03abff; background-image: linear-gradient(bottom, #03abff, #008acf); background-image: -moz-linear-gradient(#03abff, #008acf); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#03abff), to(#008acf)); border: 1px solid #008acf; color: white; cursor: pointer; font-size: 18px; font-weight: bold; padding-bottom: 9px; padding-top: 9px; text-align: center; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.35); width: 130px; }
@media screen and (max-width: 480px) { button { font-size: 16px; padding-bottom: 5px; padding-top: 5px; width: 100px; } }
button:hover { background: #36bcff; background-image: linear-gradient(bottom, #36bcff, #03abff); background-image: -moz-linear-gradient(#36bcff, #03abff); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#36bcff), to(#03abff)); }
button:active { background: #008acf; background-image: linear-gradient(bottom, #008acf, #00689c); background-image: -moz-linear-gradient(#008acf, #00689c); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008acf), to(#00689c)); }
button.long { width: 225px; }
button.grey { -webkit-box-shadow: 0px 1px #b9b9b9 inset; -moz-box-shadow: 0px 1px #b9b9b9 inset; box-shadow: 0px 1px #b9b9b9 inset; background: #606060; background-image: linear-gradient(bottom, #606060, #474747); background-image: -moz-linear-gradient(#606060, #474747); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#606060), to(#474747)); border: 1px solid #474747; }
button.grey:hover { background: #7a7a7a; background-image: linear-gradient(bottom, #7a7a7a, #606060); background-image: -moz-linear-gradient(#7a7a7a, #606060); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7a7a7a), to(#606060)); }
button.grey:active { background: #474747; background-image: linear-gradient(bottom, #474747, #2d2d2d); background-image: -moz-linear-gradient(#474747, #2d2d2d); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#474747), to(#2d2d2d)); }
button.brown { -webkit-box-shadow: 0px 1px #dcc6a8 inset; -moz-box-shadow: 0px 1px #dcc6a8 inset; box-shadow: 0px 1px #dcc6a8 inset; background: #956f3c; background-image: linear-gradient(bottom, #956f3c, #71542d); background-image: -moz-linear-gradient(#956f3c, #71542d); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#956f3c), to(#71542d)); border: 1px solid #71542d; }
button.brown:hover { background: #b78a4d; background-image: linear-gradient(bottom, #b78a4d, #956f3c); background-image: -moz-linear-gradient(#b78a4d, #956f3c); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b78a4d), to(#956f3c)); }
button.brown:active { background: #71542d; background-image: linear-gradient(bottom, #71542d, #4c391f); background-image: -moz-linear-gradient(#71542d, #4c391f); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#71542d), to(#4c391f)); }
button.drop-down-arrow { background-image: url("../images/ArrowDown.png"); background-position: center; background-repeat: no-repeat; height: 31px; width: 31px; }
button.drop-down-arrow img { display: block; margin: 0 auto; }

.work-panel-coffee { float: left; padding-bottom: 10px; padding-top: 5px; width: 50%; }
.work-panel-coffee:after { content: ""; display: table; clear: both; }
@media screen and (max-width: 480px) { .work-panel-coffee { float: none; width: 100%; } }
@media screen and (min-width: 481px) and (max-width: 767px) { .work-panel-coffee { width: 60%; } }

.work-panel-controls { float: left; padding-bottom: 10px; padding-top: 5px; width: 50%; }
.work-panel-controls:after { content: ""; display: table; clear: both; }
@media screen and (max-width: 480px) { .work-panel-controls { float: none; width: 100%; } }
@media screen and (min-width: 481px) and (max-width: 767px) { .work-panel-controls { width: 40%; } }

.work-panel-buttons { float: left; padding-bottom: 10px; padding-top: 10px; width: 100%; }
@media screen and (max-width: 480px) { .work-panel-buttons { float: none; } }

.brew-pic { float: right; height: 400px; width: 300px; }
@media screen and (max-width: 480px ) { .brew-pic { float: none; margin: 0 auto; } }
@media screen and (max-width: 320px ) { .brew-pic { height: 260px; width: 195px; } }
.brew-pic .cup-layer { height: 80px; }

.brew-empty-button-pos { float: right; margin-right: 80px; }
@media screen and (max-width: 480px) { .brew-empty-button-pos { float: none; margin: 0 auto; display: block; } }

.brew-recipe-button-pos { float: left; margin-left: 40px; }
@media screen and (max-width: 480px) { .brew-recipe-button-pos { float: none; margin: 0 auto; display: block; } }

@media screen and (max-width: 480px) { .drop-down-group { width: 175px; margin: 0 auto; } }
.drop-down-group li { padding: 25px; }
@media screen and (max-width: 480px) { .drop-down-group li { padding: 0; padding-bottom: 4px; } }
.drop-down-group p { background-color: white; border: 1px solid #c8a870; border-radius: 3px; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25); font-size: 16px; line-height: 20px; margin-left: 40px; padding: 5px; width: 125px; }
.drop-down-group button { position: absolute; }

@-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); }
  50% { opacity: 1; -webkit-transform: scale(1.05); }
  70% { -webkit-transform: scale(0.9); }
  100% { -webkit-transform: scale(1); } }

@-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(0.3); }
  50% { opacity: 1; -moz-transform: scale(1.05); }
  70% { -moz-transform: scale(0.9); }
  100% { -moz-transform: scale(1); } }

@keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); } }

.bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; animation-name: bounceIn; }

@-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); }
  25% { -webkit-transform: scale(0.95); }
  50% { opacity: 1; -webkit-transform: scale(1.1); }
  100% { opacity: 0; -webkit-transform: scale(0.3); } }

@-moz-keyframes bounceOut { 0% { -moz-transform: scale(1); }
  25% { -moz-transform: scale(0.95); }
  50% { opacity: 1; -moz-transform: scale(1.1); }
  100% { opacity: 0; -moz-transform: scale(0.3); } }

@keyframes bounceOut { 0% { transform: scale(1); }
  25% { transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(0.3); } }

.bounceOut { -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; animation-name: bounceOut; }

.receive-group { padding-bottom: 10px; padding-left: 15px; padding-right: 10px; }
.receive-group:after { content: ""; display: table; clear: both; }
@media screen and (min-width: 768px) { .receive-group { margin-left: 10px; } }
@media screen and (min-width: 321px) and (max-width: 480px) { .receive-group { margin: 0 auto; width: 300px; } }
@media screen and (max-width: 320px) { .receive-group { margin-left: 60px; padding: 0; } }
@media screen and (max-width: 320px) { .receive-group p { width: 200px; } }
.receive-group .receive-name { font-size: 18px; font-weight: bold; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); }
.receive-group .receive-author { font-size: 18px; font-weight: bold; }
.receive-group .receive-message { font-size: 16px; }
@media screen and (min-width: 768px) { .receive-group .receive-message { width: 300px; } }
.receive-group .receive-ingredient { font-size: 12px; }
.receive-group li { font-family: Verdana, Tahoma, Helvetica, sans-serif; font-size: 16px; line-height: 18px; padding-bottom: 5px; padding-left: 5px; padding-top: 5px; }
.receive-group li .color-sample { border: 2px solid white; border-radius: 15px; float: left; height: 15px; margin-right: 5px; width: 15px; }