/* GLOBAL TAG DEFINITIONS */
html,body { width:100%; height:100% }
body,div,dl,dt,dd,ul,ol,li,hr,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0 }
table { border-collapse: collapse; border-spacing: 0 }
fieldset,img,hr { border: none }
address,caption,cite,code,dfn,em,th,var { font-style: normal; font-weight: normal }
caption,th { text-align: left }
ul { list-style: disc }
ol { list-style: decimal }
h1 { font-size: 20px; font-weight: normal; color: black; }
h2 { font-size: 16px; font-weight: normal; color: black; }
h3 { font-size: 14px; font-weight: bold; color: black; }
h4 { font-size: 12px; font-weight: bold; color: black; }
h5 { font-size: 12px; font-weight: normal }
h6 { font-size: 11px; font-weight: bold }
q:before,q:after { content: "" }
abbr,acronym { border: none }
hr { border-bottom: 1px solid #000; height: 1px; }

/* @TAGS
/* ---------------------------------------- */
body {
	text-align: center;
	font: 10px verdana, arial, sans-serif;
	color: #efefef;
	background-color: #202020;

}

img {
	display: block;
}

p {
	margin-bottom: 10px;
}

a {
	color: #888888;
	text-decoration: none;
	font-weight: bold;
	outline: none;
}
a:hover, a.active {
	color: #36cdff;
}

h1 {
	color: white;
	font: bold italic 24px georgia, serif;
	border-left: 1px dotted #ffffff;
	margin: 0;
	padding: 0;
	padding-top: 3px;
	padding-left: 20px;
	padding-bottom: 5px;
	margin-bottom: 10px;
}
h1.image {
	border: none;
	border-left: 1px dotted #ffffff;
	padding: 0;
	padding-top: 3px;
	padding-left: 20px;
}
h2 {
	color: #bbbbbb;
	font: bold 14px georgia, serif;
	margin: 0;
	padding: 0;
}
h2 a {
	color: #bbbbbb;
	font: bold 14px georgia, serif;
	margin: 0;
	padding: 0;
}
h3 {
	color: #666666;
	font: 12px georgia, serif;
	margin: 0;
	padding: 0;
	margin-bottom: 5px;
}
h3 a {
	color: #666666;
	font: 12px georgia, serif;
	margin: 0;
	padding: 0;
	margin-bottom: 5px;
}

/* @PAGELAYOUT
/* ---------------------------------------- */
div#wrapper {
	width: 950px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

div#bodyContent {
	padding-bottom: 20px;
	margin-top: 0px;
}

/* @HEADER
/* ---------------------------------------- */
div#header {
	position: relative;
	margin-bottom: 10px;
}
	div#header div#logo {
		border-bottom: 1px solid black;
	}
	div#header div#search {
		float: right;
		margin-right: 0px;
		vertical-align: top;
	}
		div#header div#search label {
			display: inline;
			vertical-align: top;
		}
		div#header div#search label img {
			display: inline;
			vertical-align: top;
			margin-top: 1px;
		}
		div#header div#search input.text {
			width: 100px;
			font-size: 10px;
			padding: 2px;
			padding-top: 3px;
			padding-left: 5px;
			color: white;
			border: none;
			vertical-align: top;
			background-color: black;
		}
		div#header div#search input.image {
			margin-top: 4px;
			vertical-align: top;
		}
	div#header div#rss-link {
		float: left;
		margin-left: 10px;
		padding-top: 3px;
	}

/* @PRIMARY NAV
/* ---------------------------------------- */
div#primaryNav {
	position: relative;
	margin-top: 5px;
	background-color: black;
	border-top: 1px dotted #666666;
	border-bottom: 1px dotted #666666;
}
	div#primaryNav ul {
		float: left;
		margin: 0;
		padding: 0;
		list-style: none;
		padding-left: 10px;
	}
	div#primaryNav ul li {
		display: block;
		float: left;
		margin-right: 10px;
	}
	div#primaryNav ul li a {
		display: block;
		position: relative;
		padding: 3px 10px;
		outline: none;
		overflow: hidden;
		text-decoration: none;
		color: white;
		text-transform: lowercase;
	}
	div#primaryNav ul li a:hover, div#primaryNav ul li a.active {
		background-color: #36cdff;
	}

/* @SIDEBAR
/* ---------------------------------------- */
div#sidebar {
	float: right;
	width: 150px;
}
	div#sidebar h1.image {
		border: none;
		padding-left: 0;
		margin-left: 0;
	}
	div#sidebar h3 {
		margin-bottom: 10px;
	}

