@charset "utf-8";

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
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;
}

/*******************************************
	Fonts 
*******************************************/
@font-face {
    font-family: 'oswaldbold';
    src: url('fonts/oswald-bold-webfont.eot');
    src: url('fonts/oswald-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/oswald-bold-webfont.woff') format('woff'),
         url('fonts/oswald-bold-webfont.ttf') format('truetype'),
         url('fonts/oswald-bold-webfont.svg#oswaldbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'oswaldlight';
    src: url('fonts/oswald-light-webfont.eot');
    src: url('fonts/oswald-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/oswald-light-webfont.woff') format('woff'),
         url('fonts/oswald-light-webfont.ttf') format('truetype'),
         url('fonts/oswald-light-webfont.svg#oswaldlight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'oswaldbook';
    src: url('fonts/oswald-regular-webfont.eot');
    src: url('fonts/oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/oswald-regular-webfont.woff') format('woff'),
         url('fonts/oswald-regular-webfont.ttf') format('truetype'),
         url('fonts/oswald-regular-webfont.svg#oswaldbook') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*******************************************
	Body 
*******************************************/
html, body {
	height: 100% !important;
}
body {
	font: 12px Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	background-image: url(images/background.jpg);
	background-repeat: repeat;
	color: #3c3c3c;
}

/*******************************************
	Element/Tag Selectors 
*******************************************/
a img {
	border: none;
}
h1, h2, h3, h4, h5, h6 {
	padding: 0;
}
h1 {
	font-family: 'oswaldbold';
	font-size: 12px;
	color: #2eaeff;
	text-transform: uppercase;
}
h2 {
	font-family: 'oswaldbook';
	font-size: 16px;
	color: #101010;
}
h3 {
	font-family: 'oswaldbook';
	font-size: 12px;
	color: #101010;
}
p {
	padding: 6px 0;
	line-height: 18px;
}
strong {
	font-weight: bold;
}
em {
	font-style: italic;
}
.clear {
	clear: both;
}

/*******************************************
	Hyperlinks 
*******************************************/
a:link {
	color: #51a7dd;
	text-decoration: none;
}
a:visited {
	color: #51a7dd;
	text-decoration: none;
}
a:hover, a:active, a:focus { 
	text-decoration: underline;
}

/*******************************************
	Containers 
*******************************************/
.super-container { /* Used to contain header, content and footer while keeping full width for header and footer transparencies */
	min-height:100%;
	position:relative;
}
.container {
	width: 960px;
	margin: 0 auto;
}

/*******************************************
	Header 
*******************************************/
header {
	height: 142px;
	background-image: url(images/header-background.png);
	background-repeat: repeat;
}
.header-container {
	width: 960px;
	left: 50%;
	margin-left: -480px;
	position: relative;
}
.header-phone-number {
	color: #fff;
	font-family: 'oswaldbold';
	font-size: 14px;
	position: absolute;
	top: 14px;
	right: 1px;;
}
.header-phone-number a {
	color: #fff;
	text-decoration: none;
}
.header-phone-number span {
	font-family: 'oswaldbook';
	font-size: 11px;
}
.header-container .logo {
	position: absolute;
	top: 32px;
	left: 435px;
}

/*******************************************
	Navigation 
*******************************************/
ul.nav {
	list-style: none;
	width:419px;
	height: 43px;
	background-image: url(images/menu-background.png);
	background-repeat: no-repeat;
	position: absolute;
}
ul.nav li {
	float: left;
}
ul.nav a, ul.nav a:visited {
	float: left;
	display: block;
	height: 43px;
	font-family: 'oswaldbook';
	font-size: 18px;
	color: #b6b6b6;
	text-decoration: none;
	line-height: 43px;
	text-transform: uppercase;
}
ul.first-nav li a {
	padding: 0 16px;
}
ul.first-nav {
	top: 55px;
	left: 0;
}
ul.second-nav {
	top: 55px;
	right: 0;
}
ul.second-nav li a {
	padding: 0 16px;
}
ul.nav a:hover, 
ul.nav a:active, 
ul.nav a:focus, 
ul.nav a.selected { 
	color: #FFF;
}


/*******************************************
	Main Content
*******************************************/
.content {
	margin: 0 auto;
	padding: 36px 0;
	padding-bottom: 81px; /* Height of the footer */
	width: 840px;
	padding-left: 60px;
	padding-right: 60px;
}

/*******************************************
	Boxes
*******************************************/

/* Box Defaults
------------------------------------------*/
section {
	background-color: #e7e7e7;
}
section.large-box {
	margin: 0 11px 22px 11px;
}
section.large-box .info-box {}
section.large-box .info-box .info-heading {
	padding: 10px 45px;
	background-color: #f9f9f9;
}
section.large-box .info-box .info-content {
	padding: 15px 45px 25px 45px;
}

section.small-box {
	float: left;
	width: 258px;
	margin: 0 11px 22px 11px;
}
section.small-box .image-box {
	padding: 10px;
	background-color: #e7e7e7;
	border-bottom: 1px solid #bbbbbb;
}
section.small-box .info-box {
	background-color: #f3f3f3;
	border-top: 1px solid #c6c6c6;
	padding: 5px 10px;
}
section.small-box .info-box p {
	line-height: 12px;
	font-size: 10px;
}

.feature-list-column {
	float: left;
	width: 255px; /* Set width to 242px to enable three columns.  Note that these widths differ from design */
	padding: 5px 0;
}
.info-box ol, 
.info-box ul, 
.info-box dl {
	padding: 6px 0;
}
.info-box ol li, 
.info-box ul li, 
.info-box dl dt, 
.info-box dl dd {
	line-height: 18px;
}
.info-box dl dd {
	text-indent: 15px;
}

/* Home Boxes
------------------------------------------*/
.content-home {
	width: 672px !important;
	padding-left: 144px !important;
	padding-right: 144px !important;
}
.content-home section.large-box .image-box {
	float: left;
	width: 376px;
	height: 255px;
	background-color: #cecece;
	border-right: 1px solid #b7b7b7;
	padding: 12px;
}
.content-home section.large-box .info-box {
	float: left;
	width: 246px;
	height: 274px; /* Height of .image-box containing image + vertical padding */
	border-left: 1px solid #cccccc;
	position: relative;
}
.content-home section.large-box .info-box .established {
	position: absolute;
	bottom: -22px;
	right: -21px;
}
.content-home section.large-box .info-box .info-heading {
	padding: 7px 15px;
}
.content-home section.large-box .info-box .info-content {
	padding: 0 15px;
}
.content-home section.small-box {
	width: 202px;
}

/* Specific Page Small Box Info Heights
	-----
	For any new page that you want to create a consistant 
	small box height, create a new class:
		.content-PAGE-NAME
	and set a height to the nested section.small-box .info-box
	like seen below.  Don't forget to add the new class to 
	the pages article tag.
------------------------------------------*/
.content-beer-portion section.small-box .info-box {
	height: 140px; /* Set consistant height for small boxes */
}

/*******************************************
	Footer 
*******************************************/
footer {
	height: 81px;
	padding: 0;
	position: absolute;
	bottom: 0;
	width: 100%;
	background-image: url(images/header-background.png);
	background-repeat: repeat;
	clear: both; 
}
.footer-container {
	width: 816px;
	margin: 0 auto;
}
footer address {
	font-family: 'oswaldbook';
	font-size: 12px;
	padding: 12px 0 3px 2px;
	color: #fefefe;
}
footer address span {
	margin-right: 13px;
}
footer p.copyright {
	font-size: 10px;
	line-height: 10px;
	color: #fefefe;
}