html, body { height: 100%; overflow: hidden;}
body { color: #482b0b; background-color: #f1e4d2; font-family: Georgia, serif;}

#wrapper { width: 100%; height: 100%; position: absolute; overflow: auto;}
#wrapper { background: -webkit-gradient(linear, left top, left bottom, from(#f7f3ed), to(#ecdcc3));}
#wrapper { background: -moz-linear-gradient(top,  #f7f3ed,  #ecdcc3);}
#wrapper { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f3ed', endColorstr='#ecdcc3');}

#header { background: #3a1d06; height: 100px; position: relative; z-index: 20;}
#header { background: -webkit-gradient(linear, left top, left bottom, from(#280b00), to(#482b0b));}
#header { background: -moz-linear-gradient(top,  #280b00,  #482b0b);}
#header { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#280b00', endColorstr='#482b0b');}

.wrapper, #page { width: 680px; margin: 0 auto;}
#page { background-color: #f7f0e6; height: auto; min-height: 100%;}
#content { margin: -100px 15px 0 15px; padding: 115px 0 30px 0; position: relative; overflow: auto;}

#print_logo { display: none;}
h1 { padding-top: 15px; line-height: 0;}

#nav { float: left; width: 640px; height: 32px; margin-top: 13px;}
#nav li { float: left;}
#nav a { color: #f7f0e6; background-color: #2f1300; width: 100px; height: 20px; padding: 12px 0 0 12px; margin-right: 2px; font-size: 0.8125em; letter-spacing: -0.01em; float: left;}
.home #home a, .history #history a, .beer #beer a, .cider #cider a, .contact #contact a,
#nav a:hover { background-color: #1d0100;}

#text { width: 450px; float: left;}
.beer #text, .cider #text { margin-left: 180px;}
#sidebar { width: 145px; float: left; margin-left: -630px;}

#sidebar li a { color: #482b0b; font-size: 0.6875em; line-height: 1.25em; letter-spacing: -0.01em;}
#sidebar li a:hover, #sidebar li.active a { color: #958373;}
#sidebar li.active a:before { content: '– ';}

#products, #products dl { width: 310px; float: left;}
#products { border-top: 1px solid #856b4e; padding-top: 6px; margin-top: 25px;}
#products dl { border-bottom: 1px solid #856b4e; padding-bottom: 6px; margin-bottom: 6px; clear: both;}
#products dt, #products dd { width: 178px; float: right; font-size: 0.75em; line-height: 1.167em;}
#products dt { font-weight: bold;}

#products dd.image { width: 120px; float: left;}
.beer #text p, .cider #text p { width: 410px;}
#products dd p { width: 178px !important; font-size: 1em; margin-top: 0.5em;}

#slideshow { position: relative; width: 650px; height: 212px; margin-bottom: 20px;}
#slideshow img { top: 0; left: 0; position: absolute;}

#illustration { float: right;}
.home #illustration { width: 97px; margin: 70px 40px 0 0;}
.beer-overview #illustration, .cider-overview #illustration { width: 68px; margin: 60px 40px 0 0;}
.beer-view #illustration, .cider-view #illustration { margin: 10px 0 0 0;}

#social { margin-top: 2em;}

h2 { font-size: 1.375em; line-height: 1em; margin-bottom: 1em; letter-spacing: -0.02em; font-weight: normal;}
h3 { font-size: 0.875em; line-height: 1em; font-weight: normal; padding-bottom: 0.35em; margin-bottom: 0.35em; border-bottom: 1px solid #856b4e;}
p { font-size: 0.8125em; line-height: 1.1538em; margin-bottom: 0.5em;}

a { text-decoration: none;}
p a { color: #482b0b; text-decoration: underline;}
p a:hover { color: #958373;}