#nav
{
    list-style: none outside;
    font-weight: bold;
    margin-bottom: 10px;
    margin-left: -40px;
    /* Clear floats */
    float: left;
    width: 100%;
    /* Bring the nav above everything else--uncomment if needed.*/
    position: relative;
    z-index: 5;
}

    #nav li
    {
        float: left;
        margin-right: 10px;
        position: relative;
        width:100%;
    }

    #nav a
    {
        display: block;
        color: #000;
        background-color: #CDBE24;
        text-decoration: none;
        font-size: 14px;
        padding: 8px 13px;
        white-space: nowrap;
    }

        #nav a:hover
        {
            color: #fff;
        }

    /*--- DROPDOWN ---*/
    #nav ul
    {
        list-style: none;
        position: absolute;
        left: -9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
    }

        #nav ul li
        {
            float: left;
        }

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

    #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: none;
    }

    #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. */
    }


.button.radius
{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.button
{
    background: #3CDDFF;
    display: inline-block;
    text-align: left;
    padding: 8px 9px 6px;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    position: relative;
    cursor: pointer;
    font-family: 'EnriquetaBold';
    text-transform: uppercase;
    font-size: 11px;
}



.trigger a.button:after
{
    content: '';
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #000;
    position: relative;
    left: 170px;
    top: 11px;
}

.trigger .sub
{
    z-index: 20;
    display: none;
    position: absolute;
    top: 26px;
    left: 0;
    background: #CDBE24;
    margin: 0;
    min-width: 216px;
    padding: 10px;
    -moz-border-radius: 0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;
    border-radius: 0 5px 5px 5px;
}

.trigger:hover .sub
{
    display: block;
    width: 100%;
}

.sub a
{
    color: #000;
    font-size: 14px;
}