body
{
	padding: 10px;
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
}

/* product icons & help icons are sized inline (20x20); the global max-width:100%
   above squashes their width when the table column is narrow while their inline
   height stays fixed, breaking the square aspect ratio. opt them out. */
.genericTable img,
.gridlessTable img {
	max-width: none;
}

input[type="text"], input:not([type]), textarea {
	font-size: 16px; /* prevents iOS Safari from auto-zooming on focus */
}

.indentedCell {
	margin-left: 25px;
}

.spaceOnTop {
	margin-top: 25px;
}

.spaceOnBottom {
	margin-bottom: 25px;
}

.genericTable {
  border: 2px solid black;
  padding: 0px;
  border-spacing: 0px;
  border-collapse: collapse;
  background: #eaffff;
  max-width: 100%;
}

.genericTable td {
   border: 1px solid #BBBBBB;
   padding: 3px;
   spacing: 0px;
   vertical-align: top;
}

.gridlessTable {
  border: 2px solid black;
  padding: 0px;
  border-spacing: 0px;
  border-collapse: collapse;
	background: #ffffcc;
	max-width: 100%;
}

.gridlessTable td, th {
	border:none;
   padding: 3px;
   spacing: 0px;
   vertical-align: top;
}

.innerTable {
  border: 0px none;
  padding: 0px;
  border-spacing: 0px;
  border-collapse: collapse;
  width: 100%;
}

.innerTable td {
   border: 0px none;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 0px;
   spacing: 0px;
   vertical-align: top;
}

.innerTable td:nth-child(1) {
   width: 100%
}

.subDescription {
	font-size: smaller;
}

.noDiscount {
  color: black;
  font-weight: normal;
}

.yesDiscount {
  color: green;
  font-weight: bold;
}

.soldOut {
  color: grey;
  font-weight: bold;
}

.unitsAvailable {
  color: green;
}

.inputOkColor {
	box-sizing: border-box;
	width: 4em;
  color: green;
}

.inputNeutralColor {
	box-sizing: border-box;
	width: 4em;
  color: black;
}

.inputErrorColor {
	box-sizing: border-box;
	width: 4em;
  color: red;
}

.errorColor {
  color: red;
}

.actionItemNotYetSuccessful {
  color: orange;
  font-weight: bold;
}

.actionItemSuccessful {
  color: green;
  font-weight: bold;
}

.actionItemBusy {
  color: grey;
  font-weight: normal;
}

@media (max-width: 600px) {
	body {
		padding: 4px;
		font-size: 14px;
	}

	h1 {
		font-size: 1.4em;
		margin: 0.4em 0;
	}

	.genericTable, .gridlessTable {
		width: 100%;
		font-size: 13px;
	}

	.genericTable td, .gridlessTable td, .gridlessTable th {
		padding: 2px;
	}

	.indentedCell {
		margin-left: 10px;
	}

	.subDescription {
		font-size: 11px;
	}

	.inputOkColor, .inputNeutralColor, .inputErrorColor {
		width: 3.5em;
	}

	.gridlessTable input[type="text"],
	.gridlessTable input:not([type]) {
		box-sizing: border-box;
		width: 100%;
		max-width: 20em;
	}

	/* keep state (2-letter) and zip (5-digit) compact even on mobile */
	.gridlessTable input[maxlength="2"],
	.gridlessTable input[maxlength="5"] {
		width: auto;
		max-width: none;
	}
}