* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
::-moz-selection {background: rgba(0,181,79,0.3);text-shadow: none;}
::selection {background: rgba(0,181,79,0.3);text-shadow: none;}
body {-webkit-tap-highlight-color: rgba(0,181,79,0.3);overflow-y: scroll;}
hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0;}
audio,canvas,iframe,img,svg,video {vertical-align: middle;}
fieldset {border: 0;margin: 0;padding: 0;}
textarea {resize: vertical;}
figure {position: relative;margin: 1em 0.5em; text-align: center;}
figure img,figure object,figure embed,figure video {max-width: 100%;}
img { border: 0; -ms-interpolation-mode: bicubic;max-width: 100%;}
a{outline:none;}

body{font: 18px/30px 'Merriweather', serif;color: #222;padding-top: 50px;}/*padding for fixed header*/
.wrapper {width: 90%;margin: 0 5%;}
.colPrim {color: #00b54f;}
h1,h2,h3,nav{font-family: 'Mystery Quest', cursive;font-weight: 400;}
h1{font-size: 1.5em;line-height: 2em;margin: 0;letter-spacing: 2px;}

.header-container {
  background-color: #222;
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
  top: 0;
  min-height: 50px;
  margin-bottom: 20px;
  border-bottom: 1px solid #080808;  
  color: #fff;
}
.left-col {width: 100%;text-align: center;}
.right-col {
	float: right;
	width: 135px;
	height: 50px;
	position: relative;
	display: none;
}
.right-col p {
	margin: 0;
	position: absolute;
	bottom: 3px;
	right: 0;
	font: 15px/20px 'Bad Script', cursive;
}
nav a {color: #FFF;text-decoration: none;font-size: 35px;line-height: 50px;font-style: italic;}
nav a:visited {color: #FFF;}
nav a:hover {color: #00b54f;}

.button-group:after {content: '';display: block;clear: both;}
.button-group .button {
	float: left;
	margin-left: 0;
	margin-right: 1px;
	display: inline-block;
	padding: 0.5em 1.0em;
	background: #EEE;
	border: none;
	border-radius: 7px;
	background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
	color: #222;
	font-family: 'Bad Script';
	font-size: 16px;
	text-shadow: 0 1px white;
	cursor: pointer;
	width: 115px;
}
.button-group .button:hover {background-color: #8CF;text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);color: #222;}
.button-group .button:active,.button-group .button.is-checked {background-color: #28F;}
.button-group .button.is-checked {color: white;text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);}
.button-group .button:active {box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);}

.brewList {
  position: relative;
  float: left;
  margin: 5px;
  padding: 10px;
  background: #888;
  color: #222;
  width: 97%;
  height: 140px;  
}
.brewList > * {margin: 0;padding: 0;}
.brewList a {text-decoration: none;}
.brewList h5,p.beerStyle,p.brewDate {margin: 0.5em;position:absolute;font-weight: 400;}
.brewList h5 {top:0;left:0;font-size: 1.2em;}
p.beerStyle {bottom:0;left:0;}
p.brewDate {bottom:0;right:0;}
.brewList.bitter {background-color:#a54022;}
.brewList.brown-ale {background-color:#9a3320;}
.brewList.ipa {background-color:#e78625;}
.brewList.lager {background-color:#f9f9d3;}
.brewList.pale-ale {background-color:#f8a71a;}
.brewList.pilsner {background-color:#febe43;}
.brewList.porter {background-color:#44120b;color: #eee;}
.brewList.stout {background-color:#1f0b0d;color: #eee;}


article {margin: 1em 0;}
table {
	border-left: 1px solid #dddddd;
	border-right: 1px solid #dddddd;
	border-bottom: 1px solid #dddddd;
	margin-bottom: 12px;
	background-color: transparent;
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
}
table tr:nth-child(odd) {background-color: #ffffff;}
table tr:nth-child(even) {background-color: #f1f1f1;}
table>tbody>tr>td {
	padding: 8px;
	line-height: 1.42857143;
	vertical-align: top;
	border-top: 1px solid #ddd;
}
.hdr {text-align: left;font-size: 0.8em;}
table caption {text-align: left;font-weight: bold;}
table caption {margin-left:10px}
table.figures>tbody>tr>td.hdr,table.method>tbody>tr>td.hdr{width: 100px;}

.articleNav a {
	color: #ccc;
	text-decoration: none;
	font-size: 35px;
	line-height: 50px;
	width: 49%;
	display: inline-block;
	text-align: center;
	font-family: 'Rock Salt', cursive;
}
.articleNav a:visited {color: #ccc;}
.articleNav a:hover {color: #00b54f;}
.darnSmall {font-size: 0.5em;}

.footer-container footer {padding: 20px 0;text-align: right;font: 18px/30px 'Bad Script', cursive;}

@media screen and (min-width: 26.875em) {
	.left-col {float: left;width: 230px;text-align: left;}
	.right-col {display: inherit;}
	table.figures>tbody>tr>td.hdr,table.method>tbody>tr>td.hdr{width: 190px;}	
}
@media screen and (min-width: 31.875em) {
	body{padding-top: 60px;}/*padding for fixed header*/
	.right-col {width: 155px;height: 60px;}
	.right-col p {font: 18px/30px 'Bad Script', cursive;}
	nav a {font-size: 40px;line-height: 60px;}
}
@media screen and (min-width: 35.875em) {
	.brewList {width: 48%;}
}
/* @media screen and (min-width: 42.5em) {} */
@media screen and (min-width: 53.125em) {
	.brewList {width: 32%;}
	table.figures,table.method {float: left;width: 50%;}
	table.ingredients {width: 100%;float: left}	
}
/* @media screen and (min-width: 62.875em) {} */
@media screen and (min-width: 70.625em) {
	.brewList {width: 24%;}
}
@media only screen and (min-width: 79.250em) {
	.wrapper {width: 1152px;/* 1140px - 10% for margins */margin: 0 auto;}
}
/* Helper classes */
.hidden {display: none !important;visibility: hidden;}
.visuallyhidden {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip: auto;height: auto;margin: 0;overflow: visible;position: static;width: auto;}
.invisible {visibility: hidden;}
.clearfix:before, .clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
/* Print styles */
@media print {
	*,*:before,*:after {background: transparent !important;color: #000 !important;box-shadow: none !important;text-shadow: none !important;}
	a,a:visited {text-decoration: underline;}
	a[href]:after {content: " (" attr(href) ")";}
	abbr[title]:after {content: " (" attr(title) ")";}
	a[href^="#"]:after,a[href^="javascript:"]:after {content: "";}
	pre,blockquote {border: 1px solid #999;page-break-inside: avoid;}
	thead {display: table-header-group;}
	tr,img {page-break-inside: avoid;}
	img {max-width: 100% !important;}
	p,h2,h3 {orphans: 3;widows: 3;}
	h2,h3 {page-break-after: avoid;}
}