html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}legend{color:#000;}

html, body {
	background: #840400 url(redstripe.jpg);
	padding: 0;
	margin: 0;
}

a:link, a:visited {
	font: normal 1em Georgia, serif;
	color: #336;
}

a:hover, a:active {
	font: normal 1em Georgia, serif;
	color: #900;
}

p {
	font: normal 1em Georgia, serif;
	color: #343;
}

strong {
	font-weight: bold;
	font-variant: small-caps;
	color: #000;
}

#container {
	width: 800px;
	height: 700px;
	background-color: #fff;
	position: absolute;
	top: 10px;
	left: 20px;
	border: 2px solid #000;
}

/* Main Containers which divide the screen into thirds, plus a footer */

#navbox {
	width: 200px;
	height: 670px;
	position: absolute;
	left: 0;
	background-color: #ff9;
}

#main {
	width: 400px;
	height: 670px;
	position: absolute;
	left: 200px;
	background-color: #fff;
}

#picbox {
	width: 200px;
	height: 670px;	
	position: absolute;
	left: 600px;
	background-color: #ff9;

}

#footer {
	width: 800px;
	height: 30px;
	position: absolute;
	left: 0;
	top: 670px;
	background: #000 url(footer.jpg);
	overflow: hidden;
}

/* three boxes which create the wood-burnt header */

#logoa {
	width: 200px;
	height: 72px;
	background: #ff9 url(newheader_01.png);
}

#logob {
	width: 400px;
	height: 236px;
	background: #ff9 url(newheader_02.png);
}

#logoc {
	width: 200px;
	height: 72px;
	background: #ff9 url(newheader_03.png);
}

/* smaller boxes to contain specific elements */

#nav {
	width: 200px;
	height: 175px;
	background: #ff9 url(navamain.jpg);
	position: absolute;
	top: 72px;
	z-index: 3;
}

#links {
	width: 180px;
	height: 423px;
	background: #ff9 url(links.jpg) no-repeat;
	position: absolute;
	top: 247px;
	margin: 10px 5px 0 15px;
	line-height: 1.4em;
	overflow: auto;
}

#text {
	width: 380px;
	height: 434px;
	position: absolute;
	background-color: #fff;
	overflow: auto;
}

#pics {
	width: 200px;
	height: 598px;
	padding: 0;
	margin: 0;
	border: 0;
}

/* specific actions and rules for detailed display */

#vegetarian {
	width: 300px;
	height: 116px;
	background: transparent url(sticker.png) no-repeat;
	position: absolute;
	left: 580px;
	top: 5px;
	z-index: 2;
}

#links a {
	position: relative;
	top: 30px;
	font-size: .8em;
}

#nav a {
	position: absolute;
	height: 35px;
	width: 200px;
	text-decoration: none;

}

a .hide {
	position: absolute;
	top: -1000px;
}

#one {top: 0}
#two {top: 35px;}
#three {top: 70px;}
#four {top: 105px;}
#five {top: 140px;}

a#one:hover {background-image: url(navb1.jpg);}
a#two:hover {background-image: url(navb2.jpg);}
a#three:hover {background-image: url(navb3.jpg);}
a#four:hover {background-image: url(navb4.jpg);}
a#five:hover {background-image: url(navb5.jpg);}

a#one:hover, a#two:hover, a#three:hover, a#four:hover, a#five:hover {border: none;}

#logob a {
	position: absolute;
	height: 200px;
	width: 400px;
	text-decoration: none;
}

#text p {
		margin: 0 0 1em 0;
}

#text h1 {
	font: 1.5em normal Arial, sans-serif;
	text-align: center;
	color: #006;
}

#pics img {
	padding: 0;
	margin: 0;
	border: 5px solid #ff9;
	width: 190px;
}

#picbox p {
	font-size: .8em;
	text-align: center;
	color: #000;
	padding: 0 5px;
}

#footer h2 {
	padding: 8px 0;
	text-align: center;
	font-size: .9em;
	font-weight: bold;
	font-family: Georgia, serif;
}

/* Specific CSS for the What We Carry Page */

