﻿.menu
{
    padding: 0;
    border: 2px solid #555555;
    border-top: 0;
    /* Fondo */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    z-index: 99;
}

.menu-list
{
    margin: 2px 0 3px 0;
    padding: 2px;
    padding-top: 5px;
    list-style: none;
}

.menu-list li.node
{
    position: relative;
    text-align: center;
    padding: 5px;
    list-style: none;
    display: inline;
    border-top: 1px solid #DDF;
    border-left: 1px solid #DDF;
    border-right: 1px solid #DDF;
    border-radius: 10px 10px 0 0;
    /* Fondo */
    background: #f2f9fe; /* Old browsers */
    background: -moz-linear-gradient(top,  #f2f9fe 0%, #d6f0fd 45%, #c7e9f9 50%, #d6f0fd 55%, #f2f9fe 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f9fe), color-stop(45%,#d6f0fd), color-stop(50%,#c7e9f9), color-stop(55%,#d6f0fd), color-stop(100%,#f2f9fe)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f2f9fe 0%,#d6f0fd 45%,#c7e9f9 50%,#d6f0fd 55%,#f2f9fe 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f2f9fe 0%,#d6f0fd 45%,#c7e9f9 50%,#d6f0fd 55%,#f2f9fe 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f2f9fe 0%,#d6f0fd 45%,#c7e9f9 50%,#d6f0fd 55%,#f2f9fe 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f2f9fe 0%,#d6f0fd 45%,#c7e9f9 50%,#d6f0fd 55%,#f2f9fe 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#f2f9fe',GradientType=0 ); /* IE6-9 */
}

.menu-list li.node a
{
    color: Black;
    font-weight: bold;
    font-size: 11px;
    text-decoration: none;
}

.menu-list li.node:hover
{
    cursor: pointer;
    /* Fondo */ 
    background: #494949; /* Old browsers */
    background: -moz-linear-gradient(top,  #494949 0%, #595959 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#494949), color-stop(100%,#595959)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #494949 0%,#595959 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #494949 0%,#595959 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #494949 0%,#595959 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #494949 0%,#595959 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#595959',GradientType=0 ); /* IE6-9 */
}

.menu-list li.node:hover a, .menu-list li.node a:hover
{
    color: #DDDDDD;
    text-decoration: none;
}

    .menu-list li.node .child-menu
    {
        display: none;
        list-style: none;
        text-align: left;
        margin-top: 5px;
        padding: 2px 10px 0 10px;
    }
    
    .menu-list li.node:hover .child-menu
    {
        border: 1px solid #333333;
        border-top: 0;
        min-width: 150px;
        padding: 5px;
        border-radius: 0 0 5px 5px;
        display: block;
        position: absolute;
        margin-left: -1px;
        left: 0;
        right: 0;
        /* Fondo */ 
        background: #595959; /* Old browsers */
        background: -moz-linear-gradient(top,  #595959 0%, #494949 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#595959), color-stop(100%,#494949)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #595959 0%,#494949 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #595959 0%,#494949 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #595959 0%,#494949 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #595959 0%,#494949 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#595959', endColorstr='#494949',GradientType=0 ); /* IE6-9 */
    }
    
        .child-menu li.child-node
        {
            padding: 5px;
        }
        
        .child-menu li.child-node:hover
        {
            padding: 5px;
            background: silver;
            color: Black;
            text-decoration: none;
        }
        
@media only screen and (max-width: 767px) 
{
    .menu-list
    {
        margin: 0 0 1px 0;
        padding: 1px;
    }
    
    .menu-list li.node
    {
        font-size: 10px;
        padding: 3px;
    }
    
    .menu-list li.node:hover .child-menu
    {
        min-width: 85px;
    }
    
    .menu-list li.node .child-menu
    {
        margin-top: 3px;
    }
}

@media only screen and (max-width: 479px) 
{
    .menu-list
    {
        margin: 0 0 1px 0;
        padding: 0px;
    }
    
    .menu-list li.node
    {
        font-size: 10px;
        padding: 2px;
    }
    
    .menu-list li.node:hover .child-menu
    {
        min-width: 85px;
        padding: 1px;
    }
    
    .menu-list li.node .child-menu
    {
        margin-top: 2px;
    }
}