div#featured {
	float: left;
	width: 782px;
	margin-right: 15px;
}
	div#featured div.beerImage {
		float: left;
		margin-right: 15px;
		width: 352px;
		border: 5px solid #666666;
	}
	div#featured div.beerImage img {
		border: 1px solid #2f2000;
	}
	div#featured div.beerInfo {
		float: left;
		width: 405px;
	}
		div#featured div.beerInfo div.title {
			margin-bottom: 10px;
			padding-bottom: 5px;
			border-bottom: 1px dotted #5e5e5e;
		}
		div#featured div.beerInfo div.beerName {
		}
		div#featured div.beerInfo div.breweryName {
		}
		div#featured div.beerInfo div#notes {
			padding-bottom: 5px;
		}
			div#featured div.beerInfo div#notes p {
				margin-bottom: 10px;
			}
		div#featured div.beerInfo div.tweet {
			padding-bottom: 5px;
		}
			div#featured div.beerInfo div.tweet p {
				margin-bottom: 10px;
			}
		div#featured div.beerInfo h2, div#featured div.beerInfo h2 a {
			font-size: 30px;
		}
		div#featured div.beerInfo h3 a {
			font-size: 16px;
		}

/* @PAGE ELEMENTS
/* ---------------------------------------- */
div.page-header {
}
	div.page-header div.title {
		float: left;
		width: 60%;
	}
	div.page-header div.navigation {
		float: right;
		text-align: right;
		width: 40%;
		padding-top: 8px;
	}
		div.page-header div.navigation label {
			display: inline;
			vertical-align: middle;
			padding-right: 5px;
		}
		div.page-header div.navigation select {
			display: inline;
			vertical-align: middle;
		}

/* @BEER FULL VIEW
/* ---------------------------------------- */
div#beer {
}
	div#beer div.beerImage {
		float: left;
		margin-right: 15px;
		width: 502px;
		border: 5px solid #666666;
		margin-bottom: 5px;
	}
	div#beer div.beerImage img {
		border: 1px solid #2f2000;
	}
	div#beer div.beerInfo {
		float: left;
		width: 422px;
	}
		div#beer div.beerInfo div.title {
			margin-bottom: 10px;
			padding-bottom: 5px;
			border-bottom: 1px dotted #5e5e5e;
		}
		div#beer div.beerInfo div.beerName {
		}
		div#beer div.beerInfo div.breweryName {
		}
		div#beer div.beerInfo div#notes {
			padding-bottom: 5px;
		}
			div#beer div.beerInfo div#notes p {
				margin-bottom: 10px;
			}
		div#beer div.beerInfo h2, div#beer div.beerInfo h2 a {
			font-size: 30px;
		}
		div#beer div.beerInfo h3 a {
			font-size: 16px;
		}

/* @GENERAL
/* ---------------------------------------- */
div.bodySection {
	padding-bottom: 20px;
	margin-bottom: 20px;
	/* background: url(/design/plain_site/images/bg_section.gif) right bottom no-repeat; */
	border-bottom: 3px solid #2e2e2e;
}

div.row {
	margin-bottom: 10px;
}

div.stats {
	margin-bottom: 15px;
}
	div.stats p {
		margin-bottom: 0;
	}

div.beer-thumb {
	width: 182px;
	float: left;
	padding-right: 10px;
}
	div.beer-thumb div.body div.beerInfo {
		float: left;
		width: 162px;
	}
	div.beer-thumb div.body div.links {
		float: right;
		width: 20px;
	}

div.beerImage {
	width: 172px;
	border: 5px solid #666666;
	margin-bottom: 5px;
}
	div.beerImage img {
		border: 1px solid #2f2000;
	}
	div.beerImage:hover {
		border: 5px solid #999999;
	}

div.beerInfo p {
	margin-bottom: 0;
}
	div.beerInfo p.label {
		margin-bottom: 5px;
	}
div.beerInfo form.formComments {
	margin-bottom: 15px;
}

div.copy {
	font: 14px verdana;
	border: 1px solid #666666;
	background-color: #333333;
	color: #cccccc;
	padding: 10px 10px 0 10px;
	margin-bottom: 10px;
}


/* @SEARCH
/* ---------------------------------------- */
div.searchResult {
	width: 100%;
	float: none;
	padding: 0;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #333333;
}
	div.searchResult h2 {
		margin-bottom: 10px;
	}
	div.searchResult div.beerImage {
		float: left;
		width: 77px;
		border-width: 2px;
		margin-right: 10px;
		margin-bottom: 0;
	}
	div.searchResult div.beerInfo {
		float: left;
		width: 500px;
	}
	div.searchResult.last {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	div.searchResult div.beer-thumb {
		width: 81px;
		float: left;
		padding-right: 10px;
	}
		div.searchResult div.beer-thumb div.beerImage {
			width: 77px;
			border-width: 2px;
			margin-bottom: 0;
		}

div.pagenavigator {
	margin-top: 10px;
}


/* @COMMENTS
/* ---------------------------------------- */
div#comments {
	margin-bottom: 10px;
}
	div#comments p {
		margin-bottom: 10px;
	}
