/* CSS DOCUMENT */
* 	{ margin: 0; padding: 0;}
html { min-height: 100%; margin-bottom: 1px; }
img, a img	{ border: 0; }

body 	{ font-size: 14px; font-family: arial, helvetica, sans-serif; text-align: center; color: #ccc; background: #222 url(../images/bg.jpg) repeat-x; margin: 0 0 50px;}
#home	{ background: #222 url(../images/bg_home.jpg) repeat-x;}
table, th, td { font-size: 14px; font-family: arial, helvetica, sans-serif; color: #ccc; text-align: left; }

#skip	{ display: none;}

a:link, a:visited	{ color: #fff; text-decoration: underline;}
a:hover		{ color: #ffea36; text-decoration: none;}

/* HEADER */
#container	{ position: relative; width: 760px; margin: 0 auto; text-align: left; }
#header		{ position: relative; height: 138px; background: url(../images/bg_header.jpg) no-repeat; color: #999;}
.logo { position: absolute; top: 0; left: 0; }
.tagline { position: absolute; top: 44px; left: 201px; }

#headnav	{ position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: bold; text-transform: uppercase;}
	#headnav a:link, #headnav a:visited		{ text-decoration: none;}
	#headnav .on	{ background: url(../images/icon_language.gif) no-repeat 0 2px; padding-left: 15px; }
	#headnav .language	{ padding-left: 25px; }

/* NAVIGATION
------------------------------------------------------------------------------------- */
#nav { position: absolute; bottom: 6px; right: 0; height: 56px; }
#nav li { float: left; position: relative; font-size: 15px; list-style: none; height: 56px; }
#nav li a { cursor: pointer; position: relative; height: 56px; color: #fff; display: block; text-decoration: none; outline: none; }
#nav li strong { position: absolute; top: 0px; left: 0px; display: block; height: 56px; }
#nav li, #nav li a, #nav li strong { background-image: url(../images/nav.gif); }

#nav li.beer, #nav li.beer a, #nav li.beer a strong				{ background-position: 0 0; width: 100px; }
#nav li.brewery, #nav li.brewery a, #nav li.brewery a strong	{ background-position: -100px 0; width: 128px; }
#nav li.tavern, #nav li.tavern a, #nav li.tavern a strong		{ background-position: -228px 0; width: 115px; }
#nav li.fans, #nav li.fans a, #nav li.fans a strong				{ background-position: -343px 0; width: 120px; }
#nav li.contact, #nav li.contact a, #nav li.contact a strong	{ background-position: -463px 0; width: 110px; }

/* HOVER STATE */
#nav li.beer, #nav li.beer a:hover strong			{ background-position: 0 -56px; width: 100px; }
#nav li.brewery, #nav li.brewery a:hover strong		{ background-position: -100px -56px; width: 128px; }
#nav li.tavern, #nav li.tavern a:hover strong		{ background-position: -228px -56px; width: 115px; }
#nav li.fans, #nav li.fans a:hover strong			{ background-position: -343px -56px; width: 120px; }
#nav li.contact, #nav li.contact a:hover strong		{ background-position: -463px -56px; width: 110px; }

/* ON STATE */ 
#nav li.beeron a, #nav li.beeron a strong			{ background-position: 0 -112px; width: 100px; }
#nav li.breweryon a, #nav li.breweryon a strong		{ background-position: -100px -112px; width: 128px; }
#nav li.tavernon a, #nav li.tavernon a strong		{ background-position: -228px -112px; width: 115px; }
#nav li.fanson a, #nav li.fanson a strong			{ background-position: -343px -112px; width: 120px; }
#nav li.contacton a, #nav li.contacton a strong		{ background-position: -463px -112px; width: 110px; }

/* HOME page */

#h_col1				{ float: left; display: inline; width: 530px; margin: 0 9px 20px 0;}
	#h_col1 p		{ padding: 0 0 20px; line-height: 18px;}
#h_messaging		{ position: relative; height: 333px; margin: 0 0 20px; }
	a.flashlink:link, a.flashlink:visited	{ position: absolute; top: 0; left: 0; display: block; height: 333px; width: 530px; background: url(http://www.tjbeer.com/assets/css/none); z-index: 100;}
#h_announcements	{ float: left; display: inline; width: 250px; margin-right: 20px; }
#h_store			{ float: left; width: 260px; }

#h_col2			{ float: left; display: inline; width: 220px; margin: 0 0 20px; }
#h_newsletter	{ margin: 9px 0 2px; background: url(../images/bg_newsletter.gif) no-repeat; padding: 10px 0 0 10px; height: 122px; }
	* html #h_newsletter	{ height: 132px; hei\ght: 122px; }
	#h_newsletter h1 a:link, #h_newsletter h1 a:visited	{ color: #ffea36; }
	#h_newsletter .input	{ width: 180px; margin: 0 0 10px;}
#h_locator		{ position: relative; margin-left: -5px; margin-right: -19px; margin-bottom: 10px;}
#h_about		{ font-size: 13px; line-height: 18px; }

#home h1	{ color: #ccc;}

#footer	{ border-top: 1px solid #363636; padding: 30px 0; font-size: 11px; clear: both; height: 1%;}
	#footer span	{ float: right; padding: 5px 0 0; color: #666; }
	#footer li		{ float: left; list-style: none;}
	#footer li a:link, #footer li a:visited	{ display: block; float: left; padding: 5px; text-decoration: none; color: #ccc; }
	#footer li a:hover	{ color: #ffea36; }
	
/* SUB page */
#subhead	{ position: relative; height: 53px; line-height: 53px; font-family: georgia, times, serif; color: #ffea36; font-size: 30px; text-transform: uppercase; }
#subhead span	{ position: absolute; top: 0; right: 0;}
	
#breadcrumbs	{ padding: 10px 0; font-size: 11px; color: #666; border-bottom: 1px 
solid #222; } 
#breadcrumbs a:link, #breadcrumbs a:visited	{ color: #aaa; text-decoration: 
none; } 
#breadcrumbs a:hover	{ color: #ffea36; }

	
#subnav	{ float: left; display: inline; width: 180px; margin-right: 20px; padding: 44px 0 0; }
#subnav li	{ text-transform: uppercase; font-weight: bold; font-size: 12px; list-style: none; border-bottom: 1px solid #333; font-family: georgia, times, serif;}
#subnav li a:link, #subnav li a:visited	{ display: block; height: 30px; line-height: 30px; padding: 0 10px; text-decoration: none;}
#subnav li a:hover	{ background: #191919;}
#subnav li.on	{ height: 30px; line-height: 30px; padding: 0 10px; background: #292929;}

#content	{ width: 560px; float: left; padding: 44px 0; line-height: 20px; }	

#content p	{ padding: 0 0 20px; }
#content ul, #content ol	{ padding: 0 25px 20px; }
#content li	{ padding: 0 0 3px; }

.thumbnails p	{ float: left; display: inline; margin: 0 10px 10px 0;}
	
.contactform	{ margin: 0 0 20px;}
.contactform td		{ padding: 5px; vertical-align: top;}
.contactform td span	{ color: #900}
.btn	{ font-weight: bold; font-size: 12px; color: #036; padding: 2px; text-transform: uppercase; font-family: georgia, times, serif; }
input:focus, textarea:focus	{ background: #FFFFCC;}

.tablelist		{ margin: 0 0 20px;}
.tablelist th	{ padding: 5px 20px 5px 10px; background: #333; border-right: 1px solid #222;}
.tablelist td	{ padding: 5px 10px; border-bottom: 1px solid #333;}

/* MISC*/

.input		{ padding: 2px; border: 2px solid #666;}
.clear		{ clear: both; height: 1px; font-size: 1px;}
.floatright	{ float: right; margin: 0 0 10px 15px; clear: right;}
.floatleft	{ float: left; margin: 5px 15px 10px 0;}


hr	{ height: 1px; border: 0; background: #ddd; color: #ddd; margin: 0 0 15px; clear: both; }

small	{ font-size: 11px; line-height: 120%;}

h1	{ font-size: 22px; line-height: 22px; font-weight: normal; padding: 0 0 10px; font-family: georgia, times, serif; color: #fff;}
	h1 a:link, h1 a:visited	{ text-decoration: none;}
h2	{ font-size:20px; font-weight: normal; padding: 0 0 10px; font-family: georgia, times, serif;}
h3	{ font-size: 15px; color: #fff; padding: 0 0 10px;}

blockquote	{ background: #2c2c2c url(../images/bg_quote.gif) no-repeat; padding: 20px 20px 20px 40px; margin: 0 20px 20px; font-size: 17px; line-height: 26px;  color: #caba33;}


/* lightbox */
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background: transparent url(http://www.tjbeer.com/assets/images/blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; }
#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	 	
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } 

/* Min-Width */
.lbWidth { /* most browsers */ position: absolute; top: 0px; left: 0px; width: 100%; min-width: 790px; }
* html .lbContent { /* IE6 */ margin-left: -790px; position:relative; }
* html .lbMinWidth { /* IE6 */ padding-left: 790px; }  
/* Clearfix */	
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */