@media screen
{
    #menu {
    color: #ddd;
    margin: 0px;
    padding: 0px;
    width:1000px;
    }

    #menu li{
    display: inline;
    margin: 0px;
    padding: 0px;
    line-height:1.4em;
    }

    #menu h2 {
	    font-size: 1.0em;
	    font-family: Arial,Helvetica,sans-serif;
	    font-weight: 600;
	    letter-spacing: 1px;
	    color: #eee;
	    display: inline;
	    margin: 0px;
	    padding: 0px;
    }


    #menu li a
    {
	    color: #eee;
	    text-decoration: none;
	    padding: 7px 0px 10px 0px;
	    width: 16.63%;
	    text-align:center;
	    display: inline-block;
	    /* background-image: url(MegaMenu_images/menu_divider.png);  <- this is now applied via MegaMenu.ascx for IE */
	    margin-left:-4px;
	    background-position: left;
	    background-repeat:no-repeat;
	    /* positioned left, as first child is supported by all major browsers */ 
    }


    #menu[id] li a
    {
	    background-image: url(MegaMenu_images/menu_divider.png);
    }

    /* Reset default li within megas */
    #mega-dropdown li 
    {
	    padding: 0px;
    }


    #menu li:first-child a 
    {
    /* Make sure the first item doesn't get a divider */
	    background-image: none;
	    margin-left: 0px;
    }

    /* hovering is the class applied by JQ to make it display/change */ 
    #menu li.hovering a
    {
	    color: #333;
	    background-image:url(MegaMenu_images/main_nav_hover.gif);
	    background-repeat:no-repeat;
	    background-position:left;
    } 




    /* these are required to overide existing styles for the course_home class applied in the home page */ 

    #menu .course_home.hovering .mega a
    {
        color: #333;
        background-image: none ;
    }

    #menu .course_home.hovering .mega h2 a,
    #menu .course_home h2 a
    {
	    color: #eee ;
    }

    #menu .course_home.hovering .mega-dropdown
    {
	    border-right: none;
    }

    #menu .course_home h2 a
    {
	    background-image: none ;
    }




    #menu div {  /* Hides mega divs by default */
	    display: none;
    }

    /* _________________ Default Megas ___________________*/
    #menu .mega div, 
    #menu .course_home div 
    { /* Styles the Mega itself - generic at the mo - may be split up */
	    border: 1px solid #bbb;
	    border-top: none;
      /* default width only - usually over written by specific mega class */
	    position: absolute;
	    top: 33px;
	    left: 0px;
	    padding: 7px 5px;
	    background: #f7f7f7;
	    color: #000;
	    font-size: 12px;
	    font-family:Arial, Helvetica, sans-serif;
	    z-index: 2000;
    }

    #menu li.hovering .mega-dropdown {
    /* hovering is the class applied by JQ to make it display */
	    display: block;
    }



    /* The hover style is grouped with the Courses sub-menu, as they should be the same. Line 200ish

    ul#menu li.mega div a:hover {
	    background-color:#FFFFFF;
	    background-position:right;
	    background-repeat:no-repeat;
	    background-image: url(MegaMenu_images/mega_dropdown_rollover.gif);
    } */

    /* _________________ Individual Megas ___________________*/
    #menu li.mega #mega_courses, 
    #menu li.course_home #mega_courses  { /* Styles the Courses Mega only */
	    width: 195px;
	    height: 350px;
	    padding-right: 0px;
	    background: #eee;
	    left: 0px;
	    padding-left: 0px;
    }

    #menu li.mega #mega_courses ul, 
    #menu li.course_home #mega_courses ul {
	    padding: 0px;
	    padding-bottom:10px;
    }

    #menu li.mega #mega_courses li, 
    #menu li.course_home #mega_courses li {
	    line-height: 14px;
	    padding: 0px;
	    display:block;
    }

    #menu li.mega #mega_courses li a, 
    #menu li.mega #mega_courses li a:link,
    #menu li.course_home #mega_courses li a, 
    #menu li.course_home #mega_courses li a:link {
	    padding-left: 17px;
	    background-image: none;
	    background-color: transparent;
	    padding-bottom: 5px;
	    padding-top: 6px;
	    width: 178px;
	    background-image:url(MegaMenu_images/mega_menu_ind_grp_item.gif);
    }

    /* Style both a:hover and hovering link the same. Makes it sticky AND responsive */
    #menu li.mega #mega_courses li.hovering a, 
    #menu li.mega #mega_courses li a:hover,
    #menu li.course_home #mega_courses li.hovering a, 
    #menu li.course_home #mega_courses li a:hover {
	    text-decoration: none;
	    color: #a8142d;
	    background-color: #f7f7f7;
	    background-image: url(MegaMenu_images/mega_menu_ind_grp_rollover.gif);
	    background-repeat: repeat-y;
	    background-position:center;
	    display: block;
    }

    #menu li.mega #mega_campuses { /* Styles the Campuses Mega only */
	    width: 988px;
	    left: 0px;
    }

    #menu li.mega #mega_apply { /* Styles the apply Mega only */
	    width: 988px;
	    left: 0px;
    }

    #menu li.mega #mega_services { /* Styles the services Mega only */
	    width: 200px;
	    left: 49.88%;
    }

    #menu li.mega #mega_employers { /* Styles the employers Mega only */
	    width: 400px;
	    left: 588px;
    }

    #menu li.mega #mega_about { /* Styles the about Mega only */
	    width: 350px;
	    left: 639px;
    }


    /* _________________ Course sub-menu _________________ */
    #menu .mega-dropdown li.hovering .sub-menu {
    /* hovering is the class applied by JQ to make it display */
	    display: block;
    }

    #menu li.mega .sub-menu,
    #menu li.course_home .sub-menu  {
	    background-color:#f7f7f7;
	    width: 500px; /* default width only - usually over written by specific mega class */
	    height: 350px;
	    position: absolute;
	    top: 0px;
	    left: 195px;
	    padding: 5px;
	    border-left: none;
	    padding: 7px 5px;
	    margin: 0px;
    }

    /* Finsh styling the default Mega dropdowns, and also Courses sub menu - they need to be the same. Eg Rollovers, lists etc...*/
    #menu li.mega div ul,#menu li.mega div.sub-menu ul,
    #menu li.course_home div ul, #menu li.course_home div.sub-menu ul {
	    margin-left: 0px;
	    padding-left: 0px;
	    margin-top: 0px;
    }

    #menu #mega_international h3
    {
	    margin-right:30px;
    }


    #menu li.mega div.not_courses li, #menu li.mega div#mega_courses div.sub-menu li,
    #menu li.course_home div.not_courses li, #menu li.course_home div#mega_courses div.sub-menu li {
	    list-style-type:none;
	    padding: 0px 0px 0px 0px;
	    margin: 0px 0px 0px 0px;
	    line-height: 15px;

    }

    #menu li.mega div.not_courses a, #menu li.mega div#mega_courses div.sub-menu a, 
    #menu li.course_home div.not_courses a, #menu li.course_home div#mega_courses div.sub-menu a {
    color: #444;
    background-image: none;
    text-decoration: none;
    display: block;
    margin-left: 5px;
    padding: 3px 0px 3px 10px;
    text-align:left;
    width: auto;

    }

    #menu li.mega div a, #menu li.course_home div a {
	    text-align: left;

    }


    #menu li.mega div#mega_courses div.sub-menu li a:hover, #menu li.mega div.not_courses a:hover,
    #menu li.course_home div#mega_courses div.sub-menu li a:hover, #menu li.course_home div.not_courses a:hover {
	    background-color:#FFFFFF;
	    background-position:right;
	    background-repeat: repeat-y;
	    background-image: url(MegaMenu_images/mega_dropdown_rollover.gif);
	    border-left: #dbdbdb 5px solid;
	    margin-left: 0px;
	    padding-left: 10px;
	    color: #a8142d;
	
    }

    div.sub-menu table {
	    width: 100%;
    }

    div.sub-menu tr {
	    vertical-align:top;	
    }

    div.sub-menu td,  div.sub-menu th {
    width: 50%;
	
    }

    div.sub-menu table, div.sub-menu td,  div.sub-menu th {
	    padding: 0px;
	    margin: 0px;
	
    }

    div.sub-menu h3, div.sub-menu h4, #menu li.mega div h3, #menu li.mega div h4, 
    #menu li.course_home div h3, #menu li.course_home div h4{
	    padding: 7px 0px;
	    margin: 0px;
	    margin-left: 15px;
	    line-height: 1.1em;
	
    }

    /* target ie6 & ie7 only */

    #menu li.mega #mega_apply {
	    *left: 0%;
	    *left: 0px;
    }


    #menu li.mega #mega_services { 
	    *left: 48.9%;
    }

    * html #menu .mega div,  /* ie6 only */
    * html #menu .course_home div
    {
	    top:100%;
    }

    * html #menu li.mega #mega_courses li,  /* ie6 only */
    * html #menu li.course_home #mega_courses li 
    {
	    line-height: 10px;
    }

    * html .IndustryGroupMega  /* ie6 only */
    {
     border:solid 1px #EEEEEE;
    }

    #menu li a
    {
	    *width: 163px;
	    *margin-left:0px;
    }

    * html div.sub-menu h3, 
    * html div.sub-menu h4, 
    * html #menu li.mega div h3, 
    * html #menu li.mega div h4, 
    * html #menu li.course_home div h3, 
    * html #menu li.course_home div h4
    {
	    padding: 5px 0px;
    }

    #menu li.mega #mega_courses ul, 
    #menu li.course_home #mega_courses ul {
	    *padding-bottom:0px;
    }

    * html .ie6_no_divider
    {
	    background-image:none !important;
    }

    * html #menu .mega.hovering .ie6_no_divider 
    {
        background-image:url(MegaMenu_images/main_nav_hover.gif)!important;
	    color:#333333 !important;
    }

    * html #menu .course_home .ie6_no_divider
    {
	    background-image:none !important;
	    color:#EEEEEE !important;
    }

    /* end ie6 & ie7 hacks */
}