.sidebar {
  top: 0;
  left: 0;
  bottom: 0;
  width: 234px;
  color: #fff;
  border-right: 0 1px #000;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #003152), color-stop(1, #3c87aa));
  background: -webkit-linear-gradient(top,       #003152, #3c87aa);
  background:    -moz-linear-gradient(top,       #003152, #3c87aa);
  background:     -ms-linear-gradient(top,       #003152, #3c87aa);
  background:      -o-linear-gradient(top,       #003152, #3c87aa);
  background:         linear-gradient(to bottom, #003152, #3c87aa);
  position: absolute;
  box-shadow:
    -1px 0 black inset,
    -2px 0 rgba(0,0,0,0.21) inset;
  -webkit-transition: left 400ms;
     -moz-transition: left 400ms;
      -ms-transition: left 400ms;
       -o-transition: left 400ms;
          transition: left 400ms;
}
  .sidebar:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1000px;
    background: rgba(255,255,255,0.34);
    background: -webkit-gradient(radial,50% 50%,0,50% 50%,100%,from(rgba(255,255,255,0.34)),to(rgba(255,255,255,0)));
    background: -webkit-radial-gradient(center center, rgba(255,255,255,0.34), rgba(255,255,255,0));
    background:    -moz-radial-gradient(center center, rgba(255,255,255,0.34), rgba(255,255,255,0));
    background:      -o-radial-gradient(center center, rgba(255,255,255,0.34), rgba(255,255,255,0));
    background:     -ms-radial-gradient(center center, rgba(255,255,255,0.34), rgba(255,255,255,0));
    background:         radial-gradient(center center, rgba(255,255,255,0.34), rgba(255,255,255,0));
  }
  .sidebar.hidden {
    left: -234px;
    -webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
  }
.channels {
  top: 119px;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  overflow-y: auto;
  overflow-x: hidden;
}
  .channels.rainbowAnimationRunning {
    overflow-y: visible;
    overflow-x: visible;
  }
.sidebar nav {
  z-index: 2;
  position: relative;
  box-shadow: -1px 0 black inset,0 1px hsla(0, 0%, 0%, 0.55),0 2px hsla(0, 0%, 0%, 0.21),0 3px hsla(0, 0%, 0%, 0.13);
}
.sidebar button {
  width: 100%;
  height: 42px;
  color: #fff;
  font-weight: bold;
  line-height: 42px;
  text-shadow: 0 1px rgba(0,0,0,0.21);
  background: hsl(205,30%,41%);
  border: none;
  border-right: 1px solid #000;
  border-radius: 0;
  box-shadow: 1px 0 rgba(255,255,255,0.21) inset,0 1px rgba(255,255,255,0.21) inset;
  float: left;
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
       -o-box-sizing: border-box;
          box-sizing: border-box;
}
.sidebar button:hover {
  background: hsl(206,30%,43%);
  text-shadow: 0 1px rgba(0,0,0,0.21);
}
.sidebar button:first-child {
  box-shadow: 0 1px rgba(255,255,255,0.21) inset;
}
.sidebar button:active {
  background: hsl(206,30%,30%);
  box-shadow: none;
}
.sidebar button span {
  padding-left: 41px;
  position: relative;
}
.sidebar button span:before {
  left: 0;
  top: -9px;
  height: 34px;
  width: 31px;
  content: "";
  display: block;
  position: absolute;
}
.sidebar button.discover span:before {
  background: url("/img/globe.png");
}
.sidebar button#create_topic_channel span:before {
  background: url("/img/new.png");
}
.sidebar button#create_topic_channel {
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background: #000;
  z-index: 9;
  box-shadow:
    1px 0 rgba(255,255,255,0.21) inset,
    0 1px rgba(255,255,255,0.21) inset,
    0 -1px rgba(0,0,0,0.55),
    0 -2px rgba(0,0,0,0.21),
    0 -3px rgba(0,0,0,0.13);
}
.sidebar button#create_topic_channel:active {
  top: auto;
  line-height: 45px;
  position: absolute;
  box-shadow: 0 -1px rgba(0,0,0,0.55),0 -2px rgba(0,0,0,0.08),0 -3px rgba(0,0,0,0.03);
}
.sidebar .search {
  padding: 6px 5px 5px;
  background: #4a6e88;
  box-shadow: -1px 0 #000 inset,0 1px rgba(0,0,0,0.55),0 2px rgba(0,0,0,0.21),0 3px rgba(0,0,0,0.13);
  position: relative;
  z-index: 3;
  display: none;
}
.sidebar .search input[type=search] {
  width: 100%;
  border-color: black;
}
.personal.channel,
.personal.channel.selected {
  padding-top: 21px;
  padding-bottom: 21px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #60859d), color-stop(1, #4a6e88));
  background: -webkit-linear-gradient(top, #60859d 0%, #4a6e88 100%);
  background:    -moz-linear-gradient(top, #60859d 0%, #4a6e88 100%);
  background:     -ms-linear-gradient(top, #60859d 0%, #4a6e88 100%);
  background:      -o-linear-gradient(top, #60859d 0%, #4a6e88 100%);
  background:         linear-gradient(to bottom, #60859d 0%, #4a6e88 100%);
  border-bottom: 1px solid #000;
  box-shadow: -1px 0 #000 inset;
  z-index: 3;
  position: relative;
}
.personal.channel .avatar,
.personal.channel.selected .avatar {
  top: 13px;
}
.personal.channel .info {
  width: 110px;
}
  .personal.channel .settings {
    width: 35px;
    height: 76px;
    background: url(/img/settings_dropdown.png);
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
  }
  .personal.channel .settings:hover {
    background-position: 0 -76px;
  }
  .personal.channel .popup {
    top: 70px;
    left: -65px;
    display: none;
  }
  .personal.channel .popup li {
    /*width: 120px;*/
  }
  .personal.channel .showSettings .popup {
    display: -webkit-box;
    display:    -moz-box;
    display:     -ms-box;
    display:      -o-box;
    display:         box;
  }
.channel {
  left: 0;
  width: 145px;
  height: 34px;
  padding: 16px 13px 16px 76px;
  position: relative;
  cursor: pointer;
  -webkit-transform-origin: top;
     -moz-transform-origin: top;
      -ms-transform-origin: top;
       -o-transform-origin: top;
          transform-origin: top;
  -webkit-transition: opacity 500ms, left 500ms, height 500ms 500ms, padding 500ms 500ms;
     -moz-transition: opacity 500ms, left 500ms, height 500ms 500ms, padding 500ms 500ms;
      -ms-transition: opacity 500ms, left 500ms, height 500ms 500ms, padding 500ms 500ms;
       -o-transition: opacity 500ms, left 500ms, height 500ms 500ms, padding 500ms 500ms;
          transition: opacity 500ms, left 500ms, height 500ms 500ms, padding 500ms 500ms;
}
  .channel.remove {
    left: -234px;
    opacity: 0;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
  }
.channel.hidden {
  opacity: .34;
}
.channel.selected {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.13)), color-stop(0.3, rgba(128,128,128,0)), color-stop(1, rgba(255,255,255,0.13)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.13), rgba(128,128,128,0) 33%, rgba(255,255,255,0.13));
  background:    -moz-linear-gradient(top, rgba(0,0,0,0.13), rgba(128,128,128,0) 33%, rgba(255,255,255,0.13));
  background:     -ms-linear-gradient(top, rgba(0,0,0,0.13), rgba(128,128,128,0) 33%, rgba(255,255,255,0.13));
  background:      -o-linear-gradient(top, rgba(0,0,0,0.13), rgba(128,128,128,0) 33%, rgba(255,255,255,0.13));
  background:         linear-gradient(to bottom, rgba(0,0,0,0.13), rgba(128,128,128,0) 33%, rgba(255,255,255,0.13));
  box-shadow:
    0 1px rgba(0,0,0,0.55),
    0 2px rgba(255,255,255,0.21),
    0 1px rgba(0,0,0,0.55) inset,
    0 -1px rgba(255,255,255,0.21);
}
.channel .info {
  font-size: 12px;
  line-height: 17px;
  text-shadow: 0 0 1px rgba(0,0,0,0.13);
  border-radius: 5px;
}
.channel .info .owner,
.channel .info .status {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  -webkit-transition: color 500ms linear;
     -moz-transition: color 500ms linear;
      -ms-transition: color 500ms linear;
       -o-transition: color 500ms linear;
          transition: color 500ms linear;
}
.channel .info .owner {
  max-width: 200px;
  font-weight: bold;
  color: #fff;
}
.channel .info .status {
  color: rgba(255,255,255,0.65);
  display: block;
}
.channel .info .domain {
  width: auto;
}
.channel .avatar {
  height: 50px;
  width: 50px;
  top: 8px;
  left: 13px;
  background-size: cover;
  position: absolute;
  z-index: 1;
  -webkit-transition: top 500ms linear;
     -moz-transition: top 500ms linear;
      -ms-transition: top 500ms linear;
       -o-transition: top 500ms linear;
          transition: top 500ms linear;
}
  .channel .avatar img {
    height: 50px;
    width: 50px;
    -webkit-transition: width 500ms, height 500ms;
     -moz-transition: width 500ms, height 500ms;
      -ms-transition: width 500ms, height 500ms;
       -o-transition: width 500ms, height 500ms;
          transition: width 500ms, height 500ms;
    border-radius: 3px;
  }
  .sidebar .channel .avatar:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 3px;
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.55),
      0 1px 1px rgba(0,0,0,0.55),
      0 0 0 1px rgba(255,255,255,0.55) inset;
  }
  .channel.selected .avatar {
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.55),
      0 0 0 1px rgba(255,255,255,0.55) inset,
      0 0 0 3px hsl(81, 53%, 44%),
      0 0 0 4px hsl(81, 53%, 48%),
      0 0 2px 4px rgba(0,0,0,0.34);
  }
