﻿#nav
{
    /* If you want, you can add position:absolute;  and have the bar exactly where you want on the page */
    height: 66px; /* the size of the total image replacement */
    border: 0;
    width: 640px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    /*position:absolute;*/
    z-index: +1;

}

ul#menu
{
    list-style: none;
    margin: 0;
 
    padding: 0;
}

#menu li, #menu li a
{
    height: 66px; /* this and line height needs to be the same and is the height of the nav bar */
    position: relative;
    display: block;
    line-height: 66px;
    border: 0;
    padding :0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

#menu li
{
    float: left; /* gets the items in place */
    display: inline;
}

/* mac hide \*/
#menu li, #menu li a
{
    overflow: hidden;
}
/* end hide*/

#menu a
{
    /* how the 'no images' text looks */
    font-size: 0.8em;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    line-height: 0;
    text-align: center;
    padding: 0px;
}

#menu a:hover
{
    text-decoration: underline;
}

/* the basic size/height of the nav bar items */

#menu li em
{
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    height: 66px;
    cursor: pointer;
    border: 0;
}

/* the size/width/position of each item - use the background to show the correct bit of the image */

li#homemenu a, li#homemenu em
{background: url(/UserFiles/Image/nav03.jpg) no-repeat;
   background-position: 0 0;
    width: 75px;
}

li#whatsthismenu a, li#whatsthismenu em
{background: url(/UserFiles/Image/nav03.jpg) no-repeat;
    background-position: -75px 0;
    width: 96px;
}
li#sowhatmenu a, li#sowhatmenu em
{background: url(/UserFiles/Image/nav03.jpg) no-repeat;
    background-position: -171px 0;
    width: 107px;
}
li#opinionmenu a, li#opinionmenu em
{background: url(/UserFiles/Image/nav03.jpg) no-repeat;
    background-position: -278px 0;
    width: 102px;
}

li#supportmenu a, li#supportmenu em
{background: url(/UserFiles/Image/nav03.jpg) no-repeat;
    background-position: -378px 0;
    width: 100px;
}

li#druginfomenu a, li#druginfomenu em
{background: url(/UserFiles/Image/nav03.jpg) no-repeat;
    background-position: -478px 0;
    width: 80px;
}
li#faqmenu a, li#faqmenu em
{background: url(/UserFiles/Image/nav03.jpg) no-repeat;
    background-position: -558px 0;
    width: 73px;
}
.homeNav
{    
 
}
.forumNav
{    
background: url(/UserFiles/Image/navForum.jpg!important) no-repeat;
}
/* controls the hover with the background image moving sideways
 (for the right 'part' and down 30 for the hover state */

ul#menu li a:hover
{
    visibility: visible;
}
/* needed for ie to work*/

li#homemenu a:hover em
{
    background-position: 0 -66px;
}
li#whatsthismenu a:hover em
{
    background-position: -75px -66px;
}
li#sowhatmenu a:hover em
{
    background-position: -171px -66px;
}
li#opinionmenu a:hover em
{
    background-position: -278px -66px;
}
li#supportmenu a:hover em
{
    background-position: -378px -66px;
}
li#druginfomenu a:hover em
{
    background-position: -478px -66px;
}
li#faqmenu a:hover em
{
    background-position: -558px -66px;
}

/* If you want an 'active' state as well add lines like:

li#homemenu a:active em{background-position:0 -60px}

 */
