/*------------------------------------*\
    NAV
\*------------------------------------*/
/* Bigger screens */
@media only screen and (min-width: 1200px) {
    .nav {
        max-width: 900px;
        font-weight: bold;
        list-style: none;
        margin: auto;
        width: 100%;
        /* Force on top of other elements: */
        position: relative;
        z-index: 99;
    }

    .nav li {
        float: left;
        margin-right: 2px;
        position: relative;
    }

    .nav a {
        display: block;
        padding: 8px 15px 8px 15px;
        color: #0b1969;
        text-decoration: none;
    }

    .nav a:hover {
        color: #000000;
        text-decoration: underline;
    }


    /*--- DROPDOWN ---*/
    ul.nav {
        padding-left: 5px;
        padding-top: 3px;
        /*
        border:1px;
        border-top-style: solid;
        border-color: #0073B2;
        */
    }

    .nav ul {
        background-color: #0073B2; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
        list-style: none;
        position: absolute;
        left: -9999px; /* Hide off-screen when not needed (this is more accessible than display: none;) */
    }

    .nav ul li {
        /*    padding-top: 1px; */
        float: none;
        width: 100%;
        left: -20px;
    }

    .nav ul a {
        white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    }

    .nav li:hover ul { /* Display the dropdown on hover */
        left: 0; /* Bring back on-screen when needed */
    }

    .nav li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
        text-decoration: underline;
    }

    .nav li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
        text-decoration: none;
    }

    .nav li:hover ul li a:hover { /* Here we define the most explicit hover states--what happens when you hover each individual link. */
        color: #000000;
    }

    .navsep {
        border-bottom-style: solid;
        border-bottom-color: #00a5f2;
        border-bottom-width: 2px;
    }
}


/* Smaller screens */
@media only screen and (max-width: 1200px) {
    .nav {
        font-weight: bold;
        zoom: 150%;
        list-style: none;
        margin-top: 1px;
        margin-bottom: 2px;
        float: left; /* Clear floats */
        width: 100%;
        /* Force on top of other elements: */
        position: relative;
        z-index: 99;
    }

    .nav li {
        float: left;
        margin-right: 2px;
        position: relative;
    }

    .nav a {
        display: block;
        padding: 8px 15px 8px 15px;
        color: #0b1969;
        text-decoration: none;
    }

    .nav a:hover {
        color: #000000;
        text-decoration: underline;
    }


    /*--- DROPDOWN ---*/
    ul.nav {
        width: 100%;
        padding-left: 5px;
        padding-top: 3px;
        /*
        border:1px;
        border-top-style: solid;
        border-color: #0073B2;
        */
    }

    .nav ul {
        background-color: #0073B2; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
        list-style: none;
        position: absolute;
        left: -9999px; /* Hide off-screen when not needed (this is more accessible than display: none;) */
    }

    .nav ul li {
        /*    padding-top: 1px; */
        float: none;
        width: 100%;
        left: -20px;
    }

    .nav ul a {
        white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    }

    .nav li:hover ul { /* Display the dropdown on hover */
        left: 0; /* Bring back on-screen when needed */
    }

    .nav li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
        text-decoration: underline;
    }

    .nav li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
        text-decoration: none;
    }

    .nav li:hover ul li a:hover { /* Here we define the most explicit hover states--what happens when you hover each individual link. */
        color: #000000;
    }

    .navsep {
        border-bottom-style: solid;
        border-bottom-color: #00a5f2;
        border-bottom-width: 2px;
    }
}