/* ############################################################################
   ## 
   ##  MAIN MENU
   ##
   ######################################################################### */

/* ####################################
   GLOBAL - List Layout
   ################################## */

#MenuUL {
    /* The nav object. (A <ul> in the standard platform.) */
	position: relative; /* DON'T CHANGE - Assures nav container has proper cascading position. */
	float: left; /* DON'T CHANGE - Makes IE and FF behave the same regarding ul dimensions. */
	margin: 0; /* DON'T CHANGE - Removes margin around the ul for neat layout. */
	padding: 0; /* DON'T CHANGE - Removes padding within the ul for neat layout. */
	
	list-style: none; /* DON'T CHANGE - Removes bullet points from list items. */
	
	width: 100%;
}

#MenuUL li {
    /* All list items within the nav object */
	float: left; /* DON'T CHANGE - This makes the top level horizontal. */
    
    
  
    
}
* html #MenuUL li {
    /* IE6 Only */
    width: 60px;  /* IE6 needs a width the menu layout breaks. The white-space and padding options below simulate the variable width seen in other browsers but only of the text in the menu items is short enough. */
 /*   padding: 0 0px 10px 0; */
   /* padding-right: 2em;*/
   /* margin-left: 15px; */
    white-space: nowrap;
    /*double margin bug*/
    display: inline;
}

    #MenuUL li:hover, #MenuUL li.sfhover {
        /* All list items within the nav object - Hover */
    }

    
    /*custom background colours*/
    #mainmenu-planningandenvironment, #mainmenu-communication {
        background: #0e4878;
    }
    #mainmenu-connections, #mainmenu-design_construction {
        background: #1c98cb;
    }
    #mainmenu-the_project, #mainmenu-about {
        background: #3aacd1;
    }
    /*Doubel nav - class added by JS - see DoubleNav.js*/
    
    .doubleNav #MenuUL div.active li ul {
        left: auto;
    }


/* ####################################
   GLOBAL - Anchors (Links)
   ################################## */

#MenuUL a {
    /* All anchor tags within the nav object */
	display: block; /* DON'T CHANGE - Fills the width of the li with link rollover. */
    padding: 8px 0 8px 30px;
    color: #ffffff;
    font-size: 110%;
    font-weight: bold;

}
#MenuUL #mainmenu-about ul li a {
    padding-left: 25px;
}
/*individual widths for a*/
/*Calibri version*/
body.hasCalibri #mainmenu-planningandenvironment a {
    padding-right: 16px;
}
    /*Verdana version*/
    #mainmenu-planningandenvironment a {
        padding-right: 9px;
    }
/*Calibri version*/
body.hasCalibri #mainmenu-communication a {
    padding-right: 17px;
}
    /*Verdana version*/
    #mainmenu-communication a {
        padding-right: 15px;
    }
#mainmenu-connections a {
    padding-right: 35px;
}

/*Calibri version*/
body.hasCalibri #mainmenu-design_construction {
    padding-right: 32px;
}
    #mainmenu-design_construction {
        padding-right: 20px;
    }
/*Calibri version*/
body.hasCalibri #mainmenu-the_project {
    padding-right: 70px;
}
    #mainmenu-the_project {
        padding-right: 60px;
    }
/*IE6*/
*html #mainmenu-the_project {
    padding-right: 68px;
}

#mainmenu-about {
    padding-right: 32px;
}

* html #MenuUL a {
    /* IE6 Only */
    /* All anchor tags within the nav object */
    width: 100%; /* DON'T CHANGE - Fills the width of the li with link rollover for IE6 (display:block fix). Be careful if margin/padding/border is added. */
}

    #MenuUL a:hover {
        /* All anchor tags within the nav object - Hover */
        color: #ffffff;
    }

/* ####################################
   LEVEL 2+ - List Layout
   ################################## */

#MenuUL li ul {
    /* Second level lists (all sub lists within list items) */
	position: absolute; /* DON'T CHANGE - Places second level lists in the right spot. */
	left: -100%; /* DON'T CHANGE - Drop-down hover trick - Hide the menu off the screen. */
	
    margin: 0; /* DON'T CHANGE - Removes margin around the ul for neat layout. */
    padding: 0; /* DON'T CHANGE - Removes padding within the ul for neat layout. */
    
	list-style: none; /* DON'T CHANGE - Removes bullet points from list items. */
	
	background: #6dcff7;
	
	padding-bottom: 10px;
}

