/* css3 menu */
ul#css3-menu{
    width: 940px;
    min-width: 940px;
    margin: 0 auto;
    list-style: none;
    font-family: 'Open Sans', Arial, "MS Trebuchet", sans-serif;
    height: 46px;
    padding: 0;
}

ul#css3-menu > li{
    display: block;
    float: left;
    -webkit-transition: background .4s linear;
    -moz-transition: background .4s linear;
    -ms-transition: background .4s linear;
    -o-transition: background .4s linear;
    transition: background .4s linear;

    <!--[if IE]>
    position: relative;
    <![endif]-->
}

ul#css3-menu > li:first-child{
    border-left: none !important;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;

    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;

    -ms-border-top-left-radius: 4px;
    -ms-border-bottom-left-radius: 4px;

    -o-border-top-left-radius: 4px;
    -o-border-bottom-left-radius: 4px;

    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

ul#css3-menu > li:last-child{
    border-right: none !important;
}


ul#css3-menu > li > a{
    display: block;
    padding: 15px 30px;
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-weight: bold;
}

/*
ul#css3-menu > li:hover > div{
        -webkit-transform: translateY(-80px);
        -moz-transform: translateY(-80px);
        -ms-transform: translateY(-80px);
        -o-transform: translateY(-80px);
        transform: translateY(-80px);
        
}
*/
/*visibility: visible;*/

ul#css3-menu > li > div{
    -webkit-transition: -webkit-transform .2s linear;
    -moz-transition: -moz-transform .2s linear;
    -ms-transition: -ms-transform .2s linear;
    -o-transition: -o-transform .2s linear;
    transition: transform .2s linear;
    text-align: center;
    margin: 0 auto;
    -webkit-transform: translateY(-60px);
    -moz-transform: translateY(-60px);
    -ms-transform: translateY(-60px);
    -o-transform: translateY(-60px);
    transform: translateY(-60px);
    width: 37px;
    height: 37px;
    /*visibility: hidden;*/
    margin-bottom: -37px;
    z-index: -1;

    /*	<!--[if IE]>
            margin-top: -60px;
            <![endif]-->*/

}

ul#css3-menu > li > div{
    background: url(../img/icons-dark.png) 0 0 no-repeat;
}

ul#css3-menu.blue > li > div{
    background: url(../img/icons-blue.png) 0 0 no-repeat;
}

ul#css3-menu.green > li > div{
    background: url(../img/icons-green.png) 0 0 no-repeat;
}

ul#css3-menu.red > li > div{
    background: url(../img/icons-red.png) 0 0 no-repeat;
}









/* icons */
ul#css3-menu > li > div.cloud{ background-position: -28px -27px; }
ul#css3-menu > li > div.lock{ background-position: -92px -27px; }
ul#css3-menu > li > div.inbox{ background-position: -156px -27px; }
ul#css3-menu > li > div.chat{ background-position: -220px -27px; }
ul#css3-menu > li > div.microphone{ background-position: -286px -27px; }
ul#css3-menu > li > div.email{ background-position: -348px -27px; }
ul#css3-menu > li > div.briefcase{ background-position: -412px -27px; }
ul#css3-menu > li > div.trolley{ background-position: -477px -27px; }
ul#css3-menu > li > div.clock{ background-position: -540px -27px; }
ul#css3-menu > li > div.user{ background-position: -605px -27px; }
ul#css3-menu > li > div.settings{ background-position: -668px -27px; }
ul#css3-menu > li > div.music{ background-position: -734px -27px; }

ul#css3-menu > li > div.twitter{ background-position: -28px -92px; }
ul#css3-menu > li > div.pencil{ background-position: -92px -92px; }
ul#css3-menu > li > div.frame{ background-position: -156px -92px; }
ul#css3-menu > li > div.star{ background-position: -220px -92px; }
ul#css3-menu > li > div.key{ background-position: -286px -92px; }
ul#css3-menu > li > div.chart{ background-position: -348px -92px; }
ul#css3-menu > li > div.apple{ background-position: -412px -92px; }
ul#css3-menu > li > div.file{ background-position: -477px -92px; }
ul#css3-menu > li > div.image{ background-position: -540px -92px; }
ul#css3-menu > li > div.folder{ background-position: -605px -92px; }
ul#css3-menu > li > div.camera{ background-position: -668px -92px; }
ul#css3-menu > li > div.search{ background-position: -734px -92px; }

ul#css3-menu > li > div.dribbble{ background-position: -28px -155px; }
ul#css3-menu > li > div.rss{ background-position: -92px -155px; }
ul#css3-menu > li > div.target{ background-position: -156px -155px; }
ul#css3-menu > li > div.debug{ background-position: -220px -155px; }
ul#css3-menu > li > div.terminal{ background-position: -283px -155px; }
ul#css3-menu > li > div.movie{ background-position: -348px -155px; }
ul#css3-menu > li > div.home{ background-position: -412px -155px; }
ul#css3-menu > li > div.globe{ background-position: -477px -155px; }
ul#css3-menu > li > div.pin{ background-position: -540px -155px; }
ul#css3-menu > li > div.info{ background-position: -605px -155px; }
ul#css3-menu > li > div.eye{ background-position: -668px -155px; }
ul#css3-menu > li > div.heart{ background-position: -734px -155px; }

