/* CSS Hop City Document */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

body{
	background: #261c02;
	margin:0;
	padding: 0;
	color: #000;
	font:15px/22px arial, tahoma, sans-serif;
}

.clear { clear: both; }
.left { float: left; }
.right { float: right; }


#container { margin: 0 auto; padding: 0; width: 970px; text-align: left;  position: relative;}

/* LINKS */
a { COLOR: #661108; TEXT-DECORATION: underline; }
a:active { COLOR: #661108; TEXT-DECORATION: none; }
a:hover { COLOR: #661108; TEXT-DECORATION: none; }





/* Header
-----------------------------------------------------------------------------*/
#header { width: 970px; height: 351px; background: url(../images/header.jpg); text-align: left;}


#logo{
	float:right;
 	width:120px;
	height:87px;
	margin-top: -68px;
	margin-right: 61px;
 }




/* NAV 
*  START
**********************/
#nav_wrap {
	margin: 0 0 0 0;
	height: 20px;
	padding-top: 151px;
	background-image: url(../images/nav/foamFinger.png); 
	background-repeat: no-repeat;
	background-position: -100px 0;
	float: left;
}

#nav{ 
	width:970px;
	margin: 0 0 0 0;
	/*margin:0px auto; */
	color:#FFFFFF;
	font-family:Arial,sans-serif;
	font-size:20px;
	font-weight:bold;
	position: relative;
}

/*#nav {
	width: 100%;
	height: 60px;
} */

	#nav ul{
		list-style-type: none;
		padding: 0;
		margin: 0;
		margin-left: 228px;
		width: 560px;
		height: auto;
		position: relative;
	}
	
		#nav ul li{
			display: block;
			float: left;
			cursor: pointer;
			
		}
		
/*		#nav ul li a{
			background-image: url(/images/nav/nav_l.png); 
			background-repeat: no-repeat;
			background-position: left top;
			padding: 0px 0px 13px 17px;
			color: #333333;
			font-size: 1.2em;
			text-decoration: none;
			float:left;
		}
		
		#nav ul li a span{
			background-image: url(/images/nav/nav_r.png); 
			background-repeat: no-repeat;
			padding: 20px 30px 13px 15px;
			background-position: top right;
			float:left;
			cursor: pointer;
		}
		
		#nav ul li a:hover{
			color: white;
		}
				
		#active_nav {
			padding-top: 2px;
		}
			
		#active_nav a{ 
			background-image: url(/images/nav/nav_l_a.png) !important;	 							
		}
				
		#active_nav a span{
			background-image: url(/images/nav/nav_r_a.png) !important; 
			padding-top: 18px;
		}
				
		#active_nav a:hover{
			color: black !important;
		}  */

#nav a { display: block; height: 20px; float: left; margin:0 23px 0 0;}
#nav a#nav_home { width: 43px; background: url('../images/nav/nav_links.png') 0 0 no-repeat; }
#nav a#nav_beer { width: 75px; background: url('../images/nav/nav_links.png') -66px 0 no-repeat; }
#nav a#nav_brewmasters { width: 145px; background: url('../images/nav/nav_links.png') -165px 0 no-repeat; }
#nav a#nav_find { width: 118px; background: url('../images/nav/nav_links.png') -333px 0 no-repeat; }
#nav a#nav_events { width: 55px; background: url('../images/nav/nav_links.png') -474px 0 no-repeat; }

#nav a#nav_home:hover, #active_nav a#nav_home  { width: 43px; background: url('../images/nav/nav_links.png') 0 -25px no-repeat; }
#nav a#nav_beer:hover, #active_nav a#nav_beer { width: 75px; background: url('../images/nav/nav_links.png') -66px -25px no-repeat; }
#nav a#nav_brewmasters:hover, #active_nav a#nav_brewmasters { width: 145px; background: url('../images/nav/nav_links.png') -165px -25px no-repeat; }
#nav a#nav_find:hover, #active_nav a#nav_find { width: 118px; background: url('../images/nav/nav_links.png') -333px -25px no-repeat; }
#nav a#nav_events:hover, #active_nav a#nav_events { width: 55px; background: url('../images/nav/nav_links.png') -474px -25px no-repeat; }


/* NAV 
  END*/


 
