/*** ESSENTIAL STYLES ***/
#mainMenu, #mainMenu * {
  margin:      0;
  padding:    0;
  list-style:    none;
  font-family: american typewriter,verdana;
}
#mainMenu {
  line-height:  1.0;
  
  position:    relative;
}
#mainMenu ul {
  position:    absolute;
  top:      -999em;
}
#mainMenu ul li {
  width:      100%;
}
#mainMenu li:hover {
  visibility:    inherit; /* fixes IE7 'sticky bug' */
}
#mainMenu li {
  float:      left;
  position:    static;
}
#mainMenu li ul {
  width:      44em; /*IE6 fails without this*/
  font-size:      0.75em;
}
#mainMenu li li {
  position:    relative;
}
#mainMenu a {
  display:    block;
  position:    relative;
}

#mainMenu li:hover ul,
#mainMenu li.sfHover ul {
  left:      0;
  top:      42px; /* match top ul list item height */
  z-index:    99;
}
ul#mainMenu li:hover li ul,
ul#mainMenu li.sfHover li ul {
  top:      -999em;
}
ul#mainMenu li li:hover ul,
ul#mainMenu li li.sfHover ul {
  left:      10em; /* match ul width */
  top:      0;
}
ul#mainMenu li li:hover li ul,
ul#mainMenu li li.sfHover li ul {
  top:      -999em;
}
ul#mainMenu li li li:hover ul,
ul#mainMenu li li li.sfHover ul {
  left:      10em; /* match ul width */
  top:      0;
}

/*** RUBY PR SKIN ***/
#mainMenu {
  float:      left;
  margin-bottom:  1em;
}
#mainMenu a {
  text-decoration:none;
}
#mainMenu li a { /* visited pseudo selector so IE6 applies text colour*/
  color:      #8c7083;
}
#mainMenu li.selected {
color: #ea2577;
}
#mainMenu li:hover,
#mainMenu li.sfHover,
#mainMenu li li.selected,
#mainMenu a:focus, #mainMenu a:hover, #mainMenu a:active {
color: #ea2577;
}

#mainMenu li ul li a {
color:          #ae99a7;
}

#mainMenu ul li:hover,
#mainMenu ul li.sfHover,
ul#mainMenu ul li:hover li,
ul#mainMenu ul li.sfHover li,
#mainMenu ul a:focus, #mainMenu ul a:hover, #mainMenu ul a:active {
  background:    #fff;
  color: #ea2577;
}
ul#mainMenu li li li:hover,
ul#mainMenu li li li.sfHover,
#mainMenu li li.selected li.selected,
#mainMenu ul li li a:focus, #mainMenu ul li li a:hover, #mainMenu ul li li a:active {
  background:    #fff;
  color: #ea2577;
}
ul#mainMenu .selected ul,
ul#mainMenu ul li:hover ul,
ul#mainMenu ul li.sfHover ul {
  left:      0;
  top:      40px; /* match top ul list item height */
}
ul#mainMenu .selected ul ul {
  top:       -999em;
}

#mainMenu li li ul {
  width:      13em;
}
#mainMenu li li li {
  width:      100%;
}
#mainMenu ul li {
  width:      auto;
  float:      left;
}

ul#mainMenu .selected ul,
ul#mainMenu ul li:hover ul,
ul#mainMenu ul li.sfHover ul {
  left:      0;
  top:      40px; /* match top ul list item height */
}
ul#mainMenu .selected ul ul {
  top:       -999em;
}



/*** shadows for all but IE6 ***/
#mainMenu.sf-shadow ul {
  background:  url('../layout-images/shadow.png') no-repeat bottom right;
  padding: 0 8px 9px 0;
  -moz-border-radius-bottomleft: 17px;
  -moz-border-radius-topright: 17px;
  -webkit-border-top-right-radius: 17px;
  -webkit-border-bottom-left-radius: 17px;
}
#mainMenu.sf-shadow ul.sf-shadow-off {
  background: transparent;
}

/*** remove shadow on first submenu ***/
#mainMenu.sf-shadow > li > ul {
  background: transparent;
  padding: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topright: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
}

/* INDIVIDUAL MENU LINKS */
ul#mainMenu li span.text {
display: none;
}

ul#mainMenu li#about-ruby a {
width:145px;
height:40px;
background: #fff url(/media/layout-images/menu_about.jpg) 0 0 no-repeat;
}

ul#mainMenu li#about-ruby a:hover {
width:145px;
height:40px;
background: #fff url(/media/layout-images/menu_about.jpg) 0 -40px no-repeat;
}

ul#mainMenu li#services a {
width:135px;
height:40px;
background: #fff url(/media/layout-images/menu_services.jpg) 0 0 no-repeat;
}

ul#mainMenu li#services a:hover {
width:135px;
height:40px;
background: #fff url(/media/layout-images/menu_services.jpg) 0 -40px no-repeat;
}

ul#mainMenu li#sectors a {
width:100px;
height:20px;
background: #fff url(/media/layout-images/menu_sectors.jpg) 0 0 no-repeat;
}

ul#mainMenu li#sectors a:hover {
width:100px;
height:20px;
background: #fff url(/media/layout-images/menu_sectors.jpg) 0 -20px no-repeat;
}

ul#mainMenu li#events a {
width:115px;
height:40px;
background: #fff url(/media/layout-images/menu_events.jpg) 0 0 no-repeat;
}

ul#mainMenu li#events a:hover {
width:115px;
height:40px;
background: #fff url(/media/layout-images/menu_events.jpg) 0 -40px no-repeat;
}

ul#mainMenu li#whats-new a {
width:165px;
height:40px;
background: #fff url(/media/layout-images/menu_news.jpg) 0 0 no-repeat;
}

ul#mainMenu li#whats-new a:hover {
width:165px;
height:40px;
background: #fff url(/media/layout-images/menu_news.jpg) 0 -40px no-repeat;
}

ul#mainMenu li#charity a {
width:132px;
height:40px;
background: #fff url(/media/layout-images/menu_charity.jpg) 0 0 no-repeat;
}

ul#mainMenu li#charity a:hover {
width:132px;
height:40px;
background: #fff url(/media/layout-images/menu_charity.jpg) 0 -40px no-repeat;
}

ul#mainMenu li#clients a {
width:132px;
height:40px;
background: #fff url(/media/layout-images/menu_clients.jpg) 0 0 no-repeat;
}

ul#mainMenu li#clients a:hover {
width:132px;
height:40px;
background: #fff url(/media/layout-images/menu_clients.jpg) 0 -40px no-repeat;
}

ul#mainMenu li#gossip a {
width:123px;
height:40px;
background: #fff url(/media/layout-images/menu_gossip.jpg) 0 0 no-repeat;
}

ul#mainMenu li#gossip a:hover {
width:123px;
height:40px;
background: #fff url(/media/layout-images/menu_gossip.jpg) 0 -40px no-repeat;
}

ul#mainMenu li#get-in-touch a {
width:165px;
height:40px;
background: #fff url(/media/layout-images/menu_contact.jpg) 0 0 no-repeat;
}

ul#mainMenu li#get-in-touch a:hover {
width:165px;
height:40px;
background: #fff url(/media/layout-images/menu_contact.jpg) 0 -40px no-repeat;
}