/*---------- Vertical desktop menu ----------------------------*/

/*
body
{
  margin:0px;
  padding:0px;
  font-family: "Open Sans", arial;
  background:url('https://static.tumblr.com/94eb957a00fd03c0c2f7d26decd71578/u1rhacw/osAmyyh1q/tumblr_static_tumblr_static_gaussian_blur_gradient_desktop_1680x943_wallpaper-393751.jpg');
  color:#fff;
  font-weight:300;

}
*/

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);

.logo{
  
}

.settings {
  height:73px; 
  float:left;
  width:250px;
  margin:0px;
  text-align: center;
  font-size:20px;
  font-family: 'Strait', sans-serif;
}



/* ScrolBar  */
.scrollbar
{
  height: 90%;
  width: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
}

.scrollbar:hover
{
  height: 90%;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* Scrollbar Style */ 



#style-1::-webkit-scrollbar-track
{
  border-radius: 2px;
}

#style-1::-webkit-scrollbar
{
  width: 5px;
  background-color: #F7F7F7;
}

#style-1::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #BFBFBF;
}
/* Scrollbar End */ 




.fa-lg {
  font-size: 1em; 
}
.fa {
  position: relative;
  display: table-cell;
  width: 25px;
  height: 25px;
  text-align: center;
  top:0px; 
  font-size:20px;
}

.active {
  filter: invert(0%) sepia(6%) saturate(7500%) hue-rotate(328deg) brightness(94%) contrast(106%);
  font-weight: bold;
}



.desktop-menu:hover, nav.desktop-menu.expanded {
  width:150px;                 /* Expanded width */ 
  overflow:hidden;
  opacity:1;

}

.desktop-menu {
  background:#F7F7F7;
  position:fixed;
  height:100%;
  left:0;
  width:60px;                 /* Not expanded width */
  overflow:hidden;
  -webkit-transition:width .2s linear;
  transition:width .2s linear;
  -webkit-transform:translateZ(0) scale(1,1);
  box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07);
  opacity:1;
  z-index: 999;
}

.desktop-menu>ul {
  margin:7px 0;
  z-index: 56
}

.desktop-menu li {
  position:relative;
  display:block;
  width:250px;    
  z-index: 7;
  margin-bottom: 20px;
}


.desktop-menu li>a {
  position:relative;
  width:255px;              
  display:table;
  border-collapse:collapse;
  border-spacing:0;
  color:#8a8a8a;
  font-size: 13px;
  text-decoration:none;
  -webkit-transform:translateZ(0) scale(1,1);
  -webkit-transition:all .14s linear;
  transition:all .14s linear;
  font-family: 'Strait', sans-serif;
  border-top:1px solid #f2f2f2;
  text-shadow: 1px 1px 1px  #fff;  
  z-index: 8;
}



.desktop-menu .nav-icon {
  position:relative;
  display:table-cell;
  width:55px;
  height:36px;
  text-align:center;
  vertical-align:middle;
  font-size:18px;
  z-index: 9;
}

.desktop-menu .nav-text  {
  position:relative;
  display:table-cell;
  vertical-align:middle;
  width:190px;
  font-family: 'Titillium Web', sans-serif;
  text-align: left;
  z-index: 9;
}

.desktop-menu .share {
}



.desktop-menu .fb-like {
  left: 180px;
  position:absolute;
  top: 15px;
}

.desktop-menu>ul.logout {
  position:absolute;
  left:0;
  bottom:0;
  
}

.no-touch .scrollable.hover {
overflow-y:hidden;

}

.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
  
}


/* Logo Hover Property */


.settings:hover, settings:focus {   
  -webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
  -moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
  -o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
  transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 
}

.settings:active, settings:focus {   
  -webkit-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
  -moz-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
  -o-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
  transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; 
}


a:hover,a:focus {
  text-decoration:none;
  border-left:0px solid #F7F7F7;
}

nav {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none;
  
}

nav ul,nav li {
  outline:0;
  margin:0;
  padding:0;
  text-transform: uppercase;
}




/* Darker element side menu Start*/


.darkerli{
  background-color:#ededed;
  text-transform:capitalize;  
}

.darkerlishadow{
  background-color:#ededed;
  text-transform:capitalize;  
  -webkit-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
  -moz-box-shadow:    inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
  box-shadow:         inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
}


.darkerlishadowdown{
  background-color:#ededed;
  text-transform:capitalize;  
  -webkit-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
  -moz-box-shadow:    inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
  box-shadow:         inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
}

/* Darker element side menu End*/




.desktop-menu li:hover>a,nav.desktop-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
  /*color:#fff;
  background-color:#00bbbb;
  text-shadow: 0px 0px 0px; 
  */
  filter: sepia(100%) hue-rotate(190deg) saturate(500%);
  font-weight: bold;
  color:#000;
}
.area {
  float: left;
  background: #e2e2e2;
  width: 100%;
  height: 100%;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}


/*--------------------------------*/







/*---------- mobile version of desktop menu. bottom fixed ----------------------------*/
@media (max-width: 550px) {


  .desktop-menu {
    background:#F7F7F7;
    position:fixed;
    bottom: 0;
    height:50px;          /* Not expanded height */
    width:100%;                 
    overflow:hidden;
    -webkit-transition:width .2s linear;
    transition:width .2s linear;
    -webkit-transform:translateZ(0) scale(1,1);
    box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07);
    opacity:1;
    z-index: 999;
  }


  .settings {
    height:10px; 
    float:center;
    width:100%;
    margin:0px;
    text-align: center;
    font-size:20px;
    font-family: 'Strait', sans-serif;

  }

  .scrollbar:hover
  {
    height: 100%;
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    
  }


  .no-touch .scrollable.hover {
  overflow-y:auto;

  }

  .no-touch .scrollable.hover:hover {
  overflow-y:auto;
  overflow:visible;
    
  }


  .desktop-menu:hover, nav.desktop-menu.expanded {
    width:100%;                 
    height:50px;               /*   Expanded height */ 
    overflow:hidden;
    opacity:1;

  }

  .fa {
    position: relative;
    display: table-row;
    width: 25px;
    height: 25px;
    text-align: center;
    top:0px; 
    font-size:20px;
  }

  .desktop-menu>ul {
    margin:7px 0;
    z-index: 56
  }

  .desktop-menu li {
    position:relative;
    display: inline-block;
    width:50px;    
    z-index: 7;
    margin-bottom: 20px;
  }


  .desktop-menu li>a {
    position:relative;
    width:50px;              
    display:table;
    border-collapse:collapse;
    border-spacing:0;
    color:#8a8a8a;
    font-size: 13px;
    text-decoration:none;
    -webkit-transform:translateZ(0) scale(1,1);
    -webkit-transition:all .14s linear;
    transition:all .14s linear;
    font-family: 'Strait', sans-serif;
    border-top:1px solid #f2f2f2;
    text-shadow: 1px 1px 1px  #fff;  
    z-index: 8;
  }

  .desktop-menu .nav-icon {
    position:relative;
    display:table-row;
    width:55px;
    height:36px;
    text-align:center;
    vertical-align:middle;
    font-size:18px;
    z-index: 9;
    display: none;
  }

  .desktop-menu .nav-text  {
    position:relative;
    display:table-row;
    vertical-align:middle;
    width:50px;
    font-family: 'Titillium Web', sans-serif;
    text-align: left;
    z-index: 9;
    display: none;
  }


}

/*--------------------------------*/