/**
 Estilos de cascada Menu principal proyecto SNR Generacion de Certificados
 
@autor    Jairo Andres Rivera
@version  1.0
@date     05/06/2015
*/
.navigation {
    padding: 0;
    margin: 0;
    border: 0;
    line-height: 1;
}

.navigation ul,
.navigation ul li,
.navigation ul ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigation ul {
    position: relative;
    z-index: 500;
    float: left;
}

.navigation ul li {
    float: left;
    min-height: 0.05em;
    line-height: 1em;
    vertical-align: middle;
    position: relative;    
    -webkit-transition: border-color 0.8s ease;
    -moz-transition: border-color 0.8s ease;
    -o-transition: border-color 0.8s ease;
    -ms-transition: border-color 0.8s ease;
    transition: border-color 0.8s ease;  
}

.navigation ul li.hover,
.navigation ul li:hover {
    position: relative;
    z-index: 510;
    cursor: default;    
    border-bottom: 2px solid rgba(2, 60, 187, 0.8);
}

.navigation ul ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 520;
    width: 100%;
}

.navigation ul ul li { float: none; }

.navigation ul ul ul {
    top: 0;
    right: 0;
}

.navigation ul li:hover > ul { visibility: visible; }

.navigation ul ul {
    top: 0;
    left: 99%;
    text-align: center;
}

.navigation ul li { 
    float: none;
    text-align: center;
    border-bottom: 1px solid rgb(231, 231, 231);
    border-top: 1px solid rgb(231, 231, 231);
    background-color: rgb(247, 247, 247);
}

.navigation ul ul { margin-top: 0.05em; }

.navigation {
    width: 100%;
    background: #FFFFFF;
    font-family: 'Montserrat', sans-serif !important;
    zoom: 1;
}

.navigation:before {
    content: '';
    display: block;
}

.navigation:after {
    content: '';
    display: table;
    clear: both;
}

.navigation a {
    display: block;
    padding: 0.7em 0.8em;
    color: silver;
    text-decoration: none;
    font-size: 13px;
}

.navigation > ul { width: 100%; }

.navigation ul ul { width: 13em; }

.navigation > ul > li > a {
    border-right: 0.36em solid rgba(44, 63, 133, 0.8);
    color: #5C5C5C;
    font-size: 13px;
}

.navigation > ul > li > a:hover { 
    color: #ffffff;                                 
    font-weight: 600 !important;
}

.navigation > ul > li a:hover,
.navigation > ul > li:hover a { 
    background: rgb(240, 240, 240);
    border-bottom: 1px solid rgb(218, 218, 218);
    border-top: 1px solid rgb(218, 218, 218);    
    font-size: 13px;
    color: rgb(102, 102, 102);
}

.navigation li { position: relative; }

.navigation ul li.has-sub > a:after {
    content: '»';
    position: absolute;
    right: 1em;
}

.navigation ul ul li.first {
    -webkit-border-radius: 0 3px 0 0;
    -moz-border-radius: 0 3px 0 0;
    border-radius: 0 3px 0 0;
}

.navigation ul ul li.last {
    -webkit-border-radius: 0 0 3px 0;
    -moz-border-radius: 0 0 3px 0;
    border-radius: 0 0 3px 0;
    border-bottom: 0;
}

.navigation ul ul {
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}

.navigation ul ul {
    border: 1px solid #BDBDBD;
}

.navigation ul ul a { color: #ffffff; }

.navigation ul ul a:hover { color: #ffffff; }

.navigation ul ul li { 
    border-bottom: 1px solid #DDDDDD;
}

.navigation ul ul li:hover > a {
    color: black;    
}

.navigation.align-right > ul > li > a {
    border-left: 0.3em solid #34A65F;
    border-right: none;
}

.navigation.align-right { float: right; }

.navigation.align-right li { text-align: right; }

.navigation.align-right ul li.has-sub > a:before {
    content: '+';
    position: absolute;
    top: 50%;
    left: 15px;
    margin-top: -6px;
}

.navigation.align-right ul li.has-sub > a:after { content: none; }

.navigation.align-right ul ul {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -100%;
    z-index: 598;
    width: 100%;
}

.navigation.align-right ul ul li.first {
    -webkit-border-radius: 3px 0 0 0;
    -moz-border-radius: 3px 0 0 0;
    border-radius: 3px 0 0 0;
}

.navigation.align-right ul ul li.last {
    -webkit-border-radius: 0 0 0 3px;
    -moz-border-radius: 0 0 0 3px;
    border-radius: 0 0 0 3px;
}

.navigation.align-right ul ul {
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}