/*------------------------------------------------------------------------------------
    UlNav

    <ul class="ulNav">

        <!-- case with children -->
        <li class="root || rootDaddy"><a class+"root" href="#page.html">Link</a>
            <ul>
                <li class="daddy"><a href="page.html">Link</a>
                    <ul>
                        <li class="daddy"><a href="page.html">Link</a>
                        .....
                        FIVE LEVELS ARE ALLOWED FOR IN THIS CSS
                        .....
                    </ul>
                </li>
            </ul>
        </li>

        <!-- case with no children (only for root elements, for highlighting IE issue)-->
        <li class="root daddy">
            <a class="root" href="page.html">Link</a>
            <ul class="bachelor"></ul>
        </li>

        <!-- case with children, parent page has no url - cursor:none is default here -->
        <li class="root daddy">
            <a class="root" href="#">Link</a>
            <ul>
                <li class="daddy">
                    <a class="emptyPage" href="#">Link</a>
                    <ul>
                        .....
                    </ul>
                </li>
            </ul>
        </li>


    </ul>

*/

/* Shim Iframe for z-indexing */
.bgIframeCont iframe {
	position: absolute;
    z-index: -1;
    filter: alpha(opacity=0);
    opacity:0;}
    
.ulNav {
  float:left;
  width:100%;
  list-style:none;
  line-height:1.0;
  padding:0;
  margin:0;}

.ulNav li {
  float:left;
  padding:0;
  list-style:none;
  width:13em;}

/* node is root-level */
  .ulNav li.root {
    width:auto;}

.ulNav a {
  display:block;
  width:13em;
  color:#000;
  text-decoration:none;}


/* node is root-level */
  .ulNav a.root {
    width:auto;}

/* node is a page type none */
  .ulNav a.emptyPage {
    cursor:default;}

/* node has children */
.ulNav a.daddy {}

/* root node has children */
.ulNav a.rootDaddy { }


/* nested lists */
.ulNav li ul {
  position:absolute;
  left:-999em;
  width:13em;
  font-weight:normal;
  margin:0;
  padding:0;
  background-color:#fff;}

.ulNav li li {
  width:13em;}

.ulNav li ul a {
  width:13em;}


/* third level deploys to the right of the parent */
.ulNav li ul ul {
  margin:-1em 0 0 13em;}

/* five levels of deployment */
.ulNav li:hover ul ul,
.ulNav li:hover ul ul ul,
.ulNav li:hover ul ul ul ul,
.ulNav li:hover ul ul ul ul ul,
.ulNav li.hover ul ul,
.ulNav li.hover ul ul ul,
.ulNav li.hover ul ul ul ul,
.ulNav li.hover ul ul ul ul ul {
  left:-999em;}

.ulNav li:hover ul,
.ulNav li li:hover ul,
.ulNav li li li:hover ul,
.ulNav li li li li:hover ul,
.ulNav li li li li li:hover ul,
.ulNav li.hover ul,
.ulNav li li.hover ul,
.ulNav li li li.hover ul,
.ulNav li li li li.hover ul,
.ulNav li li li li li.hover ul {
  left:auto;}

/* highlighting */
.ulNav li.hover, .ulNav li:hover {
  background-color:#ddd;}

  .ulNav li.hover a:hover, .ulNav li:hover a:hover {
    background-color:#ddd;
    color:#000;}

  .ulNav li.hover ul a, .ulNav li:hover ul a {
    color:#000;}





/************************************************
 * **Auto-magical click-deployed dropdown menu**
 * Use in conjunction with menu.js
 * Just add class of "expMenu" to any UL you want to make a dropdown, and voila!
 */


/* Functionality */
 ul.expMenu li {
    clear: both;}

ul.expMenu li.sfhide ul li {
    position: absolute;
    float: left;
    margin-left: -999em;}

ul.expMenu li.sfhover ul li {
    position: relative; /* use position:absolute instead to make the menu appear over content, instead of bumping content down */
    margin-left: 0;
    clear: both;
    overflow: hidden;}
/* /Functionality */