li.quem {background-image:url(../img/mini-icons/abc.png);}
li.missao {background-image:url(../img/mini-icons/missao.png)}
li.membros {background-image:url(../img/mini-icons/equipa.png)}
li.ajuda {background-image:url(../img/mini-icons/ajudar.png)}
li.proj {background-image:url(../img/mini-icons/projectos.png)}
li.gao {background-image:url(../img/mini-icons/gao.png)}
li.forma{background-image:url(../img/mini-icons/formacao.png)}
li.event {background-image:url(../img/mini-icons/eventos.png)}
li.estat {background-image:url(../img/mini-icons/estatistica.png)}
li.volunt {background-image:url(../img/mini-icons/voluntariado.png)}
li.parcei {background-image:url(../img/mini-icons/parceiros.png)}
li.galer {background-image:url(../img/mini-icons/galeria.png)}
li.press {background-image:url(../img/mini-icons/news.png)}
li.subst {background-image:url(../img/mini-icons/substancias.png)}
li.fale {background-image:url(../img/mini-icons/fale-connosco.png)}
li.contact {background-image:url(../img/mini-icons/contactos.png)}


.color-icon{ visibility:hidden; display:none; position: absolute; top:0; right:15px; z-index:40;}

.color-icon img {visibility:hidden; display:none; width:100%; border-bottom-left-radius: 22px 22px; border:4px solid #ffffff; }


/* NAV BAR FLYOUT */

.nav-bar {  margin-left: 0; margin-top:0;  padding: 0;border:0; visibility:hidden; display:none }
.nav-bar > li {float: left;display: block;position: relative;padding: 0;margin:0;width:100px; }

.nav-bar > li:first-child {}
.nav-bar > li:last-child {}
 
.nav-bar > li.active { background: #eeeeee; border-color: #2284a1; }
.nav-bar > li.active > a { color: white; cursor: default;}
.nav-bar > li.active:hover { background: #2ba6cb; cursor: default; border:0 }
.nav-bar > li:hover { 

}
.nav-bar > li > a { color: #e6e6e6; }
.nav-bar > li ul { margin-bottom: 0; }
.nav-bar > li .flyout { display: none; }
.nav-bar > li.has-flyout > a:first-child { position: relative; }
.nav-bar > li.has-flyout > a:first-child:after {  display: block;  }

.nav-bar > li.has-flyout > a.flyout-toggle {  border-left: 0 !important; position: relative; right: 0; top: 0; padding: 0; z-index: 2; display: block;}

.nav-bar > li.has-flyout.is-touch > a:first-child { padding-right: 0px; }
.nav-bar > li.has-flyout.is-touch > a.flyout-toggle { border-left: 1px dashed #666; }
.nav-bar > li > a:first-child { position:relative; padding: 0px; display: block; text-decoration: none; font-size: 14px; }
.nav-bar > li > input { margin: 0 10px;}




.flyout {
padding: 20px;
background-color:#eee;
background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #eeeeee 100%);  
background-image: -moz-linear-gradient(bottom, #ffffff 0%, #eeeeee 100%);  
background-image: -ms-linear-gradient(bottom, #ffffff 0%, #eeeeee 100%);  
background-image: -o-linear-gradient(bottom, #ffffff 0%, #eeeeee 100%);  
background-image: linear-gradient(bottom, #ffffff 0%, #eeeeee 100%);
z-index: 90;

}


.flyout p { line-height: 1.2; font-size: 13px; }
.flyout *:first-child { margin-top: 0; }
.flyout *:last-child { margin-bottom: 0; }


.flyout.full { 
position:fixed; 
padding: 20px 0; 
with: 100%; 
border-bottom:1px solid #dddddd;
left: 0;
right: 0;
margin-top: 2px;
margin-bottom: 0;
max-width: 100em;
}


ul.flyout, .nav-bar li ul { padding: 0; list-style: none; }
ul.flyout li, .nav-bar li ul li { }
ul.flyout li a, .nav-bar li ul li a {color: #333333; display: block; height: auto; line-height: 1;}

ul.flyout li a:hover, ul.flyout li a:focus, .nav-bar li ul li a:hover, .nav-bar li ul li a:focus {color: #333333; }

ul.flyout li.active, .nav-bar li ul li.active { margin-top: 0; border-top: 1px solid #4d4d4d; border-left: 4px solid #1a1a1a; }

ul.flyout li.active a, .nav-bar li ul li.active a{background: #4d4d4d; border: none; color: #fff; height: auto; margin: 0; position: static; top: 0; -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; }