/*custom backgrounds*/
#MenuUL #mainmenu-planningandenvironment ul {
    background: #0e4878;
}
#MenuUL #mainmenu-communication ul {
    background: url(/App_Themes/Default/images/main_nav_corner_dark.png) no-repeat bottom right;
}

#MenuUL #mainmenu-connections ul {
    background: #1c98cb;
}
#MenuUL #mainmenu-design_construction ul {
    background: url(/App_Themes/Default/images/main_nav_corner_medium.png) no-repeat bottom right;
    /*create a bit of extra space*/
    margin-left: 10px;
}
#MenuUL #mainmenu-the_project ul {
    background: #3aacd1;
}
#MenuUL #mainmenu-about ul {
    background: url(/App_Themes/Default/images/main_nav_corner_light.png) no-repeat bottom right;
}

#MenuUL li:hover ul, #MenuUL li li:hover ul, #MenuUL li.sfhover ul, #MenuUL li li.sfhover ul {
    /* Second level lists (all sub lists within list items) - Hover over the containing li */
	left: auto; /* DON'T CHANGE - Drop-down hover trick - Re-align the menu on the screen on rollover. */
}

#MenuUL li ul li {
    /* Second level list items */
    float: none; /* DON'T CHANGE - Makes second level list items vertical. */
    padding: 0;
    width: auto;
}
/*custom li widths*/
#MenuUL #mainmenu-planningandenvironment ul li {
    width: 200px;
}
    /*IE6 needs widths on UL*/
    *html #MenuUL #mainmenu-planningandenvironment ul {
        width: 160px;
    }

/*Calibri version*/    
body.hasCalibri #MenuUL #mainmenu-communication ul li {
    width: 145px;
}
    /*Verdana version*/
    #MenuUL #mainmenu-communication ul li {
        width: 146px;
    }
    /*IE6*/
    *html #MenuUL #mainmenu-communication  ul {
        width: 96px;
    }
/*Calibri version*/
body.hasCalibri #MenuUL #mainmenu-connections ul li {
    width: 170px;
}
    #MenuUL #mainmenu-connections ul li {
        width: 155px;
    }
    /*IE6*/
    *html #MenuUL #mainmenu-connections ul {
        width: 80px;
    }
/*Calibri version*/
body.hasCalibri #MenuUL #mainmenu-design_construction ul li {
    width: 190px;
}

    #MenuUL #mainmenu-design_construction ul li {
        width: 180px;
    }
    /*IE6*/
    *html #MenuUL #mainmenu-design_construction ul {
        width: 128px;
        margin-left: 30px;
    }
/*Calibri version*/
body.hasCalibri #MenuUL #mainmenu-the_project ul li {
    width: 173px;
}
    #MenuUL #mainmenu-the_project ul li {
        width: 167px;
    }
    /*IE6*/
    *html #MenuUL #mainmenu-the_project ul {
        width: 118px;
    }
body.hasCalibri #MenuUL #mainmenu-about ul li, body.hasArial #MenuUL #mainmenu-about ul li {
    width: 126px;
}

/*Calibri version*/
body.hasCalibri #MenuUL #mainmenu-about ul li {
    width: 126px;
}
    #MenuUL #mainmenu-about ul li {
        width: 147px;
    }
    /*IE6*/
    *html #MenuUL #mainmenu-about ul li {
        width: 103px;
        white-space: normal;
    }   
    *html #MenuUL #mainmenu-about ul {
        width: 103px;
        margin-left: -10px;
    }
    /*IE8*/
    #MenuUL #mainmenu-about ul {
        margin-left: -10px\0;
    }
#MenuUL li ul li.level2-1 {
    padding-top: 5px;
}

    #MenuUL li ul li:hover, #MenuUL li ul li.sfhover {
        /* Second level list items - Hover */
    }

/* ####################################
   LEVEL 2+ - Anchors (Links)
   ################################## */

#MenuUL li ul li a {
    /* Second level list items - Anchor tags */
    padding: 3px 10px;
    padding-left: 33px;
    color: #b0d451;
}

    #MenuUL li ul li a:hover {
        /* Second level list items - Anchor tags - Hover */
        text-decoration: underline;
      /*  background: #bbe8ff; */
    }