#main { margin: 0 0 0 0; padding: 0 50px 0 15px; width: 905px; min-height: 500px; text-align: left; background: url('../images/brickWallBGWht.jpg') repeat-y;} 

#homeSplash { margin: 0 0 0 66px; padding: 0 0 0 0; width: 807px; height: 508px; text-align: left; background: url('../images/homeSplash.gif') no-repeat;} 

#homeWrap { margin: 0 0 0 0; padding: 25px 35px 0 35px; width: 800px; text-align: center; font:15px/20px arial, tahoma, sans-serif;}

#billboard {margin: 20px 0 0 35px; width: 870px; height: 300px; background: url('../images/billboardBG.gif') no-repeat; }

.billboardTitle{
	font-size:17px;
	font-weight:bold;
	color:#000000;
}

#lCol { margin: 0 0 0 0; padding: 0 0 0 0; width: 345px; text-align: left; float:left;}

#rCol { margin: 0 0 0 0; padding: 0 0 0 0; width: 560px; text-align: left; float:right;}

#lColLoc { margin: 0 0 0 0; padding: 0 0 0 0; width: 335px; text-align: left; float:left;}

#rColLoc { margin: 20px 0 0 0; padding: 0 0 0 0; width: 570px; text-align: left; float:right;}

#lColGal { margin: 0 0 0 0; padding: 0 0 0 0; width: 390px; text-align: left; float:left;}

#rColGal { margin: 0 0 0 0; padding: 0 0 0 0; width: 410px; text-align: left; float:right;}


/* Page Images */

#beerGlass { width: 324px; height: 377px; background: url('../images/beer_glass.png') no-repeat; margin:115px 0 0 0;}

#beerGlassOurB { width: 324px; height: 377px; background: url('../images/beer_glass.png') no-repeat; margin:0 0 0 0;}

#beerGlassLoc { width: 324px; height: 377px; background: url('../images/beer_glass.png') no-repeat; margin:10px 0 0 0;}

#brewmasters { width: 266px; height: 354px; background: url('../images/kevin_john.png') no-repeat; margin:115px 0 0 27px;}


h3{
margin-top:15px;
color:#000;
font-size: 16px;
font-weight:bold;
}

/* Our Beer Page */

#ourbeerList ul {
list-style-type: disc;
padding-left: 15px;
width: 545px;
}

#ourbeerList li {
	margin-left: 30px;
}

.coasters {
	width: 301px;
	text-align:right;
	float: left;
	margin-top: 20px;
}

/*Our Brewmasters */
#top10List ol {
list-style-type:decimal;
padding-left: 30px;
}


#rCol strong{
	background-color:#a49fa4; color: #000 !important;
	font: 16px arial, tahoma, sans-serif; font-weight:bold; padding: 1px 15px 1px 5px; text-align: left;
}

/* Locator Page */
#locatorWrap { margin: 0 0 0 0; padding: 0 0 0 55px; width: 850px; text-align: left;}

#Col1 { margin: 0 0 0 0; padding: 0 30px 0 0; width: 253px; text-align: left; float:left;}

#Col2 { margin: 0 0 0 0; padding: 0 30px 0 0; width: 253px; text-align: left; float:left;}

#Col3 { margin: 0 0 0 0; padding: 0 30px 0 0; width: 253px; text-align: left; float:left;}

#locatorWrap ul{
	list-style-type: none;
	padding: 0;
	width: 246px;
	height: auto;
	position: relative;
}
	
#locatorWrap ul li{
	display: block;
	text-align:left;
	font:14px/20px arial, tahoma, sans-serif;
	color: #661108;
	background: url('../images/locatorArrow.gif') 0 5px no-repeat;
	padding-left: 30px;
}


#locatorWrap ul li a{color: #661108; text-decoration:none;}
#locatorWrap ul li a:hover{color: #661108; text-decoration:underline;}
#locatorWrap ul li a:active { COLOR: #661108; text-decoration: none; }

.locatorName { 
	font-size:20px;
	font-weight:bold;
	margin-bottom: 10px;
}

.locatorName { 
	font-size:20px;
	font-weight:bold; 
}

.locatorBody { 
	font-size:16px; 
}

.locatorBold { 
	font-size:18px;
	font-weight:bold; 
}

#addressCol{
	float:left;
	width: 250px;
	margin-top: 45px;
}

