body {
  background-color: #bbc;
  background-image: url('images/appBG.jpg');
  margin: 0px;
  font-family: helvetica;
  font-size: 10pt;
  //max-height: 600px;
  //overflow: scroll;
}

h1 {
  margin: 0.5em;
  text-align: center;
  color: white;
  text-shadow: 0px -1px 0px #000;
  font-size: 1.5em;
}

h2 {
  background-color: lightgrey;
  margin: 0px;
  padding-left: 20px;
  font-size: 1.25em;
  color: white;
  text-shadow: 0px -1px 0px #444;
}

h3 {
  background-color: darkgrey;
  margin: 0px;
  padding-left: 20px;
  font-size: 10pt;
}

h4 {
  padding-left: 20px;
}

h5 {
  font-weight: bold;
  font-size: 1em;
  margin: 11pt;
}

p {
  margin-left: 1.5em;
  margin-right: 1.5em;
}

img {
  border: 0px;
}

img.prevMealImage {
  float: left;
  display: block;
  width: 60px;
  height: 60px;
  padding: 0.75em;
  padding-right: 1.5em;
}

img.listItemThumbnail {
  float: left;
  display: block;
  width: 60px;
  height: 60px;
  padding: 0.75em;
}

canvas.canvasThumbnail {
  float: left;
  display: block;
  width: 60px;
  height: 60px;
  padding: 0.75em;
}

a:visited {
  color: grey;
  text-decoration: none;
}

.ratingImage img {
  height: 1em;
  width: auto;
}

.alignCenter {
  text-align: center;
}

.itemClickable {
  cursor: pointer;
}

div.navBar {
  background-color: #99c;
  background-image: url('images/navBarBG.jpg');
  background-size: contain;
  //border-top: solid 1px #fff;
  border-bottom: solid 1px #366;
  text-align: center;
  position: fixed;
  top: 0px;
  height: auto;
  width: 100%;
}

div.navBar img {
  height: 30px;
}

div.navBackButton {
  float: left;
  font-size: 1.25em;
  padding: 0.25em;
}

div.navClearButton {
  float: right;
  font-size: 1.25em;
  padding: 0.25em;
}

div.navBarSpacer {
  height: auto;
  clear: both;
}

div.titleBar {
  background-color: #99c;
  background-image: url('images/navBarBG.jpg');
  background-size: contain;
  border-top: solid 1px #666;
  border-bottom: solid 1px #666;
}

div.titleBar table {
  width: 100%;
  border-collapse: collapse;
}

div.titleBar td {
  width: 33%;
  padding-top: 0px;
  padding-bottom: 0px;
  white-space: nowrap;
}

td.alignLeft {
  text-align: left;
  padding-left: 1em;
}

td.alignRight {
  text-align: right;
  padding-right: 1em;
}

div.titleBar img {
  height: 42px;
  width: auto;
}

div.listBox {
  //margin: 1em;
  background-color: white;
  border: solid 1px #999;
  //border-radius: 20px;
  color: #666;
}

div.listItem {
  border-top: solid 1px; grey;
  //min-height: 4em;
  //font-size: 1.25em;
  overflow: auto;
}

div.listItemDescription {
  display: block;
}

img.listItemSubitemButton {
  height: 20px;
  width: 20px;
  float: right;
  padding-top: 30px;
  padding-right: 20px;
}

img.listItemCheck {
  height: 20px;
  width: 20px;
  float: right;
  padding-right: 8px;
}

.itemTitle {
  font-weight: bold;
  text-decoration: underline;
}

h2 a:visited {
  color: white;
  text-shadow: 0px -1px 0px #444;
  text-decoration: none; // may remove
}

h2 a:link {
  color: white;
  text-shadow: 0px -1px 0px #444;
  text-decoration: none; // may remove
}

ul {
  list-style-type: none;
}

ul.quickOption {
  margin: 0px;
  padding: 0px;
}

ul.quickOption li {
  border: solid 1px lightgrey;
  padding: 0.75em;
  padding-left: 20px;
}

.listItemPopulated {
  background-color: lightBlue;
  background-image: url('images/listItemPopulatedBG.jpg');
  //background-image: url('images/navBarBG2.jpg');
  background-size: contain;
}

.selectedQuickOption {
  background-color: lightBlue;
  background-image: url('images/listItemPopulatedBG.jpg');
  //background-image: url('images/navBarBG2.jpg');
  background-size: contain;
}

input.listItemText {
  margin: 0px;
  height: 24pt;
  width: 80%;
  font-size: 1em;
  border: none;
  color: #666;
  padding-left: 20px;
}

input.listItemAmount {
  margin: 0px;
  height: 24pt;
  width: 40%;
  font-size: 1em;
  border: none;
  color: #666;
}

p.listBoxButton {
  text-align: center;
}

div.addPageInfo {
  text-align: center;
  color: #444;
  text-shadow: 0px 1px 0px #fff;
}

div.generateTipAmount {
  font-size: 36pt;
  text-align: center;
  color: green;
  margin: 0.25em;
  text-shadow: 0px 1px 0px #444;
}

div.generateTipPercentage {
  font-size: 20pt;
  text-align: center;
  color: green;
  margin: 0.5em;
  text-shadow: 0px 1px 0px #444;
}

div.timerCounter {
  font-family: "HelveticaNeue-Ultralight";
  font-size: 48pt;
  text-align: center;
  color: black;
  margin: 0.5em;
}

div.timerButtons {
  text-align: center;
  display: block;
  margin: 3em;
}

div.timerButton {
  display: inline;
  padding: 1em;
  margin: 1em;
  border: solid 1px;
  border-radius: 2000px;
  cursor: pointer;
}

.timerStart {
  color: green;
}

div.tabBar {
  background-color: black;
  background-image: url('images/tabBarBG.jpg');
  background-size: contain;
  color: white;
  text-align: center;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 50px;
  font-size: 1em;
}

div.tabBarSpacer {
  height: 50px;
}

div.tabBar table {
  width: 100%;
}

div.tabBar td {
  width: 20%;
}

div.tabBar img {
  height: 30px;
}

div.tabBarOther img {
  height: 30px;
}

div.tabBar td.selectedTab {
  background-image: url('images/tabBarSelectedBG.png');
  background-size: 100% 100%;
}

div.tabBar li {
  display: inline;
}

div.tabBar a:visited {
  color: grey;
  text-decoration: none;
}

div.tabBar a:link {
  color: grey;
  text-decoration: none;
}

div.tabBarOther {
  background-color: black;
  background-image: url('images/tabBarBG.jpg');
  background-size: contain;
  color: lightblue;
}

div.tabBarOther h4 {
  margin: 0px;
  padding: 0.5em;
}

div.tabBarOther td {
  text-align: center;
}

div.tabBarOther li {
  display: inline;
}

div.tabBarOther a:visited {
  color: grey;
}

div.tabBarOther a:link {
  color: grey;
}

div.freeVersionAds {
  background-color: black;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 50px;
  text-align: center;
}

div.freeVersionAdsSpacer {
  height: 50px;
}

div.backgroundMask {
  background-color: #000;
  opacity: 0.7;
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

div.loginWindow {
  position: absolute;
  top: 150px;
  left: 0px;
  right: 0px;
  margin-left:auto;
  margin-right:auto;
  width: 80%;
  text-align: center;
  padding: 0.5em;
  padding-bottom: 2em;
  visibility: hidden;
  background-image: url('images/alert_background.png');
  background-size: 100% 100%;
  font-size: 1em;
  color: white;
}

div.loginWindow p {
  margin: 0.5em;
}

div.loginWindow table {
  margin-left: auto;
  margin-right: auto;
  font-size: 1em;
}

div.settingsTable table {
  padding: 1em;
  margin-left: auto;
  margin-right: auto;
  font-size: 1em;
}

div.loginWindow a {
  text-decoration: underline;
  cursor: pointer;
}

img.validationLight {
  height: 20px;
  width: auto;
}

div.appVersion {
  text-align: center;
  //color: white;
  //text-shadow: 0px -1px 0px #444;
  color: #444;
  text-shadow: 0px 1px 0px #fff;
}

.notImplemented {
  color: red;
}