/***************************************************************************************
******* GLOBAL/COMMON STYLES
***************************************************************************************/
html, body, #beachScene, #horizon, #frame {min-height: 100%;}
body {
	background: #fff;
	color: #000;
	font: normal 13px/1 Arial, Helvetica, sans-serif;
}
a, a:link, a:visited {text-decoration: none;}
a:hover, a:focus, a:active {}
.right {
	display: block;
	float: right;
	margin: 0 0 1.3em 1.3em;
}
.left {
	display: block;
	float: left;
	margin: 0 1.3em 1.3em 0;
}
.centered {
	display: block;
	margin: 0 auto;
}
#frame {
	background: transparent url(/elements/images/global/frameBG.png) center top no-repeat;
	position: relative;
}
#container {
	margin: 0 auto;
	padding: 0 0 310px;
	position: relative;
	width: 990px;
}

/***************************************************************************************
******* HEADER AREA STYLES
***************************************************************************************/
#header {
	height: 115px;
	position: relative;
}
	#header a#logo {
		background: transparent url(/elements/images/global/logo.png) 0 0 no-repeat;
		display: block;
		height: 55px;
		left: 50%;
		margin: 0 0 0 -100px;
		position: absolute;
		text-indent: -99999em;
		top: 10px;
		width: 205px;
	}
	#header a#logo:hover {background-position: 0 -60px}
	#header ul.navigation {margin: 17px 0 0;}
	#header ul.first {
		float: left;
		margin-left: 35px;
	}
	#header ul.second {
		float: right;
		margin-right: 50px;
	}
		#header ul.navigation li {
			display: block;
			float: left;
			position: relative;
		}
			#header ul.navigation li a {
				color: #fff;
				display: block;
				float: left;
				font: bold 1em/34px Clarendon, "Clarendon LT", "Clarendon Pro", Georgia, serif;
				margin: 0 15px;
				text-transform: uppercase;
			}
			#header ul.navigation li a:hover {color: #ffcc00;}

/***************************************************************************************
******* CONTENT AREA STYLES
***************************************************************************************/
#middle {position: relative;}
	#primaryContent {
		background: transparent url(/elements/images/global/primaryContentHeader.gif) 0 0 no-repeat;
		float: right;
		margin: 0 24px 0 0;
		padding: 64px 0 0;
		width: 622px;
	}
		#primaryContentFrame {
			background: transparent url(/elements/images/global/primaryContentFrame.gif) 0 0 repeat-y;
			padding: 0 60px;
		}
		#primaryContentFoot {
			background: transparent url(/elements/images/global/primaryContentBottom.gif) left bottom no-repeat;
			height: 63px;
		}
	#secondaryContent {
		background: transparent url(/elements/images/global/secondaryContentBG.png) 0 0 no-repeat;
		left: 20px;
		position: absolute;
		top: 20px;
		width: 325px;
	}
		#secondaryContentBanner {
			margin: 47px 20px 10px 17px;
			height: 272px;
			overflow: hidden;
		}

/***************************************************************************************
******* BOTTOM TABLE STYLES
***************************************************************************************/
#table {
	background: transparent url(/elements/images/global/table.gif) center bottom no-repeat;
	bottom: -50px;
	height: 300px;
	position: absolute;
	width: 100%;
}
	#tableItems {
		height: 300px;
		margin: 0 auto;
		position: relative;
		width: 990px;
	}
		#tableItems li {
			display: block;
			position: absolute;
		}
		#tableItems li.flavors	{left: 0; top: 5px; width: 120px; height: 240px;}
		#tableItems li.beers	{left: 390px; top: -15px; width: 122px; height: 205px;}
		#tableItems li.menu		{left: 130px; top: 92px; width: 300px; height: 162px;}
		#tableItems li.kids		{left: 500px; top: 193px; width: 100px; height: 60px;}
		#tableItems li.enews	{left: 600px; top: 100px; width: 340px; height: 160px;}
		#tableItems li.greenbean{left: 550px; top: 200px; width: 93px; height: 50px;}
		#tableItems li.locations{left: 805px; top: 190px; width: 190px; height: 43px;}
			#tableItems li a {
				display: block;
				background: transparent url(/elements/images/global/tableItems-sprite2.png) 0 0 no-repeat;
				height: 100%;
				text-indent: -99999em;
			}
			#tableItems li.flavors a		{background-position: 0 0;}
			#tableItems li.flavors a:hover	{background-position: 0 -250px; width: 180px;}
			
			#tableItems li.beers a 			{background-position: -770px 0;}
			#tableItems li.beers a:hover 	{background-position: -900px 0; width: 170px;}
			
			#tableItems li.menu a			{background-position: -245px 0;}
			#tableItems li.menu a:hover		{background-position: -245px -169px; width: 300px;}
			
			#tableItems li.kids a			{background-position: -545px 0;}
			#tableItems li.kids a:hover		{background-position: -547px -66px; width: 207px;}
			
			#tableItems li.enews a			{background-position: -183px -343px;}
			#tableItems li.enews a:hover	{background-position: -525px -343px;}
			
			#tableItems li.greenbean a		{background-position: -545px -228px;}
			#tableItems li.greenbean a:hover{background-position: -545px -280px; width: 280px;}
			
			#tableItems li.locations a		{background-position: -545px -132px;}
			#tableItems li.locations a:hover{background-position: -545px -180px; height: 50px;}

/***************************************************************************************
******* FOOTER AREA STYLES
***************************************************************************************/
#footer {
	background: #000;
	bottom: -115px;
	left: 50%;
	margin: 0 0 0 -495px;
	padding: 20px 15px;
	position: absolute;
	width: 960px;
}
	#footer ul.social-media {float: right;}
		#footer ul.social-media li {margin: 0 0 0 5px;}
			#footer ul.social-media li a {
				height: 24px;
				line-height: 24px;
				width: 24px;
			}
				#footer ul.social-media li a img {vertical-align: top;}
	#footer ul#secondaryNavigation {float: left;}
		#footer ul li {
			color: #666;
			display: inline;
		}
	#footer p {
		clear: left;
		color: #938067;
		float: left;
		font-size: 11px;
		margin: 5px 0 0;
	}
	#footer a {
		color: #dbac5e;
		font-size: 11px;
	}
	#footer a:hover {text-decoration: underline;}