/* Define the body style */
body {
   font-family : 'Roboto';
	font-weight : light;
	color : #231f20;
	font-size : 14px;

}

/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
    margin:0;
    padding:0;
    list-style:none;
}
#menuwrapper{left:0;top:0;bottom:0;}
#sidemenu{
	background:white;
    width:140px;
    height:1000px;
    position: fixed;
}
/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li{
    background-color:white;
    
    cursor:pointer;
  
}

/* We apply the background hover color when user hover the mouse over of the li component */
#menuwrapper ul li:hover{
    /*position:relative;*/
    
}

/* We apply the link style */
#menuwrapper ul li a{
    padding-top:10px;
    padding-bottom:10px;
    color:#555555;
    display:inline-block;
    text-decoration:none;
}

#menuwrapper ul li a.selected{
/*  color:#ddd;    */
}
/* #menuwrapper ul li a:hover{ */
/* 	color:white; */
/* /*     transition:color 0.3s ease; */ */
/* /*     -o-transition:color 0.3s ease; */ */
/* /*     -webkit-transition:color 0.3s ease; */ */
/* /*     -moz-transition:color 0.3s ease; */ */
/* 	border-right: 0.8em solid transparent; */
/*     transition:none; */
/*     -o-transition:none; */
/*     -webkit-transition:none; */
/*     -moz-transition:none; */
/* } */

/* #menuwrapper ul li a:hover:after { */
/*     content: "  "; */
/*     display: inline-block; */
/*     border-bottom: 0.8em solid transparent; */
/*     border-left: 0.8em solid transparent; */
/*     border-right: 0.8em solid #3F68DE; */
/*     border-top: 0.8em solid transparent; */
/*     height: 0px; */
/*     margin-top: -2px; */
/*     position: absolute; */
/*     left: 100px; */
/*     width: 1px; */
/* border-right: 0.8em solid transparent; */
/*     transition:none; */
/*     -o-transition:none; */
/*     -webkit-transition:none; */
/*     -moz-transition:none; */
/* } */

#menuwrapper ul li ul li a:hover:after {
    content: "  ";
    display: inline-block;
    border-bottom: 0.8em solid transparent;
    border-left: 0.8em solid transparent;
    border-right: 0.8em solid #3F68DE;
    border-top: 0.8em solid transparent;
    height: 0px;
    margin-top: -2px;
    position: absolute;
    left: 142px;
    width: 1px;
   border-right: 0.8em solid transparent;
    transition:none;
    -o-transition:none;
    -webkit-transition:none;
    -moz-transition:none;
}

#menuwrapper ul li a.noflyout:after {
	border-right: 0.8em solid transparent;
    transition:none;
    -o-transition:none;
    -webkit-transition:none;
    -moz-transition:none;
}
/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul{
    position:absolute;
    display:block;
    visibility:hidden;
    height:950px !important;
    background-color:transaprent;
    width:0px;
    color:#fff;
    padding-top:70px;
    
}
#menuwrapper ul li ul li ul{
    position:absolute;
    display:none !important;
    visibility:hidden;
    height:950px !important;
    background-color:transaprent;
    width:0px;
    color:white !important;
    padding-top:70px;
    
}

#menuwrapper ul li ul li{
    color:#fff;
    background:transparent;
    padding-left:20px;
  	width:300px;
}
/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */


#menuwrapper ul li ul li ul li{
    color:white !important;
    background:transparent;
    padding-left:20px;
  
  
}
/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */

#menuwrapper ul li ul{
    left:140px;
    top:-11px;
    display:block;
    visibility:visible;
    width:200px;
    background-color:#00a69c;
    transition:background-color 0.5s ease;
    -o-transition:background-color 0.5s ease;
    -webkit-transition:background-color 0.5s ease;
    -moz-transition:background-color 0.5s ease;
    
}

#menuwrapper ul li ul li:hover ul{
    left:200px;
    top:0px;
    display:block !important;
    visibility:visible;
    width:200px;
    background-color:#1bc3b8;
    transition:background-color 0.5s ease;
    -o-transition:background-color 0.5s ease;
    -webkit-transition:background-color 0.5s ease;
    -moz-transition:background-color 0.5s ease;
    
}


.shadow {
  width: 8px;
  height: 1000px;
  position: fixed;
  top: 0;
  left: 150px;
  background: url(../images/shadow1.png) repeat-y;
  background-position: left;
  /* min-height: 100%; */
  overflow: hidden;
  display: inline;
  float: left;
  z-index: 30;
}