#pane {
  position: fixed;
  width: 136px;
  right: -176px;
  top: 10%;
  padding: 20px;
  z-index: 999;
  background: #1c2031;
  background: rgba(28, 32, 49, 0.95);
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  transition: all .4s ease;
  -webkit-border-bottom-left-radius: 1em;
  -moz-border-bottom-left-radius: 1em;
  border-bottom-left-radius: 1em;
}

#pane:after {
  clear: both;
  content: "";
  display: table;
}

#pane.pane-active {
  right: 0;
}

#pane p {
  color: #fff;
  font-size: 1.2em;
  padding: 0 0 1em;
  margin: 0;
}

#pane .toggle-button {
  position: absolute;
  left: -55px;
  top: 0;
  width: 50px;
  height: 50px;
  text-align: center;
  padding: 0 0 0 5px;
  cursor: pointer;
  background: #1c2031;
  background: rgba(28, 32, 49, 0.95);
  -webkit-border-bottom-left-radius: 2em;
  -moz-border-bottom-left-radius: 2em;
  border-bottom-left-radius: 2em;
  -webkit-border-top-left-radius: 2em;
  -moz-border-top-left-radius: 2em;
  border-top-left-radius: 2em;
}

#pane .toggle-button:before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 16px 0 0;
  background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDM3Ni44NDYgMzc2Ljg0NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzc2Ljg0NiAzNzYuODQ2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTM2NC45NjYsMzcyLjc0M2MyLjM4Mi0yLjM5LDQuMzE2LTQuMzI0LDQuMzE2LTQuMzI0bDQuMzE2LTQuMzI0ICAgYzIuMzgyLTIuMzk4LTEuNjkxLTEzLjQ1My05LjEwNC0yNC42OTVsLTE5LjAxMy0yOC44NjVjLTcuNDEzLTExLjI0Mi0xOS4xMjctMjEuNTY1LTI2LjE3NC0yMy4wNDQgICBjLTcuMDQ3LTEuNDg4LTEyLjc2Mi0yLjY5MS0xMi43NjItMi42OTFsLTU3LjI5OC01Ny4yNzRMMjI4LjM4OSwyNDguNGw1Ny4yNSw1Ny4yODJsMi43MDcsMTIuNzYyICAgYzEuNDg4LDcuMDM5LDExLjgxOSwxOC43NjksMjMuMDYxLDI2LjE3NGwyOC44ODEsMTkuMDM3QzM1MS41MjksMzcxLjA2LDM2Mi41ODQsMzc1LjEzMywzNjQuOTY2LDM3Mi43NDN6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNMTMuNjA4LDc0LjE5N2w4NS4xMzksODUuMTM5bDEwLjYzMiwxMC42MDhjMC4yNDQsMC4yNiwwLjQ4LDAuMzk4LDAuNzE1LDAuNjQybDE0LjA2Mi0xNC4wNzEgICBMMjMuNzI4LDU2LjA4NmMtMi40NDctMi40MjItMi40NDctNi4zOTcsMC04Ljc5NWMyLjQyMi0yLjQ1NSw2LjM0LTIuNDU1LDguNzk1LDBsMTAwLjM5NiwxMDAuNDUzbDE1LjY2NC0xNS42OTZMNDguMTU0LDMxLjYzNSAgIGMtMi40NTUtMi40My0yLjQ1NS02LjM2NSwwLTguNzk1YzIuNDIyLTIuNDIyLDYuMzY1LTIuNDIyLDguNzYzLDBsMTAwLjQ3NywxMDAuNDc3bDE0LjAzOC0xNC4wODcgICBjLTAuMjExLTAuMjQ0LTAuMzY2LTAuNTA0LTAuNTg1LTAuNzRsLTExLjE2MS0xMS4xNzdsLTg0LjU5NC04NC41N2MtMTYuOTcyLTE3LjAwNS00NC41Mi0xNi45ODEtNjEuNDg1LDAgICBDLTMuMzg5LDI5LjcwOS0zLjM4OSw1Ny4yMjQsMTMuNjA4LDc0LjE5N3oiIGZpbGw9IiNGRkZGRkYiLz4KCTxwYXRoIGQ9Ik0zNzUuNzI4LDgxLjY1MWMtMS4wMjQtMTMuNDI4LTEyLjg5Mi0xNi4wMzgtMjIuNDEtNi41MTlsLTMzLjI2MiwzMy4yNyAgIGMtNy43MjIsNy43NzktMjAuMzc4LDcuNzU1LTI4LjEyNSwwbC0yMS41NDktMjEuNTI0Yy03LjgwMy03Ljg0NC03Ljc3OS0yMC40Ni0wLjAyNC0yOC4yNDdsMzQuMzkyLTM0LjM1OSAgIGM5LjUyNy05LjUxOSw3LjExMi0yMS44MTctNi4yNTktMjMuNDFjLTI1Ljg2NS0zLjA4OS01Mi44Miw1LjI3NS03Mi42NzgsMjUuMTE3Yy0xNS4xMjcsMTUuMTUyLTIzLjU3MywzNC40NzMtMjUuMzYxLDU0LjI1OCAgIGMtMC43MTUsNy45OTktMC4zNDEsMTYuMDcsMS4wOTcsMjQuMDA0TDE2Ljk2NSwyODguODRjLTkuNzQ2LDkuNzU0LTE1LjEyNywyMi43MDMtMTUuMTI3LDM2LjQ5NyAgIGMwLDEzLjc2Miw1LjM4MSwyNi42OTQsMTUuMTAzLDM2LjQzMmMyMC4xMSwyMC4xMDIsNTIuODE5LDIwLjEwMiw3Mi45NjIsMGMwLDAsMTMyLjY4My0xMzIuNjY2LDE4Ni40MTMtMTg2LjQ2MSAgIGM4LjQ0NiwxLjE1NCwxNi45OTcsMS4wNzMsMjUuNDEtMC4yNmMxNy43NjktMi43OCwzNC44NDctMTAuOTI1LDQ4LjU2LTI0LjYxM0MzNjkuMTUyLDEzMS41NjgsMzc3LjYxNCwxMDYuMjk2LDM3NS43MjgsODEuNjUxeiAgICBNNzAuODU3LDM0NS45MWMtMTAuNTUxLDEwLjQ5NC0yNy41MjMsMTAuNDk0LTM4LjA0Mi0wLjAyNGMtMTAuNDctMTAuNDQ1LTEwLjQ5NC0yNy40OTksMC4wMjQtMzcuOTY5ICAgYzEwLjQ5NC0xMC40NywyNy40NjYtMTAuNDQ1LDM3Ljk4NSwwQzgxLjI5NSwzMTguMzg3LDgxLjI5NSwzMzUuNDQxLDcwLjg1NywzNDUuOTF6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
  background-size: 18px;
}

