﻿/** LAYOUT **/
#main_navigation
{
	float:left;
	width:auto;
	padding-left:0px;
	font-size:1.1em;
}

#main_navigation ul 
{
	list-style: none;
}

    #main_navigation ul.navOn1
    {
	    margin:0;
        float:left;
        z-index:10;
        width:76em;
        padding:0 0 0 0;
    }

/** FIRST LEVEL **/
    ul.navOn1 li {
        display:block;
        position: relative;
        width:11.29em;
        margin:0px 0px 0px 0.3em;
        float:left;
        z-index:10;
    }
    
    ul.navOn1 li:first-child 
    {
        width:11.33em;
        margin:0 0 0 0;
    }

    ul.navOn1 li a {
        display:block;
	    text-align:center;
        z-index:10;
        font-size:1.0em;
        background:#1D97C3;
        padding:0.3em 0.4em;
        font-weight:bold;
    }
    
    ul.navOn1 li a.menu-on
    {
        background:#F0037F;
    }
    
    ul.navOn1 li:first-child a {
        background-image:none;
    }

/** SECOND LEVEL **/
    ul.navOn1 li ul {
        width:11.1em;
        display:none;
        position: absolute;
        z-index:200;
        left: 0; /* Set 1px less than menu width */
    }

    ul.navOn1 li li {
        margin:0px;
        display:block;
        float:left;
        clear:both;
        z-index:200;
    }

    ul.navOn1 ul li a 
    {
        width:11.5em;
        padding: 4px 4px 4px 4px;
        z-index:3000;
        font-weight:normal;
    }

/** THIRD LEVEL **/
    ul.navOn1 li li ul{
        left:100%;
        top:0;
        z-index:3000;
        position:absolute;
	    font-size:1.0em;
    }

/** STYLING & COLOURS **/

    ul.navOn1 li ul {
        background-color:#fff;
        border:1px solid white;
        border-bottom:0;
        padding-top:0px;
    }

    ul.navOn1 li li {
        border-top:0;    
    }

    ul.navOn1 li a,
    ul.navOn1 li a:visited,
    ul.navOn1 li a:link {
        color:#fff;
        text-decoration:none;
    }
    
    ul.navOn1 li li a,
    ul.navOn1 li li a:visited,
    ul.navOn1 li li a:link
    {
        line-height:1.0em; 
        background-color:#fff;
        border-bottom:1px solid white;
        background-image:none;
        color:#002C77;
        font-size:0.9em;
        text-transform:capitalize;
    }

    /* Hover Colours */
    ul.navOn1 li a:hover,
    ul.navOn1 li a:active,
    ul.navOn1 li a:focus{
        background-color:#fff;
        color:#002C77;
    }

    ul.navOn1 li li a:hover{
        text-decoration: none;
        background-color:#002C77;
        color:#fff;
    }

    /** Ensures that the parent <a> remains 'on' **/
    ul.navOn1 li:hover>a {
        background-color:#fff;
        color:#002C77;
    }

/* MAGIC, MAGIC, MAGIC */
    /* FIRST LEVEL */
    .navOn1 li:hover ul, .navOn1 li.over ul { display: block; }
    .navOn1 li:hover ul ul, .navOn1 li.over ul ul { display: none; }

    /* SECOND LEVEL */
    .navOn1 li:hover li:hover ul, .navOn1 li.over li.over ul{display:block}
    .navOn1 li:hover li:hover ul ul, .navOn1 li.over li.over ul ul{display:none}

    /* THIRD LEVEL */
    .navOn1 li:hover li:hover li:hover ul, .navOn1 li.over li.over li.over ul{display:block}
    .navOn1 li:hover li:hover li:hover ul ul, .navOn1 li.over li.over li.over ul ul{display:none}

    /* FOURTH LEVEL */
    .navOn1 li:hover li:hover li:hover li:hover ul, .navOn1 li.over li.over li.over li.over ul{display:block}
    .navOn1 li:hover li:hover li:hover li:hover ul ul, .navOn1 li.over li.over li.over li.over ul ul{display:none}