/**
 * Name: Nice Menu
 * Version: 0.1
 * Author: Marcell Jusztin - http://www.marcelljusztin.com
 * Description: A simple, elegant, colorful, CSS3 animated menu
 * Tags: css3, animation, menu, simple, elegant, colourful
 * License: http://creativecommons.org/licenses/by-sa/3.0/
**/

ul.nice-menu, ul.nice-menu > li {
    list-style: none;
    /*  margin-top: 30px;*/
    width: 300px;
    list-style-image: none;
}

ul.nice-menu {
    margin-left: -37px;
}

@-moz-keyframes expand {  
    0% {
    width: 5px;
    padding-left: 0px;
}

100% {
    width: 200px;
    padding-left: 20px;
}
}

@-moz-keyframes expand-bounce {
    0% {
    width: 5px;
    padding-left: 0px;
}

50% {
    width: 200px;
}

70% {
    width: 170px;
}

80% {
    width: 200px;
}

90% {
    width: 190px;
}

100% {
    width: 200px;
    padding-left: 20px;
}
}

@-webkit-keyframes expand {  
    0% {
    width: 5px;
    padding-left: 0px;
}

100% {
    width: 200px;
    padding-left: 20px;
}
}

@-webkit-keyframes expand-bounce {  
    0% {
    width: 5px;
    padding-left: 0px;
}

50% {
    width: 200px;
}

70% {
    width: 170px;
}

80% {
    width: 200px;
}

90% {
    width: 190px;
}

100% {
    width: 200px;
    padding-left: 20px;
}
}

@-moz-keyframes shrink {

    0% {
    width: 200px;
    padding-left: 20px;
}

100% {
    width: 5px;
    padding-left: 0px;
}
}

@-moz-keyframes shrink-bounce {

    0% {
    width: 200px;
    padding-left: 20px;
}

50% {
    width: 5px;
}

70% {
    width: 35px;
}

80% {
    width: 5px;
}

90% {
    width: 15px;
}

100% {
    width: 5px;
    padding-left: 0px;
}
}

@-webkit-keyframes shrink {

    0% {
    width: 200px;
    padding-left: 20px;
}

100% {
    width: 5px;
    padding-left: 0px;
}
}

@-webkit-keyframes shrink-bounce {

    0% {
    width: 200px;
    padding-left: 20px;
}

50% {
    width: 5px;
}

70% {
    width: 35px;
}

80% {
    width: 5px;
}

90% {
    width: 15px;
}

100% {
    width: 5px;
    padding-left: 0px;
}
}

ul.nice-menu li {
    width: 5px;
    height: 30px;
    line-height: 20px;
    padding: 0px 0px 0px 0px;
    margin-top: 3px;
    background: transparent;
    width: 5px;
}

ul.nice-menu.tight li {
    margin-top: 0 !important;
}

ul.nice-menu li {
    -moz-animation-name: shrink;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-name: shrink;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu.bounce li {
    -moz-animation-name: shrink-bounce;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-name: shrink-bounce;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu li:hover {
    width: 200px;
    padding-left: 20px;
    -moz-animation-name: expand;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-name: expand;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu.bounce li:hover {
    -moz-animation-name: expand-bounce;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-name: expand-bounce;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu a {
    width: 200px;
    text-decoration: none;
    font-size: 14px;
    color: #000;
    position: absolute;
    padding: 5px 0px;
    padding-left: 20px;
}

ul.nice-menu a:hover {
    width: 200px;
    text-decoration: none;
    font-size: 14px;
    color: #FFF;
    text-shadow: 0px 0px 3px #333;
    font-weight: bold;
    position: absolute;
    padding: 5px 0px;
    padding-left: 20px;
}

ul.nice-menu li.green {
    background: #009933;
}

ul.nice-menu li.orange {
    background: #1487d4;
}

ul.nice-menu li.red {
    background: #69c;
}
ul.nice-menu .active-trail {
    font-weight: bold;
}