@charset "utf-8";
/* CSS Document */

/**************************************/
/*           NAVIGATION
/**************************************/

#nav {
background:url(../images/slices/navBkgd.jpg) repeat-x;
height:71px;
width:759px;
font-size:1.1em;
position:absolute;
z-index:98;
padding:0;
margin:0 auto;
}

#nav li {
display:inline;
z-index:2;
float: left;
height:101px;
}

#nav li a span {
display:none;
}

#nav li li a span {
display:inline;
}

#nav li a {
color:#FFFFFF;
text-transform:uppercase;
text-decoration:none;
font-weight:bold;
outline:none;
display:block;
height:51px;
background-repeat:no-repeat;
outline:none;
}

#nav li li a /* added this to prevent subnav from inheriting width from "parent" to nav */
{
    width: auto;
}

#nav li a:link, #nav li a:visited {
color:#FFFFFF;
text-decoration:none;
}

#nav li a:hover {
color:#e4dcbf;
text-decoration:none;
}

.ourBeers a {
background:url(../images/nav/ourbeers.jpg) 0 0 no-repeat;
background-position:top left;
width:86px; 
}

.beerGear a {
background:url(../images/nav/beerGear.jpg) 0 0 no-repeat;
background-position:top left;
width:78px; 
}

.taproom a {
background:url(../images/nav/taproom.jpg) 0 0 no-repeat;
background-position:top left;
width:108px; 
}

.where a {
background:url(../images/nav/wheresthebeer.jpg) 0 0 no-repeat;
background-position:top left;
width:102px; 
}

.news a {
background:url(../images/nav/news.jpg) 0 0 no-repeat;
background-position:top left;
width:139px; 
}

.behind a {
background:url(../images/nav/behindthebrewing.jpg) 0 0 no-repeat;
background-position:top left;
width:120px; 
}

.getinTouch a {
background:url(../images/nav/getinTouch.jpg) 0 0 no-repeat;
background-position:top left;
width:126px; 
}

.ourBeers a:hover, .beerGear a:hover, .taproom a:hover, .where a:hover, .news a:hover, .behind a:hover, .getinTouch a:hover  {
background-position: 0 -51px;

}

#nav ul li.selected a
{
background-position: 0 -51px;    
}

#nav ul li.selected ul
{
display: block; /*shows second level menu on hover*/
}

/**************************************/
/*        BEGIN DROPDOWN MENU
/**************************************/

#nav li ul {/*hides second level menu and positions it*/
background:url(../images/subnavBkgd.jpg) repeat-x;
width:759px;
height:30px;
display: none;
position: absolute; 
font-weight:100;
margin:0px 0 0;/*TOP MARGIN MOVES IT DOWN*/
z-index:7;
top:-10px;
left:0px;
margin:60px 0 0 0;
}

#nav li li {
padding:0;
margin:0;
display:inline;
}

#container #nav li li a, #container #nav li li a:visited {
text-decoration:none;
background-image:none;
position:relative;
color:#1b1a49;
text-transform:none;
font-weight:100;
padding:5px 0 1.6em 1em;/*top padding necessary to access hovered menu*/
float:none;
}

#container  #nav li li a:hover { /*black hover color*/
text-decoration:underline;
}

#nav li:hover ul, #nav li.over ul{ 
display: block; /*shows second level menu on hover*/
z-index: 20; /* make sure this subnav pops "above" subnav of current page */
}

#nav li ul:hover
{
display: block; /*shows second level menu on hover*/
z-index: 20;/* make sure this subnav pops "above" subnav of current page */
}

/* this will display the menu for the current branch, but i don't 
/* know how to make it disappear when another menu is hovered over

/*
#nav li ul.showme
{
    display:block;
}
*/

li > ul {
top: auto;
left: auto;
}

.left {
left:0px;
text-align:left;
}

.middle {
text-align:center;
}

.right {
text-align:right;
}