﻿/******************************* MAIN  MENU STARTS *********************************/


a
{
    text-decoration: none;
}
ul
{
    /* list-style: none;*/
    margin:0;
    padding:0
}
p
{
    margin: 15px 0;
}

/* 
	LEVEL ONE
*/
#mainmenu
{
    position: relative;
    z-index: 99999;
    vertical-align:bottom;
    margin: 0px 4px;
}

#mainmenu li.mainmenuitem
{
    float: left;
    height: 22px;
    display: inline-block;
    border-right: 1px solid #ffffff;
    padding-top: 8px;
    padding-left: 5px;
     padding-right: 5px;
    background-color: transparent;
    font-size: 12px;
    text-transform: capitalize;
    color: #ffffff;
    font-weight: bold;
  
}

/*#mainmenu li.mainmenuitem
{
    font-weight: bold;
    font-family: verdana;
    font-size: 10px;
    float: left;
    height: 26px;
    display: inline-block;
    border-right: 1px solid Black;
    padding-top : 8px;
    background-color: transparent;
}*/

#mainmenu a:hover
{
    color: #000;
}
#mainmenu a:active
{
    color: #ffa500;
}
#mainmenu li.mainmenuitem a
{
    /*display: inline-block; ?*/
    margin: 4px 4px;
    border-right: none;
    color: #222;
}
#mainmenu li.mainmenuitem:last-child a
{
    border-right: none;
}
/* Doesn't work in IE 
#mainmenu li.mainmenuitem.hover, #mainmenu li.mainmenuitem:hover
{
    //position: relative; display: inline-block; ?//
    color: black;
    background-color: #027DB9;
}*/
#mainmenu li.mainmenuitem.hover, #mainmenu li.mainmenuitem:hover
{
    /*display: inline-block; ?*/
    position: relative; 
    color: black;
    background-image: url('/images/nav-bar.png');
    background-repeat: repeat-x;
    text-transform: capitalize;
}

#mainmenu li.mainmenuitem.hover a
{
    color: black;
}


/* 
	LEVEL TWO
*/
#mainmenu ul
{
    width: 220px;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0; /*display: inline-block; ?*/
}
#mainmenu ul li
{
    font-weight: normal;
    background: #f6f6f6;
    color: #000;

    float: none;
    display: inline-block;
    width: 100%;
    text-align: left;
    vertical-align: bottom;
    position: relative; 
}
/* Doesn't work in IE */
#mainmenu ul li.hover, #mainmenu ul li:hover
{
    /*position: relative; display: inline-block; ?*/
    color: black;
    background-image: url('/images/nav-bar.png');
    background-repeat: repeat-x;
}

/* IE 6 & 7 Needs Inline Block */
#mainmenu ul li a
{
    border-right: none;
    width: 100%;
    display: inline-block;
}

/* 
	LEVEL THREE
*/
#mainmenu ul ul
{
    left: 100%;
    top: 0;
}
#mainmenu li:hover > ul
{
    visibility: visible;
}




/******************************* MAIN  MENU ENDS *********************************/