@charset 'UTF-8';

/* Some stylesheet reset */

#cssmenu > ul {

  list-style: none;

  margin: 0;

  padding: 0;

  vertical-align: baseline;

  line-height: 1;

  position: relative;

    z-index: 5;

    width: auto;

}

/* The container */

#cssmenu > ul {

  display: block;

  position: relative;

  width: 230px;

}

/* The list elements which contain the links */

#cssmenu > ul li {

  display: block;

  position: relative;

  margin: 0;

  padding: 0;

  width: 100%;

}

/* General link styling */

#cssmenu > ul li a {

  /* Layout */



  display: block;

  position: relative;

  margin: 0;

  /*border-top: 1px dotted #fff;

  border-bottom: 1px dotted #d9d9d9;*/

    border-bottom: 1px solid #fff;

  padding: 11px 20px;

  /* Typography */



  font-family: Helvetica, Arial, sans-serif;

  color: #fff;

  text-decoration: none;

  /*text-transform: uppercase;

  text-shadow: 0 1px 0 #fff;*/

  font-size: 13px;

  font-weight: 300;

  /* Background & effects */



  background:url(http://pakembjakarta.org/images/menu_left_bg.jpg);

  background-repeat:repeat;

}

/* Rounded corners for the first link of the menu/submenus */

#cssmenu > ul li:first-child > a {

  border-top-left-radius: 4px;

  border-top-right-radius: 4px;

  border-top: 0;

}

/* Rounded corners for the last link of the menu/submenus */

#cssmenu > ul li:last-child > a {

  border-bottom-left-radius: 4px;

  border-bottom-right-radius: 4px;

  border-bottom: 0;

}

/* The hover state of the menu/submenu links */

#cssmenu > ul li a:hover,

#cssmenu > ul li:hover > a {

  color: #ffffff;

  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);

  background:url(http://pakembjakarta.org/images/menu_left_bg_h.jpg);

  background-repeat:repeat;

  border-color: transparent;

}

/* The arrow indicating a submenu */

#cssmenu > ul .has-sub > a::after {

  content: '';

  position: absolute;

  top: 16px;

  right: 10px;

  width: 0px;

  height: 0px;

  /* Creating the arrow using borders */



  border: 4px solid transparent;

  border-left: 4px solid #e4433c;

}

/* The same arrow, but with a darker color, to create the shadow effect */

#cssmenu > ul .has-sub > a::before {

  content: '';

  position: absolute;

  top: 17px;

  right: 10px;

  width: 0px;

  height: 0px;

  /* Creating the arrow using borders */



  border: 4px solid transparent;

  border-left: 4px solid #fff;

}

/* Changing the color of the arrow on hover */

#cssmenu > ul li > a:hover::after,

#cssmenu > ul li:hover > a::after {

  border-left: 4px solid #fff;

}

#cssmenu > ul li > a:hover::before,

#cssmenu > ul li:hover > a::before {

  border-left: 4px solid rgba(0, 0, 0, 0.25);

}

/* THE SUBMENUS */

#cssmenu > ul ul {

  position: absolute;

  left: 100%;

  top: -9999px;

  padding-left: 5px;

  opacity: 0;

  /*width: 260px;*/

    min-width: 319px;

  /* The fade effect, created using an opacity transition */



  -webkit-transition: opacity 0.3s ease-in;

  -moz-transition: opacity 0.3s ease-in;

  transition: opacity 0.3s ease-in;

}

#cssmenu > ul ul li a {

  font-size: 12px;

}

/* Showing the submenu when the user is hovering the parent link */

#cssmenu > ul li:hover > ul {

  top: 0px;

  opacity: 1;

  z-index: 1;

}