@charset 'UTF-8';
/* Starter CSS for Menu */
#cssmenukecil {
    padding: 0;
    margin-bottom:0px;
    border:0px; 
    width:100%;
}

#cssmenukecil ul, #cssmenukecil li {
    list-style: none;
    margin: 0;
    padding: 0; 
}

#cssmenukecil ul {
    position: relative;
    z-index: 497; 
}

#cssmenukecil ul li {
    float: left;
    min-height: 1px;
    vertical-align: middle; 
}

#cssmenukecil ul li:hover {
    position: relative;
    z-index: 499;
    cursor: default; 
}

#cssmenukecil ul ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 498;
    width: 100%; 
}

#cssmenukecil ul ul li {
    float: none; 
}

#cssmenukecil ul ul ul {
    top: 0;
    left: 100%; 
}

#cssmenukecil ul li:hover > ul {
    visibility: visible; 
}

#cssmenukecil ul ul {
    margin-top: 0; 
}

#cssmenukecil a {
    display: block;
    line-height: 1em;
    text-decoration: none; 
}

#cssmenukecil:after, #cssmenukecil ul:after {
    content: '';
    display: block;
    clear: both; 
}

/* Custom CSS Styles */
#cssmenukecil {
    font-family:Verdana, Arial, Helvetica, sans-serif;
}

/* background menu*/
#cssmenukecil > ul > li.has-sub:hover > a {
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; 
}

#cssmenukecil > ul > li:hover > a {
    background-color: #e2e2e2;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, white), color-stop(1, #c8c8c8));
    background-image: -webkit-linear-gradient(top, white, #c8c8c8);
    background-image: -moz-linear-gradient(top, white, #c8c8c8);
    background-image: -o-linear-gradient(top, white, #c8c8c8);
    background-image: linear-gradient(white, #c8c8c8); 
}

#cssmenukecil > ul > li.active:hover > a {
    background: rgb(132,191,216);
    background: -moz-linear-gradient(top, rgba(132,191,216,1) 0%, rgba(48,157,207,1) 100%);
    background: -webkit-linear-gradient(top, rgba(132,191,216,1) 0%,rgba(48,157,207,1) 100%);
    background: linear-gradient(to bottom, rgba(132,191,216,1) 0%,rgba(48,157,207,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84bfd8', endColorstr='#309dcf',GradientType=0 );
}

#cssmenukecil ul a {
    background-color: #c2c2c2;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1f1f1), color-stop(1, #a8a8a8));
    background-image: -webkit-linear-gradient(top, #f1f1f1, #a8a8a8);
    background-image: -moz-linear-gradient(top, #f1f1f1, #a8a8a8);
    background-image: -o-linear-gradient(top, #f1f1f1, #a8a8a8);
    background-image: linear-gradient(#f1f1f1, #a8a8a8);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;

    color: #3c444d;
    font-size: 9px;
    line-height: 14px;
    padding: 0 10px;
    position: relative;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 
}

#cssmenukecil ul ul {
    width: 160px; 
}
    
#cssmenukecil ul ul a {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    line-height: 150%;
}


/* menu utama lebih gelap */
#cssmenukecil ul .active > a {
    color: #FFF;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #78c478), color-stop(1, #3f832e) );
	background:-moz-linear-gradient( center top, #78c478 5%, #3f832e 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
}

#cssmenukecil ul .has-sub {
    position: relative; 
}

#cssmenukecil ul .has-sub ul {
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -moz-box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
    
    background-color: #ebebeb;
}

#cssmenukecil ul .has-sub ul a {
    background: none;
    padding: 3px 3px 3px 10px;
    border-bottom: 1px solid transparent;
    text-align: left; 
}

#cssmenukecil ul .has-sub ul .has-sub a:after {
    content: none; 
}

#cssmenukecil ul .has-sub li:hover > a {
    color: #FFF;
    background-color: #55616f;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #56606f), color-stop(1, #3f4852));
    background-image: -webkit-linear-gradient(top, #56606f, #3f4852);
    background-image: -moz-linear-gradient(top, #56606f, #3f4852);
    background-image: -o-linear-gradient(top, #56606f, #3f4852);
    background-image: linear-gradient(#56606f, #3f4852);
    -moz-box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
    -webkit-box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
    box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
    position: relative;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); 
}

/* penanda kanan,sub */

#cssmenukecil ul .has-sub > a:after {
    content: url(../images/3angle.png);
    border-left: 1px solid rgba(100,100,100,0.2);
    color: #5D6A7A;
    -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
    display: inline-block;
    font-size: 9px;
    margin-left: 20px;
    text-align: center;

    width: 10px;
    text-shadow: 0 -1px 0 #101417; 
}