ul#css3-menu > li > div.calendar{ background-position: -28px -218px; }
ul#css3-menu > li > div.monitor{ background-position: -92px -218px; }
ul#css3-menu > li > div.iphone{ background-position: -156px -218px; }
ul#css3-menu > li > div.drop{ background-position: -220px -218px; }
ul#css3-menu > li > div.location{ background-position: -286px -218px; }
ul#css3-menu > li > div.tag{ background-position: -348px -218px; }
ul#css3-menu > li > div.old-phone{ background-position: -412px -218px; }
ul#css3-menu > li > div.headphones{ background-position: -477px -218px; }
ul#css3-menu > li > div.skype{ background-position: -540px -218px; }
ul#css3-menu > li > div.gift{ background-position: -605px -218px; }
ul#css3-menu > li > div.cone{ background-position: -668px -218px; }
ul#css3-menu > li > div.settings{ background-position: -734px -218px; }

ul#css3-menu > li > div.tick{ background-position: -28px -282px; }
ul#css3-menu > li > div.bell{ background-position: -92px -282px; }
ul#css3-menu > li > div.coffee{ background-position: -156px -282px; }
ul#css3-menu > li > div.basket{ background-position: -220px -282px; }
ul#css3-menu > li > div.flag{ background-position: -286px -282px; }
ul#css3-menu > li > div.ipod{ background-position: -348px -282px; }
ul#css3-menu > li > div.trash{ background-position: -412px -282px; }
ul#css3-menu > li > div.compass{ background-position: -477px -282px; }
ul#css3-menu > li > div.typography{ background-position: -540px -282px; }
ul#css3-menu > li > div.keynote{ background-position: -605px -282px; }
ul#css3-menu > li > div.target-1{ background-position: -668px -282px; }
ul#css3-menu > li > div.crop{ background-position: -734px -282px; }

ul#css3-menu > li > div.wallet{ background-position: -28px -346px; }
ul#css3-menu > li > div.contact{ background-position: -92px -346px; }
ul#css3-menu > li > div.bookmark{ background-position: -156px -346px; }
ul#css3-menu > li > div.camcorder{ background-position: -220px -346px; }
ul#css3-menu > li > div.database{ background-position: -286px -346px; }
ul#css3-menu > li > div.card{ background-position: -350px -346px; }
ul#css3-menu > li > div.button{ background-position: -413px -346px; }
ul#css3-menu > li > div.neutron{ background-position: -477px -346px; }
ul#css3-menu > li > div.windows{ background-position: -540px -346px; }
ul#css3-menu > li > div.battery{ background-position: -605px -346px; }
ul#css3-menu > li > div.code{ background-position: -668px -346px; }
ul#css3-menu > li > div.music{ background-position: -734px -346px; }









/* dark theme */
ul#css3-menu.dark{
    background: #444;
    -webkit-box-shadow: inset 0 0 8px #222;
    -moz-box-shadow: inset 0 0 8px #222;
    -ms-box-shadow: inset 0 0 8px #222;
    -o-box-shadow: inset 0 0 8px #222;
    box-shadow: inset 0 0 8px #222;
}

ul#css3-menu.dark > li{
    border-right: 1px #333 solid;
    border-left: 1px #555 solid;
}

ul#css3-menu.dark > li:hover{
    background: #222;
}









/* blue theme */
.navbar-wrapper {
    background: #989A37;
    background-color:#989A37; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#989A37, offX=0, offY=0, positive=true);  
    box-shadow: 0 -10px 8px -10px #2B6533 inset, 0 10px 8px -10px #2B6533 inset; 
    -webkit-box-shadow: 0 -10px 8px -10px #2B6533 inset, 0 10px 8px -10px #2B6533 inset; 
    -moz-box-shadow: 0 -10px 8px -10px #2B6533 inset, 0 10px 8px -10px #2B6533 inset;
}
ul#css3-menu.blue{
    background: #989A37;
    background-color:#989A37; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#989A37, offX=0, offY=0, positive=true);  
    box-shadow: 0 -10px 8px -10px #2B6533 inset, 0 10px 8px -10px #2B6533 inset; 
    -webkit-box-shadow: 0 -10px 8px -10px #2B6533 inset, 0 10px 8px -10px #2B6533 inset; /* Desfarce de cima e de baixo. */
    -moz-box-shadow: 0 -10px 8px -10px #2B6533 inset, 0 10px 8px -10px #2B6533 inset;  
}

ul#css3-menu.blue > li{
    border-right: 1.5px #2B6533 solid;
    border-left: 1px #7bcd85 solid;
    height: 46px;
}

ul#css3-menu.blue > li:hover{
    background: #2B6533;
}









/* green theme */
ul#css3-menu.green{
    background: #4BA155;
    -webkit-box-shadow: inset 0 0 8px #2e7336;
    -moz-box-shadow: inset 0 0 8px #2e7336;
    -ms-box-shadow: inset 0 0 8px #2e7336;
    -o-box-shadow: inset 0 0 8px #2e7336;
    box-shadow: inset 0 0 8px #2e7336;
}

ul#css3-menu.green > li{
    border-right: 1px #2e7336 solid;
    border-left: 1px #7bcd85 solid;
}

ul#css3-menu.green > li:hover{
    background: #2e7336;
}









/* red theme */
ul#css3-menu.red{
    background: #CB2F32;
    -webkit-box-shadow: inset 0 0 8px #a81f22;
    -moz-box-shadow: inset 0 0 8px #a81f22;
    -ms-box-shadow: inset 0 0 8px #a81f22;
    -o-box-shadow: inset 0 0 8px #a81f22;
    box-shadow: inset 0 0 8px #a81f22;
}

ul#css3-menu.red > li{
    border-right: 1px #a81f22 solid;
    border-left: 1px #de6062 solid;
}

ul#css3-menu.red > li:hover{
    background: #a81f22;
}