#addressCol a { display: block; height: 28px; margin:0 0 0 35px;}
#addressCol a#back_button { width: 81px; background: url('../images/backButton.gif') 0 0 no-repeat; }
#addressCol a#back_button:hover { width: 81px; background: url('../images/backButton.gif') 0 -28px no-repeat; }

#mapCol{
	float:right;
	width:320px;
}

#map{
	background: #fff;
	width: 300px;
	height: 250px;
	padding: 0 0 0 0;
	border: 10px solid #211705;
	margin: 0 0 0 0;
	text-align: left;
}

small{
	text-align:left;
	font-size:14px;
	margin-left: 10px;
}
small a{ color: #661108; text-decoration:underline;}
small a:hover{ color: #661108; text-decoration:underline; }
small a:active{ COLOR: #661108; text-decoration: none;}


/* Events Page */
#eventsWrap { margin: 0 0 0 0; padding: 0 24px 0 55px; width: 830px; text-align: left;}

.divLine{
	width: 380px; height: 6px; background: url('../images/divLine.gif') no-repeat; margin:10px 0 10px 0;
}

.eventName { 
	font-size:20px;
	font-weight:bold;
	color:#661108;
}

#photoGalleryBG{
	background: #efeeed;
	border: 2px solid #211705;
	padding: 24px 5px 25px 25px;
	width: 385px;
	position: relative;
	min-height: 250px;
}

.galleryThumb{
	width:165px;
	height:80px;
	margin-right:15px;
	float:left;
	background: #000;
}

.galleryInfo{
	float:right;
	text-align:left;
	font-size:16px;
	width:200px;
	height:80px;
}

.galleryTitle{
	font-size:18px;
	font-weight:bold;
	color:#661108;
}

/* Gallery Page */

/* The wider the #list_wrapper is, the more columns will fit in it */
#photo_wrapper{
    width: 830px
}

	
#photo_wrapper a {
	outline: none;	
	margin-right: 20px;
}

#photo_wrapper a img {
	border: 2px solid #211705;
	background: white;
	padding: 5px;	
	margin: 10px 5px 10px 0;
}

#galleryBack a { display: block; height: 28px; margin:15px 0 0 35px;}
#galleryBack a#back_button { width: 81px; background: url('../images/backButton.gif') 0 0 no-repeat; }
#galleryBack a#back_button:hover { width: 81px; background: url('../images/backButton.gif') 0 -28px no-repeat; }


/* page titles */
h1.swap {
  height:50px;
  background-repeat:no-repeat;
  }
h1.swap span {display:none;}
h1#t-ourbeer {background-image:url("../images/titles/our_beer_pgTitle.gif"); padding: 0 0 30px 0;}
h1#t-ourbrewmasters {background-image:url("../images/titles/kevin_john_pgTitle.gif"); padding: 0 0 30px 0;}
h1#t-findourbeer {background-image:url("../images/titles/find_our_beer_pgTitle.gif"); padding: 0 0 30px 0;}
h1#t-eventsCalendar {background-image:url("../images/titles/events_calendar_pgTitle.gif"); padding: 0 0 30px 0;}
h1#t-photoGallery {background-image:url("../images/titles/photogallery_pgTitle.gif"); padding: 0 0 0 0;}
h1#t-contact {background-image:url("../images/titles/contact_pgTitle.gif"); padding: 0 0 30px 0;}

h2.swap {
  height:17px;
  background-repeat:no-repeat;
  }
h2.swap span {display:none;}
h2#t-map {background-image:url("../images/titles/map_directions.gif"); padding: 0 0 15px 0;}
	

/* Footer
-----------------------------------------------------------------------------*/

#footer_wrap {
	position: relative;
	background: url(../images/footerBG.jpg) no-repeat;
}


#footer {
	position: relative;
	width: 870px;
	height: 87px;
	margin: 0 auto;
	padding: 50px 70px 0 30px;	
}

#footer .footerText { font-family: arial; font-size: 13px; color: #000000;}
#footer a {font-family: arial, helvetica, sans-serif; color: #000000; text-decoration: none;}
#footer a:hover {color: #000000; text-decoration:underline;}
#footer .copyright { font-family: arial; font-size: 13px; color: #000000; text-align:right;}