div.comment {
	margin-bottom: 10px;
	font-size: 10px;
	padding: 5px;
	border: 1px solid #333333;
	background-color: #111111;
	color: #888888;
}
	div.comment div.headline {
		font-size: 10px;
		font-weight: bold;
		color: #aaaaaa;
	}
	div.comment div.name {
		float: left;
		width: 45%;
	}
	div.comment div.date {
		float: right;
		width: 45%;
		text-align: right;
	}

/* @IN-PAGE NAV LISTS
/* ---------------------------------------- */
div.bodyNav {
}
	div.bodyNav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	div.bodyNav ul li {
		margin: 0;
		padding: 0;
		text-transform: uppercase;
		margin-bottom: 3px;
	}
	div.bodyNav ul li a {
		display: block;
		padding-left: 10px;
	}
	div.bodyNav ul li a.active {
		background: url(/design/plain_site/images/bullet.gif) left 2px no-repeat;
	}
	div.bodyNav ul li a:hover {
		background: url(/design/plain_site/images/bullet.gif) left 2px no-repeat;
	}

/* @FORMS
/* ---------------------------------------- */
label {
	display: block;
	font-weight: bold;
	margin-bottom: 2px;
}
input {
	font: 10px verdana, arial, sans-serif;
}
	input.text {
		padding: 1px;
		font: 10px verdana, sans-serif;
		background-color: #888888;
		border: 1px solid #aeaeae;
	}
	input.medium {
		width: 200px;
	}
	input.large {
		width: 300px;
	}
	input.button {
		/* color: #e0d9c9; */
		color: #efefef;
		font-weight: bold;
		/* background-color: #401009; */
		background-color: #0b7091;
		border: 1px solid #36cdff;
		padding: 1px;
		text-transform: uppercase;
	}
textarea {
	padding: 1px;
	font: 10px verdana, sans-serif;
	background-color: #888888;
	border: 1px solid #aeaeae;
}
	textarea.large {
		width: 500px;
		height: 50px;
	}
	textarea.medium {
		width: 420px;
		height: 50px;
	}
	textarea.small {
		width: 375px;
		height: 50px;
	}

div.formRow {
	margin-bottom: 5px;
}
div.button {
	padding-top: 5px;
}
div.formField {
	float: left;
}	
div.padRight {
	margin-right: 10px;
}

/* @TWITTER
/* ---------------------------------------- */
div.twitter-feed {
	font: 10px verdana;
	color: #cccccc;
	margin-bottom: 10px;
}
	div.twitter-feed div.last {
		border: none;
		margin: 0;
		padding: 0;
	}
	div.twitter-feed span.timespan {
		color: #555555;
	}
div.tweet {
	border-bottom: 1px dotted #666666;
	margin-bottom: 10px;
	padding-bottom: 10px;
}
	div.tweet p {
		margin: 0;
	}

div.loader img {
	width: 43px;
	margin-top: 20px;
}

/* @WARNING
/* ---------------------------------------- */
div.warning {
	border: 2px solid #cf0038;
	padding: 10px;
	color: #cf0038;
	margin-bottom: 18px;
}
	div.warning h2 {
		color: black;
		font-weight: bold;
		font-size: 16px;
	}
	div.warning.header {
		margin-top: 4px;
		margin-bottom: 0;
	}
	div.warning p {
		margin-bottom: 10px;
		font-weight: bold;
	}
	div.warning a,
	div.warning a:hover {
		background: 0;
		padding: 0;
	}
		div.warning a.button {
			display: block;
			float: right;
			outline: none;
		}
	div.warning img.button {
		display: inline;
		vertical-align: middle;
	}

	div.warning ul {
		list-style: disc inside;
		margin-top: 5px;
	}
		div.warning ul li {
			margin-bottom: 3px;
			padding-left: 10px;
		}

div#footer {
	font-size: 10px;
	text-transform: uppercase;
	border-top: 1px solid #2e2e2e;
	margin-top: 10px;
	padding-top: 10px;
	padding-bottom: 20px;
}

div.column {
	float: left;
	width: 300px;
	margin-right: 25px;
}
div.last {
	margin-right: 0;
	padding-right: 0;
}

.clear:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clear {display: inline-block;}

/* Hides from IE-mac \*/
* html .clear {height: 1%;}
.clear {display: block;}
/* End hide from IE-mac */
