section, article, header, footer { display: block; margin: 0; padding: 0; }
body { margin: auto; max-width: 100%; margin: 0; padding: 0; }
body, input, textarea { font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif; }
a { color: blue; text-decoration: none; }
header img { width: 100%; }
header h1 { font-weight: normal; position: absolute; top: 12px; left: 40px; color: #fff; font-size: 21pt; text-shadow: 0px 1px 2px #000; }
.boxone { position: absolute; top: 290px; left: 40px; width: 200px; color: #000; }
@media (max-width: 400px) {
 header h1 { font-size: 16pt; }
 .boxone { top: 120px; left: 20px; }
}
header a { color:#fff; }
section { padding: 20px; }
#jug p { text-align: center; font-weight: bold; }
table { margin: auto; }
#index td { width: 140px; font-size: smaller }
#cans td img { width: 160px; }
#flow td img { width: 140px; }
#flow th { text-align: center; }
#flow td, #cans td { width: 140px; vertical-align: middle; font-weight: bold; }
footer { padding: 10px; height: 60px; color: #fff; background: #414149; background-image: linear-gradient(top, #616169, #414149); }
footer img { vertical-align: top; float:left; padding-right:8px; }
.button { background: #1982d1; font-size: 15px; padding: 4px; border: 0 none; border-radius: 5px; cursor: pointer; text-align: center; border: 1px solid #2e4459; color: #fff; font-weight: bold; opacity:.7; }
.button:hover { background: blue; }

ul { margin:0;}
ul { list-style: inside; padding-left: 1px; }
div.box {
	float: left;
	border-radius: 5px;
	background-color: green;
	border: 1px solid #2e4459;
	padding: 0px 5px 5px 5px;
opacity:.7;
	font-weight: bold;
}
div.box > h2:first-child {
	height: 18px;
	font-size: 15px;
	overflow: hidden;
	text-align: center;
	padding: 5px 0px 5px 0px;
	background-color: #006400;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	margin: 0px -5px 5px -5px; /* make fit (match padding above) */
}
div.box > div {
	height: 75%;
	padding: 5px;
	overflow: auto;
	font-size: 14px;
}