div.sun_nav_menu ul.TopMenu {
  display:block;
  list-style-type:none;
  list-style:none;
  margin-bottom:0px;
  _margin-bottom:-10px;
  padding-bottom:0px;
  height:29px;
  z-index:9;
  margin-left:0px;
  padding-left:0px;
  float:left;
  font-family:Arial,Helvetica,sans-serif;
}
div.sun_nav_menu ul.TopMenu li {
  float:left;
  position:relative;
  margin-right:3px;
  text-align:center;
  background:white;
  z-index:9;
  margin-left:0px;
  padding-left:0px;
}
div.sun_nav_menu ul.TopMenu li a{
  display:block;
  margin-top:10px;
  color:#9d1d92;
  font-weight:bold;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  text-decoration:none;
  margin-left:8px;
  
}
div.sun_nav_menu ul.TopMenu li ul li a{ padding-right:25px; }
div.sun_nav_menu ul.TopMenu li ul {
  width:175px;
  z-index:7;
  border:1px solid #7b7b7b;
  background:white;
  visibility:hidden;
  list-style-type:none;
  list-style:none;
  margin:0px;
  padding:0px;
  padding-right:10px;
  margin-top:-1px;
  position:absolute;
  top:34px;
  left:10px;
}

div.sun_nav_menu ul.TopMenu li ul li {
  display:block;
  width:100%;
  margin-right:0px;
  padding-right:0px;
  padding-top:2px;
  padding-left:10px;
  margin-left:0px;
  padding-top:1px;
  padding-bottom:1px;
  text-align:left;
  z-index:7;
}
div.sun_nav_menu ul.TopMenu li ul li ul {
  visibility:hidden;
  position:absolute;
  top:0px;
  left:175px;
  padding:0px;
  margin:0px;
  margin-left:10px;
  padding-right:10px;
}
/*This togles the menu back and forth so that it doesent go of the end of the page*/ 
div.sun_nav_menu ul.TopMenu li ul li ul li ul { left:-197px; }
div.sun_nav_menu ul.TopMenu li ul li ul li ul li ul { left:175px; }
/*End toggle*/
div.sun_nav_menu ul.TopMenu li:hover{
  background:#9d1d92;
  z-index:9;
}
div.sun_nav_menu ul.TopMenu li:hover ul {
  visibility:visible;
  z-index:5000;
}
div.sun_nav_menu ul.TopMenu li:hover ul li {
  z-index:7;
}
/* These are the arrow styles and selector */
div.sun_nav_menu ul.TopMenu li ul li span.MenuArrow{
  float:right;
  color:#9d1d92;
  margin-top:-13px;
}
div.sun_nav_menu ul.TopMenu li ul li:hover span.MenuArrow{ color:white; }
div.sun_nav_menu ul.TopMenu li ul li:hover ul li span.MenuArrow{ color:#9d1d92; }
div.sun_nav_menu ul.TopMenu li ul li ul li:hover span.MenuArrow{ color:white; }
div.sun_nav_menu ul.TopMenu li ul li ul li:hover ul li span.MenuArrow{ color:#9d1d92; }
div.sun_nav_menu ul.TopMenu li ul li ul li ul li:hover span.MenuArrow{ color:white; }
div.sun_nav_menu ul.TopMenu li ul li ul li ul li ul li:hover span.MenuArrow{ color:#9d1d92; }
/* End arrow style and selector */
/* These are the basic a styles */
div.sun_nav_menu ul.TopMenu li ul li a{
 margin:0px;
 padding-left:10px;
 color:#9d1d92;
 font-weight:bold;
}
/* Child selecter for all four levels this is to make sure the child elements are the correct color at the correct times */
/*First level*/
div.sun_nav_menu ul.TopMenu li ul li:hover a{ color:white; }
div.sun_nav_menu ul.TopMenu li ul li:hover ul li a{ color:#9d1d92; }
/*Second Level*/
div.sun_nav_menu ul.TopMenu li ul li ul li:hover a{ color:white; }
div.sun_nav_menu ul.TopMenu li ul li ul li:hover ul li a{ color:#9d1d92; }
/*Third level*/
div.sun_nav_menu ul.TopMenu li ul li ul li ul li:hover a{ color:white; }
div.sun_nav_menu ul.TopMenu li ul li ul li ul li:hover ul li a{ color:#9d1d92; }
/*Forth level*/
div.sun_nav_menu ul.TopMenu li ul li ul li ul li ul li:hover a{ color:white; }


/*The following are the image span styles these are usefull for making background images and also for making curved corners that can be easly switched out on hover please name the images as they are named in this file to make it easyer for the csshover.js script to doits job*/
div.sun_nav_menu span.MenuLeft{
  background:url(../images/MenuInActiveLeft.gif) left top no-repeat;
  margin:0px;
  padding:0px;
  height:33px;
  float:left;
  width:6px;
  display:block;
  z-index:9;
  position:relative;
}
div.sun_nav_menu span.MenuCenter{
  background:url(../images/MenuInActiveCenter.gif) left top repeat-x;
  position:relative;
  margin:0px;
  padding:0px;
  float:left;
  height:33px;
  padding-right:3px;
  padding-left:-3px;
  display:block;
  z-index:9;
}
div.sun_nav_menu span.MenuRight{
  background:url(../images/MenuInActiveRight.gif) left top no-repeat;
  margin:0px;
  padding:0px;
  float:left;
  height:33px;
  width:9px;
  display:block;
  z-index:9;
  position:relative;
}

/*THESE ARE THE HOVER CLASSES FOR THE TOP LEVEL OF THE MENU THEY CAN BE OMITED BUT YOU WILL NEED TO ALTER CSSHOVER.JS TO MAKE IT WORK CORRECTLY IF YOU PLAN TO USE IT PLEASE NAME THE ALTERNATE IMAGE THE SAME AS IT IS NAMED BELLOW AND THE MAIN IMAGE THE SAME AS IT IS ABOVE SO THAT THE CSSHOVER.JS FILE CAN SELECT IT CORRECTLY */

/*div.sun_nav_menu ul.TopMenu li:hover span.MenuLeft{ background:url(../images/MenuInActiveLeft.gif); }
div.sun_nav_menu ul.TopMenu li:hover span.MenuCenter{ background:url(../images/MenuInActiveCenter.gif); }
div.sun_nav_menu ul.TopMenu li:hover span.MenuRight{ background:url(../images/MenuInActiveRight.gif); }*/

/*The following code is simply a show hide for ie7 plus and firefox this will make the script support up to 4 levels deep*/
/*START OF LEVEL TWO*/
/*hiding the second level ul if the main li is hovered on*/
div.sun_nav_menu ul.TopMenu li:hover ul li ul { visibility:hidden; }
div.sun_nav_menu ul.TopMenu li:hover ul li ul li{ visibility:hidden; }
/*Displaying the second leve ul if its parent li is hovered over*/
div.sun_nav_menu ul.TopMenu li ul li:hover ul { visibility:visible; }
div.sun_nav_menu ul.TopMenu li ul li:hover ul li{ visibility:visible; }
/* END LEVEL TWO */

/* START LEVEL THREE */
/*hiding the third level ul if the main li is hovered on*/
div.sun_nav_menu ul.TopMenu li ul li:hover ul li ul { visibility:hidden; }
div.sun_nav_menu ul.TopMenu li ul li:hover ul li ul li{ visibility:hidden; }
/*Displaying the third leve ul if its parent li is hovered over*/
div.sun_nav_menu ul.TopMenu li ul li ul li:hover ul { visibility:visible; }
div.sun_nav_menu ul.TopMenu li ul li ul li:hover ul li{ visibility:visible; }
/* END LEVEL THREE */
/*  */
/* START LEVEL FOUR */ 
/*hiding the forth level ul if the main li is hovered on*/
div.sun_nav_menu ul.TopMenu li ul li ul li:hover ul li ul { visibility:hidden; }
div.sun_nav_menu ul.TopMenu li ul li ul li:hover ul li ul li{ visibility:hidden; }
/*Displaying the forth leve ul if its parent li is hovered over*/
div.sun_nav_menu ul.TopMenu li ul li ul li ul li:hover ul { visibility:visible; }
div.sun_nav_menu ul.TopMenu li ul li ul li ul li:hover ul li{ visibility:visible; }
/* END LEVEL FOUR */
/* MORE LEVELS CAN BE ADDED TO THIS STRUCTURE IF NEEDED */