.sidr { display: block; position: fixed; top: 0; height: 100%; z-index: 999999; overflow-x: hidden; overflow-y: auto; font-family: "lucida grande", tahoma, verdana, arial, sans-serif; font-size: 15px; background:rgba(0,0,0,0.8); color: #fff; }

.sidr .sidr-inner { padding: 0 0 15px; }
.sidr .sidr-inner > p { margin-left: 15px; margin-right: 15px; }

.sidr h1,
.sidr h2,
.sidr h3,
.sidr h4,
.sidr h5,
.sidr h6 {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFhMWExYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #1a1a1a));
  background-image: -moz-linear-gradient(#4d4d4d, #1a1a1a);
  background-image: -webkit-linear-gradient(#4d4d4d, #1a1a1a);
  background-image: linear-gradient(#4d4d4d, #1a1a1a);
  font-size: 11px;
  font-weight: normal;
  padding: 0 15px;
  margin: 0 0 5px;
  color: #fff;
  line-height: 24px;
  box-shadow: 0 5px 5px 3px rgba(0, 0, 0, 0.2);
}
.sidr p { font-size: 13px; margin: 0 0 12px; }
.sidr p a { }
.sidr > p { margin-left: 15px; margin-right: 15px; }
.sidr ul { display: block; margin: 0 0 15px; padding: 30px 0 0 0; }
.sidr ul li { display: block; margin: 0; }
.sidr ul li:hover, .sidr ul li.active, .sidr ul li.sidr-class-active { border-top: 0; }
.sidr ul li:hover > a,
.sidr ul li:hover > span, .sidr ul li.active > a,
.sidr ul li.active > span, .sidr ul li.sidr-class-active > a,
.sidr ul li.sidr-class-active > span { }
.sidr ul li a,
.sidr ul li span { display: block; text-decoration: none; color: #fff; }
.sidr ul li ul { border-bottom: 0; margin: 0; }
.sidr ul li ul li { line-height: 40px; font-size: 13px; }
.sidr ul li ul li:last-child { border-bottom: 0; }
.sidr ul li ul li:hover, .sidr ul li ul li.active, .sidr ul li ul li.sidr-class-active { border-top: 0; line-height: 40px; }
.sidr ul li ul li:hover > a,
.sidr ul li ul li:hover > span, .sidr ul li ul li.active > a,
.sidr ul li ul li.active > span, .sidr ul li ul li.sidr-class-active > a,
.sidr ul li ul li.sidr-class-active > span {
}
.sidr ul li ul li a,
.sidr ul li ul li span { padding-left: 30px; }
.sidr form { margin: 0 15px; }
.sidr label { font-size: 13px; }
.sidr input[type="text"],
.sidr input[type="password"],
.sidr input[type="date"],
.sidr input[type="datetime"],
.sidr input[type="email"],
.sidr input[type="number"],
.sidr input[type="search"],
.sidr input[type="tel"],
.sidr input[type="time"],
.sidr input[type="url"],
.sidr textarea,
.sidr select { width: 100%; font-size: 13px; padding: 5px; margin: 0 0 10px; border-radius: 2px; border: 0; background: rgba(0, 0, 0, 0.1); color: rgba(255, 255, 255, 0.6); display: block; clear: both; }
.sidr input[type=checkbox] { width: auto; display: inline; clear: none; }
.sidr input[type=button],
.sidr input[type=submit] { color: #333; background: #fff; }
.sidr input[type=button]:hover,
.sidr input[type=submit]:hover { background: rgba(255, 255, 255, 0.9); }

@media screen and (min-width: 481px) {
.sidr {  }
.sidr.right { width: 100%; left: auto; right: -100%; }
.sidr.left { width: 300px; left: -300px; right: auto; }
}

@media screen and (max-width: 480px) {
.sidr { width: 100%; }
.sidr.right { left: auto; right: -100%; }
.sidr.left { left: -100%; right: auto; }
}