TZU/css/menubar.css

@import url(https://fonts.googleapis.com/css?family=Droid+Sans);

.menu_templ{
    width:750px;
    /*background-color:#709700;*/
    border-radius: 5px 5px 0 0;
    height: 35px;
    padding-top: 1px;
    padding-left: 1px;
    box-shadow: 0px 0px 7px #000000;
}

ul#menu,ul#menu ul{
    margin:0;
    list-style:none;
    padding:0;
}
ul#menu,ul#menu .submenu{
    background-color:#FFFFFF;
    border: solid 1px #b2b2b4;
    -moz-border-radius:5px 5px 0 0;
    -webkit-border-radius:5px 5px 0 0;
    border-radius:5px 5px 0 0;
}
#menu{
    height: 30px;
}
ul#menu .submenu{
    visibility:hidden;
    position:absolute;
    left:-1px;
    top:100%;
    opacity:0;
    -moz-transition:all 0.5s;
    -webkit-transition:opacity 0.5s;
    -o-transition:opacity 0.5s,visibility 0.5s;
    transition:opacity 0.5s;
    float:left;
    z-index:2;
    background-color:#FFFFFF;
    background-image:-o-linear-gradient(-90deg,rgba(44,160,202,0),rgba(0,0,0,0.1));
    background-image:-moz-linear-gradient(-90deg,rgba(44,160,202,0),rgba(0,0,0,0.1));
    background-image:linear-gradient(180deg,rgba(44,160,202,0),rgba(0,0,0,0.1));
    background-image:-webkit-linear-gradient(-90deg,rgba(44,160,202,0),rgba(0,0,0,0.1));
    border-width:1px;
    border-radius:0px 0px 4px 4px;
    -moz-border-radius:0px 0px 4px 4px;
    -webkit-border-radius:0px;
    -webkit-border-bottom-right-radius:4px;
    -webkit-border-bottom-left-radius:4px;
    border-style:solid;
    border-color:#FFFFFF #bfc1c2 #bfc1c2 #bfc1c2;
    -moz-box-shadow:0 5px 5px rgba(20, 20, 25, 0.2), 0 0 0 1px #FFFFFF inset;
    -webkit-box-shadow:0 5px 5px rgba(20, 20, 25, 0.2), 0 0 0 1px #FFFFFF inset;
    box-shadow:0 5px 5px rgba(20, 20, 25, 0.2), 0 0 0 1px #FFFFFF inset;
    padding:5px;
}
ul#menu li:hover>.submenu{
    visibility:visible;
    opacity:1;
}
ul#menu li{
    position:relative;
    display:block;
    white-space:nowrap;
    font-size:1.4em;
    float:left;
}
ul#menu li:hover{
    z-index:1;
}
ul#menu ul .submenu{
    position:absolute;
    left:99%;
    top:0;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-color:#bfc1c2;
}
ul#menu{
    font-size: 1.3em;
    z-index:999;
    position:relative;
    display:inline-block;
    padding:0;
    -moz-box-shadow:0 2px 0 #bfbfbf;
    -webkit-box-shadow:0 2px 0 #bfbfbf;
    box-shadow:0 2px 0 #bfbfbf;
}
ul#menu .column{
    float:left;
}
* html ul#menu li a{
    display:inline-block;
}
ul#menu>li{
    margin:0;
}
ul#menu a:active, ul#menu a:focus{
    outline-style:none;
}
ul#menu a:hover{
    text-decoration: underline;
    font-size: 0.6em;
}
ul#menu a{
    display:block;
    vertical-align:middle;
    text-align:left;
    text-decoration: none;
    font:0.6em 'Droid Sans', "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color:#709700;
    padding:4px 15px;
    background-color:;
    background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0),rgba(85,85,85,0.13));
    background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0),rgba(85,85,85,0.13));
    background-image:linear-gradient(180deg,rgba(255,255,255,0),rgba(85,85,85,0.13));
    background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0),rgba(85,85,85,0.13));
    background-repeat:repeat;
    background-position:0 0;
    border-width:0px;
    border-style:none;
    border-color:;
  }