#pane .toggle-button:after {
  content: '';
  position: absolute;
  width: 1px;
  height: 40px;
  right: -1px;
  top: 5px;
  background: #333;
  background: rgba(255, 255, 255, 0.1);
}

#pane ul, #pane li {
  padding: 0;
  margin: 0;
  list-style: none;
}

#pane li {
  float: left;
  width: 30px;
  height: 30px;
  padding: 2px;
}

#pane ul + p {
  clear: both;
  padding-top: 1.4em;
}

#pane a {
  display: block;
  height: 30px;
  border: 0;
  overflow: hidden;
  position: relative;
  -webkit-opacity: .5;
  -moz-opacity: .5;
  opacity: .5;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  transition: all .2s ease;
}

#pane a:hover {
  -webkit-opacity: .9;
  -moz-opacity: .9;
  opacity: .9;
}

#pane a.active-theme {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

#pane a.cornflower {
  background-color: #676eff;
}

#pane a.aquamarine {
  background-color: #3bb88e;
}

#pane a.burlywood {
  background-color: #a78a64;
}

#pane a.coral {
  background-color: #cd5b45;
}

#pane a.cyan {
  background-color: #2ababa;
}

#pane a.olive {
  background-color: #7ea046;
}

#pane a.firebrick {
  background-color: #cd2626;
}

#pane a.pink {
  background-color: #cd6090;
}

#pane a.khaki {
  background-color: #8b864e;
}

#pane a.mistyrose {
  background-color: #a4918f;
}

#pane a.green {
  background-color: #5faa5f;
}

#pane a.peach {
  background-color: #b49a84;
}

#pane a.plum {
  background-color: #8b668b;
}

#pane a.blue {
  background-color: #4f94cd;
}

#pane a.gray {
  background-color: #708090;
}

#pane a.salmon {
  background-color: #8b4c39;
}