.counter {
  top: -5px;
  right: -5px;
  height: 18px;
  padding: 0 5px;
  color: #fff;
  font-size: 14px;
  line-height: 17px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.34);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,0.34)), color-stop(1, rgba(255,255,255,0.01)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.01) 100%);
  background:    -moz-linear-gradient(top, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.01) 100%);
  background:     -ms-linear-gradient(top, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.01) 100%);
  background:      -o-linear-gradient(top, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.01) 100%);
  background:         linear-gradient(to bottom, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.01) 100%);
  border-radius: 10px;
  box-shadow: 0 1px rgba(255,255,255,0.55) inset,0 1px 2px #000;
  position: absolute;
  z-index: 1;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
       -o-box-sizing: border-box;
          box-sizing: border-box;
}
.counter.channelpost {
  top: auto;
  bottom: -5px;
  background-color: #83ac35;
  box-shadow: 0 0 0 1px #6f922d,0 1px rgba(255,255,255,0.55) inset,0 1px 2px #000;
}
.counter.message {
  background-color: #e28c35;
  box-shadow: 0 0 0 1px #cf771e,0 1px rgba(255,255,255,0.55) inset,0 1px 2px #000;
}
.counter.admin {
  top: auto;
  bottom: -5px;
  right: 35px;
  background-color: #cd296b;
  box-shadow: 0 0 0 1px #ae235b,0 1px rgba(255,255,255,0.55) inset,0 1px 2px #000;
}