@charset "utf-8";
/* CSS Document */

/* Because of Typo3 and the way it handles menus some of the information here is not used
I have tried to mark out those areas and or combine to make clearer
some of the areas I have marked out worked different in Typo3 then expected*/

/**************** menu coding *****************/

#mainMenu {
  width: 800px;
  /*background: #eee;  This causes a gray block beneight the whole menu when the dropdowns open*/
  float: left;
  overflow: visible;
  visibility: visible;
  background-image:url(../images/NavImages/nav-background.png);
  background-repeat: norepeat;
  margin-top:5px;
}

#mainMenu ul {
  list-style: none;
  width: 10.6em;
  margin: 0;  /* Added so menu in IE will not move with longer dropdown lenths */
  padding:0; /* Added to block  inheritance in Firefox */
  text-align:center;
  float:left;
  font: bold 12px arial, helvetica, sans-serif;
  text-transform:uppercase; 
  display:inline;
  margin-right:6px;
  height:30px;  
}
/*#mainMenu ul:hover {
    background-color:#465781;
}
*/
#mainMenu a{
  text-decoration: none;
  font-weight:bolder;
  font-family: arial, helvetica, sans-serif;
   /*color:#FFF;630;*/
  width: 10.6em;
  padding:2px 0 3px 2px;
  height:30px;
  margin-left:5px;
  color:#000;
}
/*#mainMenu a:hover {
  background:#eee;#808db8;
  color: #555454;
  font: bold 12px arial, helvetica, sans-serif;
}*/

#mainMenu ul li a:hover {
  color: #555454;
  font: bold 12px arial, helvetica, sans-serif;
}

#mainMenu ul li a {float:left; height:25px;}

#mainMenu ul li ul li a, #mainMenu ul li ul li a:hover { 
  border-top: solid 1px #ccc;
  width: 10.6em;
  /*margin-left:5px;*/
  padding: 0px 5px 5px 5px;
  text-transform:none;
  font: bold 12px arial, helvetica, sans-serif;
}

#mainMenu ul li ul li a{ 
  background:none #fff;/*none #465781;*/
  color: #000;
}

#mainMenu ul li ul li a:hover{ 
  background:none #808db8;
  color: #FFF;
}

#mainMenu ul ul {
  position: relative;
  z-index: 400;
  text-align:left;
  margin: 0;
}

/* This is tha part that hides the sub-pages */
DIV#mainMenu ul ul,
DIV#mainMenu ul li:hover ul ul,
DIV#mainMenu ul ul li:hover ul ul{display: none;}
/* This is the part that displays the sub-pages */
DIV#mainMenu ul li:hover ul,
DIV#mainMenu ul ul li:hover ul,
DIV#mainMenu ul ul ul li:hover ul{display: block;}