.ws-nav 
{ 
  /*height: 100%;*/
  overflow: hidden; 
  max-width: 500px;
  /*margin: 0 auto;*/
}

.nav-wrapper {
  left: 0px;
  height: 100%;
  position: relative; }

.layer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto; }
  .layer ul {
    margin: 0;
    padding: 20px;
    list-style: none outside; }
    .layer ul li {
      display: block; }
      .layer ul li a, .layer ul li span {
        display: block;
        padding: 20px 15px;
        color: #fff;
        font: normal 14px Arial, sans-serif;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        text-decoration: none;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); }
        .layer ul li a:hover, .layer ul li span:hover, .layer ul li a.current, .layer ul li span.current {
          background: #7ea815;
          background: -moz-linear-gradient(top, #7ea815 50%, #90b325 51%);
          background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #7ea815), color-stop(51%, #90b325));
          background: -webkit-linear-gradient(top, #7ea815 50%, #90b325 51%);
          background: -o-linear-gradient(top, #7ea815 50%, #90b325 51%);
          background: -ms-linear-gradient(top, #7ea815 50%, #90b325 51%);
          background: linear-gradient(to bottom, #7ea815 50%, #90b325 51%);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7ea815', endColorstr='#90b325',GradientType=0 ); }
        .layer ul li a.trigger:after, .layer ul li span.trigger:after {
          content: ' ';
          width: 14px;
          height: 14px;
          background: url("../Bootstrap/img/glyphicons-halflings-white.png") no-repeat -456px -72px;
          float: right; }
        .layer ul li a.return, .layer ul li span.return {
          background-color: rgba(255, 255, 255, 0.1);
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
          text-align: right; }
          .layer ul li a.return:after, .layer ul li span.return:after {
            display: none; }
          .layer ul li a.return:before, .layer ul li span.return:before {
            content: ' ';
            width: 14px;
            height: 14px;
            background: url("../Bootstrap/img/glyphicons-halflings-white.png") no-repeat -336px -96px;
            float: left;
            -moz-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
            filter: FlipH;
            -ms-filter: "FlipH"; }
        .layer ul li a i.icon-user, .layer ul li span i.icon-user {
          background: url("../Bootstrap/img/glyphicons-halflings-white.png") no-repeat -168px 0;
          display: inline-block;
          width: 14px;
          height: 14px;
          margin-top: 1px;
          margin-right: 5px;
          line-height: 14px;
          vertical-align: text-top; }
      .layer ul li:last-child > a, .layer ul li:last-child > span {
        border-bottom: none; }
      .layer ul li span {
        color: #afd243;
        font-style: italic; }
        .layer ul li span:hover {
          background: none; }

.mobile-show {
	display: none !important;
	visibility: hidden;
}

@media (max-width: 600px) {
	.mobile-hide {
		display: none !important;
	}

	.mobile-show {
		display: block !important;
		visibility: visible;
	}
}

@media all and (device-width: 768px) and (device-height: 1024px) {
    .layer ul li a:hover, .layer ul li span:hover {
        background: none;
    }
    
    .layer ul li a:active {
        background: #7ea815;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #7ea815), color-stop(51%, #90b325));
        background: -webkit-linear-gradient(top, #7ea815 50%, #90b325 51%);
        background: linear-gradient(to bottom, #7ea815 50%, #90b325 51%);
    }
}