@charset "UTF-8";
/* CSS Document */

html, body { margin: 0; padding: 0; }
a { outline: none; }
body {
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
}

/* HEADER */
#header {
	width: 100%;
	background: #000000 url(images/bg-hopstile.png) repeat;
	height: 150px;
}

#header-bar {
	width: 100%;
	background: url(images/wood-panel_new.png) repeat-x;
	height: 45px;
}

#header-image {
	width: 940px;
	height: 150px;
	background: url(images/bg-header.png) no-repeat;
}

#header-image a {
	width: 940px;
	height: 150px;
	display: block;
	border: 0;
	text-indent: -9999px;
}

/* MAIN */
#main {
	margin-right: auto;
	margin-left: auto;
	width: 940px;
	margin-top: -195px;
}

/* -- MENU -- */
#menu {
	background: url(images/bg-menu.png) no-repeat;
	width: 940px;
	height: 45px;
	padding-right: 75px;
	padding-left: 75px;
	margin: 0;
}

#menu-list {
	padding: 0;
	margin: 0;
	height: 45px;
	width: 790px;
}

#menu-list li
{
	list-style: none;
	margin: 0;
	display: -moz-inline-stack;
	display: inline-block;
	zoom: 1;
	*display: inline;
	padding: 0;
}

#menu-list li a {
	margin: 0 0 0 9px;
	padding: 0;
	text-indent: -9999px;
}
	
#menu-about a {
	background: url(images/menu-about.png) top left no-repeat;
	height: 45px;
	width: 117px;
	display: block;
}

#menu-brews a {
	background: url(images/menu-brews.png) top left no-repeat;
	height: 45px;
	width: 141px;
	display: block;
}

#menu-shop a {
	background: url(images/menu-shop.png) top left no-repeat;
	height: 45px;
	width: 210px;
	display: block;
}

#menu-contact a {
	background: url(images/menu-contact.png) top left no-repeat;
	height: 45px;
	width: 107px;
	display: block;
}

#menu-blog a {
	background: url(images/menu-blog.png) top left no-repeat;
	height: 45px;
	width: 63px;
	display: block;
}


#menu-home a {
	background: url(images/menu-home.png) top left no-repeat;
	height: 45px;
	width: 69px;
	display: block;
}

#menu-about a:hover { background: url(images/menu-about_hov.png) top left no-repeat; }
#menu-brews a:hover { background: url(images/menu-brews_hov.png) top left no-repeat; }
#menu-shop a:hover { background:url(images/menu-shop_hov.png) top left no-repeat; }
#menu-contact a:hover { background: url(images/menu-contact_hov.png) top left no-repeat; }
#menu-home a:hover { background: url(images/menu-home_hov.png) top left no-repeat; }
#menu-blog a:hover { background: url(images/menu-blog_hov.png) top left no-repeat; }


/* -- CONTENT -- */
#content { padding-left: 80px; padding-right: 80px; }

/* - text formatting - */
h1 {
	padding: 10px 0 0 0;
	margin: 0 0 5px 0;
	border-bottom: solid 2px;
	text-transform: uppercase;
	font-size: 1.75em;
}

h2 {
	padding: 5px 0 0 0;
	margin: 0;
	color: #931b1f;
	text-transform: uppercase;
	font-size: 1.25em;
}

.p-center { text-align: center; }

p { 
	padding: 0; 
	margin: 10px 0 5px 0; 
	text-align: justify;
}

a, a:hover, a:active, a:visited {
	color: #000000;
	font-weight: bold;
	text-decoration: underline;
}

/* -- ABOUT PAGE -- */
.brew-listing {
	margin:10px 0 15px 0;
	padding: 10px;
	background: #fefcab;
	border: thin solid #000;

	}

.brew-image {
	margin: 0;
	padding: 0;
	float: left;
	width: 270px;
}

.brew-image img {
	background: #000;
	margin: 0;
	padding: 3px;
}

.brew-image p {
	text-align: center;
	font-size: .75em;
	font-style: italic;
}

.brew-info {
	padding: 0;
	margin: 0;
	width: 475px;
	float: right;
}

/* -- CONTACT PAGE -- */
/* - contact box class - */
.contact-box {
	margin: 10px 0 20px 0;
	padding: 5px 10px;
	background: #fefcab;
	border: thin solid #000;

}

#link-container { margin: 0 auto; width: 700px; text-align: center;}
#link-container ul { margin: 0; padding: 0; }
#link-list li a { margin: 0; padding: 0; text-indent: -9999px; }
#link-list li
{
	list-style: none;
	margin: 0 10px;
	display: -moz-inline-stack;
	display: inline-block;
	zoom: 1;
	*display: inline;
	padding: 0;
}
#link-email a {
	background: url(images/img-contactemail.png) top left no-repeat;
	height: 102px;
	width: 200px;
	display: block;
}
#link-facebook a {
	background: url(images/img-contactfacebook.png) top left no-repeat;
	height: 102px;
	width: 200px;
	display: block;
}
#link-twitter a {
	background: url(images/img-contacttwitter.png) top left no-repeat;
	height: 102px;
	width: 200px;
	display: block;
}

/* - address box - */
#address {
	width: 360px;
	margin: 10px 0 0 35px;
	padding: 0;
	float: left;
}

#address p {
	margin: 0;
	padding: 0;
	font-size: 1.15em;
}

#address a, #address a:hover, #address a:active, #address a:visited{
	font-size: .75em;
	text-transform: uppercase;
}
	
#map {
	width: 300px;
	padding: 0;
	margin: 10px;
	float: left;
	border: 2px solid #000;
}

/* -- TWITTER FEED -- */
#twitter_div {
	background: #FFF;
	width: 300px;
	padding: 0;
	margin: 0 0 0 7px;
	float: right;
}

#twitter_update_list {
	width: 275px;
	padding: 0;
	margin: 0 0 0 25px;
}

#twitter_div li {
	list-style: none;
	background: #fefcab;
	border: solid thin #000;
	margin-bottom: 5px;
	padding: 10px;
	font-size: .8em;
	text-align: right;
}

.tweet {
	display: block;
	padding: 0;
	margin-bottom: 10px;
	text-align: center;

	}
	
#twitter_head {
	background: url(images/bg-twitter.png) top left no-repeat;
	width: 300px;
	height: 35px;
	margin: 0 0 0 -5px;
	padding: 0;
	position: relative;
	top: 8px;
	}
	
#twitter_head p {
	margin: 0px 0 0 65px;
	padding-top: 3px;
	font-size: 1.25em;
	font-weight: bold;
}
	
/* -- IMAGES -- */
.about-image-right {
	background: #f9eb70;
	margin: 5px 0 0 10px;
	padding: 5px;
	float: right;
	border: thin solid #000;
}

.about-image-left {
	background: #f9eb70;
	margin: 5px 10px 0 0;
	padding: 5px;
	float: left;
	border: thin solid #000;
}

.clear { clear: both; }

/* -- FOOTER -- */
#footer {
	background: url(images/bg-footer.png) top left no-repeat;
	padding-top: 50px;
	clear: both;
}

#footer p {
	text-align: center;
	font-size: .75em;
}