/*================================================================
NAV stylesheet for the website.

Define all aspects (layout AND typography) of:
  - Nav (ul)
  - Nav List Items (li)
  - Nav Links
  - Current Page Indicators
  
================================================================*/


/* NAV 
----------------------------------------------------------------*/
#nav {
  position: absolute;
  top: 38px;
  right: 20px;
  height: 38px;
  }
  
#nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  }
  /* Top menu items */
  #nav ul li {
    float: left;
    position: relative;
    margin: 0;
    }
    
    #nav ul li a {
      color: #585858;
      font-size: 11px;
      line-height: 38px;
      height: 38px;
      display: block;
      padding: 0 6px;
      text-decoration: none;
      outline: transparent solid 0px;
      }
      
    /* Set widths for IE6 */
    #nav.en ul #about-us-tab    { _width: 70px; }
    #nav.en ul #microfinance-tab { _width: 70px; }
    #nav.en ul #what-we-do-tab  { _width: 90px; }
    #nav.en ul #projects-tab  { _width: 70px; }
    #nav.en ul #blogs-tab       { _width: 50px; }
    #nav.en ul #media-tab       { _width: 50px; }
      
    #nav ul li.hovering span.tab {
      background: url(/css/images/_interface/nav-bg.gif) 0 0 no-repeat;
      display: block;
      }
      #nav ul li.hovering span.tab a {
        background: url(/css/images/_interface/nav-bg.gif) right -100px no-repeat;
        }
    #nav ul li.selected span.tab {
      background: url(/css/images/_interface/nav-bg.gif) 0 0 no-repeat;
      display: block;
      }
      #nav ul li.selected span.tab a {
        background: url(/css/images/_interface/nav-bg.gif) right -100px no-repeat;
        }
      /* Set .selected menu text back to normal colors when hovering */
      #nav ul li.hovering.tab a {
        color: #585858;
        }
      #nav ul li.hovering.tab li a {
        color: #585858;
        }
  /* Popup submenu */
  #nav ul ul {
    width: 180px;
    position: absolute;
    left: 0;
    top: 38px;
    list-style: none;
    display: none;
    padding: 8px 0;
    _padding: 0;
    margin: 0;
    background: #96DAE4;
    -moz-border-radius-bottomleft: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -webkit-border-bottom-right-radius: 8px;
    }
    #nav ul ul.right-align-menu {
      right: 0;
      left: auto;
      }
    #nav ul ul li {
      clear: left;
      width: 180px;
      padding: 0;
      background: transparent;
      }
      #nav ul ul li a {
        font-size: 12px;
        font-weight: normal;
        line-height: 23px;
        height: 23px;
        margin: 0;
        border-bottom: 1px dotted #333434;
        padding-left: 29px;
        color: #585858;
        outline: transparent solid 0px;
        }
        #nav ul ul li.first a {
          border-top: 1px dotted #333434;
          background: transparent;
          }
          #nav ul ul li a:hover,
          #nav ul li#company ul li a:hover {
            background: transparent;
            color: #FFF;
            }