ul#menu ul li{
    float:none;
    margin:0;
}
ul#menu ul a{
    text-align:left;
    padding:5px;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    background-color:none;
    background-image:none;
    border-width:0;
    border-style:none;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    color:#92979E;
    text-decoration:none;
}
ul#menu li:hover>a,ul#menu li a.pressed{
    border-style:none;
    color:#92979E;
    background-image:-o-linear-gradient(-90deg,rgba(85,85,85,0.13),rgba(255,255,255,0));
    background-image:-moz-linear-gradient(-90deg,rgba(85,85,85,0.13),rgba(255,255,255,0));
    background-image:linear-gradient(180deg,rgba(85,85,85,0.13),rgba(255,255,255,0));
    background-image:-webkit-linear-gradient(-90deg,rgba(85,85,85,0.13),rgba(255,255,255,0));
    background-position:0 100%;
    text-decoration:none;
}
ul#menu img{
    border:none;
    vertical-align:middle;
    margin-right:13px;
}
ul#menu ul span{
    background-image:none;
    padding-right:5px;
}
ul#menu ul li:hover>a,ul#menu ul li a.pressed{
    -moz-box-shadow:0 1px 0 #CF7E4C;
    -webkit-box-shadow:0 1px 0 #CF7E4C;
    box-shadow:0 1px 0 #CF7E4C;
    background-color:#ef9d58;
    background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0),rgba(85,85,85,0.13));
    background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0),rgba(85,85,85,0.13));
    background-image:linear-gradient(180deg,rgba(255,255,255,0),rgba(85,85,85,0.13));
    background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0),rgba(85,85,85,0.13));
    border-style:none;
    color:#FFFFFF;
    text-decoration:none;
}
ul#menu li.topfirst>a{
    -moz-box-shadow:0 0 0 1px #FFFFFF inset;
    -webkit-box-shadow:0 0 0 1px #FFFFFF inset;
    box-shadow:0 0 0 1px #FFFFFF inset;
    background-color:#FFFFFF;
    border-width:0 1px 0 0;
    border-style:solid;
    border-color:#bfc1c2;
    border-radius:5px 0 0 0;
    -moz-border-radius:5px 0 0 0;
    -webkit-border-radius:5px;
    -webkit-border-top-right-radius:0;
    -webkit-border-bottom-right-radius:0;
    -webkit-border-bottom-left-radius:0;
    text-shadow:0 1px 0 #FFFFFF;
}
ul#menu li.topfirst:hover>a,ul#menu li.topfirst a.pressed{
    -moz-box-shadow:0 4px 6px -2px rgba(0,20,50, 0.26) inset;
    -webkit-box-shadow:0 4px 6px -2px rgba(0,20,50, 0.26) inset;
    box-shadow:0 4px 6px -2px rgba(0,20,50, 0.26) inset;
    background-color:#FFFFFF;
    border-style:solid;
    border-color:#bfc1c2;
    text-shadow:0 1px 0 #FFFFFF;
}
ul#menu li.topmenu>a{
    -moz-box-shadow:0 0 0 1px #FFFFFF inset;
    -webkit-box-shadow:0 0 0 1px #FFFFFF inset;
    box-shadow:0 0 0 1px #FFFFFF inset;
    background-color:#FFFFFF;
    border-width:0 1px 0 0;
    border-style:solid;
    border-color:#bfc1c2;
    text-shadow:0 1px 0 #FFFFFF;
}
ul#menu li.topmenu:hover>a,ul#menu li.topmenu a.pressed{
    -moz-box-shadow:0 4px 6px -2px rgba(0,20,50, 0.26) inset;
    -webkit-box-shadow:0 4px 6px -2px rgba(0,20,50, 0.26) inset;
    box-shadow:0 4px 6px -2px rgba(0,20,50, 0.26) inset;
    background-color:#FFFFFF;
    border-style:solid;
    border-color:#bfc1c2;
    text-shadow:0 1px 0 #FFFFFF;
}
ul#menu li.toplast>a{
    -moz-box-shadow:0 0 0 1px #FFFFFF inset;
    -webkit-box-shadow:0 0 0 1px #FFFFFF inset;
    box-shadow:0 0 0 1px #FFFFFF inset;
    background-color:#FFFFFF;
    border-width:0px;
    border-style:solid;
    border-color:#bfc1c2;
    border-radius:0 5px 0 0;
    -moz-border-radius:0 5px 0 0;
    -webkit-border-radius:0;
    -webkit-border-top-right-radius:5px;
    text-shadow:0 1px 0 #FFFFFF;
}
ul#menu li.toplast:hover>a,ul#menu li.toplast a.pressed{
    -moz-box-shadow:0 4px 6px -2px rgba(0,20,50, 0.26) inset;
    -webkit-box-shadow:0 4px 6px -2px rgba(0,20,50, 0.26) inset;
    box-shadow:0 4px 6px -2px rgba(0,20,50, 0.26) inset;
    background-color:#FFFFFF;
    border-style:solid;
    border-color:#bfc1c2;
    text-shadow:0 1px 0 #FFFFFF;
}