#directions #container {height: 935px;}
#directions #navbox, #directions #main, #directions #picbox {height: 905px;}
#directions #text {width: 400px;height: 688px;font-size: .8em;}
#directions #footer {top: 905px;}


#delicase #text {width: 400px; font-size: .8em;}
#delicase #dirlinks {height: 410px;}
#delicase #text a{
	position: absolute;
	border: 1px solid;}

#aboutus #container {height: 1000px;}
#aboutus #footer {top: 970px;}
#aboutus #navbox, #aboutus #main, #aboutus #picbox {
	height: 970px;}
#aboutus #text {width: 400px;height: 734px;}
#aboutus #pics {height: 898px;}	

#photos #container {height: 890px;}
#photos #footer {top: 860px;}
#photos #navbox, #photos #main, #photos #picbox {
	height: 860px;}
#photos #text {width: 400px;height: 624px;font-size: .8em;}
#photos #pics {height: 788px;}
#photos #dirlinks {height: 595px;}	
#photos #text a{
	position: absolute;
	border: 1px solid;}	
	
#contact #container {height: 590px;}
#contact #footer {top: 560px;}
#contact #navbox, #contact #main, #contact #picbox {
	height: 560px;}
#contact #text {width: 400px;height: 324px;font-size: .8em;}
#contact #pics {height: 488px;}
#contact #dirlinks {height: 295px;}	
#contact #text a{
	position: absolute;
	border: 1px solid;}		
#contact #text p{
	padding: 0 10px;
	font-size: 1.2em;
	line-height: 1.6em;
}

#contact em{
	font-weight: bold;
	display: block;
	padding-left: 80px;
}	
	
#delicase #a {left: 25px;top: 50px;}
#delicase #i {left: 150px;top: 50px;}
#delicase #c {left: 275px;top: 50px;}
#delicase #b {left: 25px; top: 175px;}
#delicase #e {left: 150px;top: 175px;}
#delicase #f {left: 275px;top: 175px;}
#delicase #h {left: 25px;top: 300px;}
#delicase #d {left: 150px;top: 300px;}
#delicase #g {left: 275px;top: 300px;}

#photos #a {left: 25px;top: 50px;}
#photos #b {left: 150px;top: 50px;}
#photos #c {left: 275px;top: 50px;}
#photos #d {left: 25px; top: 175px;}
#photos #e {left: 150px;top: 175px;}
#photos #f {left: 275px;top: 175px;}

#aboutus #dirlinks {height: 690px;}

#dirlinks {
	width: 180px;
	height: 710px;
	position: absolute;
	top: 247px;
	margin: 10px 5px 0 15px;
	line-height: 1.5em;
	overflow: auto;
	font-size: .8em;
}

#dirlinks p {
	padding: 0 0 10px 0;
}

#dirlinks h1 {
	font: 1.4em strong Georgia, serif;
	color: #000;
	padding: 10px 0;
}

#dirlinks h2 {
	font: 1.2em strong Georgia, serif;
	color: #a00;
	padding: 5px 0;
}

#aboutus #dirlinks img {
	width: 162px;
}


.deli li {
	padding: 0 ;
}

#picbox h2 {
	font: 1.2em strong Georgia, serif;
	color: #a00;
	text-align: center;
}

#photo {
position: absolute;
top: 40px;
left: 40px;
}

#photo img {
	max-width: 800px;
}

#photo p {
	display: block;
	background: #fff;
	text-align: center;
}

#photo h2 {
	display: block;
	background: #ff9;
	font-size: 2em;
	padding: 10px 20px;
}

#photo li {
	display: block;
	background: #fff;
	font-size: .8em;
	text-align: left;
	color: #005;
	line-height: 1.5em;
	padding: 0 10px;
}

.gallerycontainer p {
	text-align: center;
	font-size: .8em;
}

.thumbnail img{
margin: 0 14px 5px 14px;
border: 1px solid #fff;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid #000;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 185px;
left: 0px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

#beerlist li {
	text-align: left;
	line-height: 1.7em;
}

.brewer {
	font-weight: bold;
}