/* Note that the "C" in CSS stands for “cascading”, 
(Cascade combines the importance, origin, specificity, and source 
order of the applicable style declarations to determine exactly—and 
without conflict—which declaration should be applied to any given 
element.)

Style declarations cascade down to elements from many origins and unless
specificly declared a property value of an element is defined by 
inheritance (the process by which properties are passed from parent to 
child elements) even though those properties have not been explicitly 
defined by other means. */


.container {
    width: 100%;
    max-width: 1000px;
}

/* outline "none" removes the dotted border on the active link*/
.toggleMenu {
    display:  none;
    margin-left: 25px;
    width: 28px;
    background-color: transparent;
    outline: none;
}

.horizontalNavIconbar{
    display: block;
    margin-top: 5px;
    width: 28px;
    height: 5px;
    background: #202020;
    border-radius: 3px;
}


@media screen and (min-width: 768px){

    /* Top level <UL> */
    /* first gradient is the darker colour and second the lighter one*/
    /* shadow is the colour and width/offset values of the box shadow*/
    .horizontalNav
    {
        text-align: center;
        margin: 0;
        padding: 0 0 0 0;
        list-style: none; 
    }

    .horizontalNav li
    {
        display: inline-block;
        padding: 0 0 0 0;
        position: relative;
        border-right: 1px solid #ffffff;
    }




    /* <a> Text Properties NOTE .horizontalNav li, required to avoid conflict with other style sheets containing <ul><li> */
    .horizontalNav li, .horizontalNav li a, .horizontalNav li ul li a
    {
        line-height: 1;
        font-size: 1.2em;
        padding: 0px 3px 0px 3px;
        color: #ffffff;
        text-transform: none;
        font: bold Arial, Helvetica !important;
        text-decoration: none;
        text-shadow: 0 1px 0 #000000;       
    }

    /* Hover <ul<li><a> Link colour */    
    .horizontalNav li:hover > a
    {
        color: #fafafa;
    }

    .horizontalNav li:hover > ul
    {
        display: block;
    }

    /* Sub-menu */

    /* top places UL below previous link*/
    .horizontalNav li ul
    {
        list-style: none;
        margin: 0;
        padding: 0;    
        display: none;
        position: absolute;
        top: 40px;
        left: 0;
        z-index: 99999;    
        background: #404040; /* Fallback if gradient used but not supported by the users browser */
        background: -moz-linear-gradient(#404040, #000000);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #404040));
        background: -webkit-linear-gradient(#404040, #000000);    
        background: -o-linear-gradient(#404040, #000000);	
        background: -ms-linear-gradient(#404040, #000000);	
        background: linear-gradient(#404040, #000000);
        -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
        box-shadow: 0 0 2px rgba(255,255,255,.5);	
        border-radius: 5px;
    }

    /* Third level <ul><li><ul><li><ul> */
    .horizontalNav li ul li ul
    {
        top: 0;
        left: 185px; /* has to be set the same as below width */
    }

    /* Bottom shadow/border <ul><lu><ul<li> */
    .horizontalNav li ul li
    {
        float: none;
        margin: 0;
        padding: 0;
        display: block;  
        width: 185px; /* note that on wide screen mobile touch screen devices this needs to be set to accommodate the text and the UP/DOWN arrow */
        -webkit-box-shadow: 0 1px 0 #000000, 0 2px 0 #808080;
        box-shadow: 0 1px 0 #000000, 0 2px 0 #808080;
    }

    /* adds radius to top <ul><li><ul<li> first child */
    .horizontalNav li ul li:first-child
    {
        border-radius: 5px 5px 0 0;
    }

    /* Stops output of bottom shadow/border <ul><li><ul<li> last child */    
    .horizontalNav li ul li:last-child
    {   
        -webkit-box-shadow: none;
        box-shadow: none;    
    }

    /* adds radius to bottom <ul><li><ul<li> last child */
    .horizontalNav li ul li:last-child
    {
        border-radius: 0 0 5px 5px;
    }

    .horizontalNav li ul li a
    {    
        display: inline-block;
        padding: 10px;
        height: auto;
        line-height: 1;
        white-space: pre-line;
        float: none;
        text-transform: none;
        color:#ffffff;
    }


    /* Second Level <ul><li><ul><li><a> link box*/

    /* Second level <ul><li><ul><li><a> link */
    .horizontalNav li ul li a:hover
    {
        background: #0186ba; /* Fallback if gradient used but not supported by the users browser */
        background: -moz-linear-gradient(#04acec,  #0186ba);	
        background: -webkit-gradient(linear, left top, left bottom, from(#f2a023), to(#893600));
        background: -webkit-linear-gradient(#f2a023, #893600);
        background: -o-linear-gradient(#f2a023, #893600);
        background: -ms-linear-gradient(#f2a023, #893600);
        background: linear-gradient(#f2a023, #893600);
    }

    .horizontalNav li ul li:first-child > a
    {
        border-radius: 5px 5px 0 0;
    }

    /* The Second Level <ul><li><ul><li><a> UP arrow linking the box to it's parent'*/
    .horizontalNav li ul li:first-child > a:after
    {
        content: '';
        position: absolute;
        left: 30px;
        top: -8px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 8px solid #404040;
    }

    /* The Third Level <ul><li><ul><li><ul><li><a> UP arrow linking the box to it's parent'*/
    .horizontalNav li ul li ul li:first-child a:after
    {
        left: -8px;
        top: 12px;
        width: 0;
        height: 0;
        border-left: 0;	
        border-bottom: 5px solid transparent;
        border-top: 5px solid transparent;
        border-right: 8px solid #404040;
    }

    /* The Second Level <ul><li><ul><li><a>  UP arrow Hover bottom border linking the box to it's parent'*/
    .horizontalNav ul li:first-child a:hover:after
    {
        border-bottom-color: #f2a023; 
    }

    /* The Third Level <ul><li><ul><li><ul><li><a> UP arrow Hover bottom border linking the box to it's parent'*/
    .horizontalNav li ul li ul li:first-child a:hover:after
    {
        border-right-color: #f2a023; 
        border-bottom-color: transparent; 	
    }


    .horizontalNav li ul li:last-child > a
    {
        border-radius: 0 0 5px 5px;
    }

    /* Clear floated elements */
    .horizontalNav:after 
    {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }

    /* Outputs the UP and DOWN arrows when <li><a> has a child link */
    .horizontalNavSpan{
        line-height: 1;
        float: right;
        padding-top: 8px;
        padding-left: 5px;
        padding-right: 3px;
        font-size: 1.5em;
        color: #ffffff;
    }

}



@media screen and (max-width: 767px) {
    .horizontalNav {
        list-style: none;
        background:#202020;
        margin: 0;
        padding: 0;
    }
    .horizontalNav:before,
    .horizontalNav:after {
        content: " ";  /* Sets the content to Nothing*/
        display: table; 
    }
    .horizontalNav:after {
        clear: both;
    }

    /* top level */
    .horizontalNav li a {
        padding: 10px 10px;      
        font-family: Arial;
        font-size: 1.0em;
        color:#ffffff;
        text-decoration: none;
        font-weight: 800;
        text-transform: none;
    }

    .horizontalNav li {
        position: relative;
        margin: 0;
        padding: 0;
    }

    /* > used to define all <li> that are children of horizontalNav */
    .horizontalNav > li {
        float: none;
        border-top: 1px solid #cccaca;
        background: #202020;
    }

    /* Outputs the UP and DOWN arrows on <li><a> to child link */
    .horizontalNavSpan{
        display: run-in;
        float: right;
        padding-right: 10px;
        font-size: 1.8em;
        color: #ffffff;
    }

    horizontalNav > li > .parent {
        display: inline-block;
    }

    .horizontalNav > li > a {
        display: inline-block;
        min-width: 80%;
    }

    .horizontalNav li ul {
        display: block;
        width: 100%;
        list-style: none;
    }

    /* First level */
    .horizontalNav li  ul {
        position: static;
        left: 0;
        margin: 0;
        padding: 0;
    }

    .horizontalNav > li ul li{
        background: #404040;
        border-top: 1px solid #cccaca;
    }

    .horizontalNav li ul li a {
        display: inline-block;
        position: relative;
        z-index:110;
        min-width: 80%;
        padding-left: 20px;
    }

    .horizontalNav li ul li.hover ul {
        position: static;
        left: 100%;
        top: 0;
    }


    /* Second level link */
    .horizontalNav > li ul li ul li{
        background: #808080;
        border-top: 1px solid #cccaca;
    }

    .horizontalNav li ul li ul li a {
        display: inline-block;
        position: relative;
        z-index:110;
        min-width: 80%;
        padding-left: 30px;
    }

    /* Third level link */

    .horizontalNav > li ul li ul li ul li{
        background: #b2b0b0;
        border-top: 1px solid #cccaca;
    }
    .horizontalNav li ul li ul li ul li a {
        z-index:120;
        min-width: 80%;
        padding-left: 40px;
    }

    .active {
        display: block;
    }
}