#pane {
  position: fixed;
  width: 96px;
  left: -136px;
  top: 10%;
  padding: 20px;
  z-index: 999;
  background: #000;
  background: rgba(0, 0, 0, 0.9);
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  transition: all .4s ease;
}

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

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

#pane .toggle-button {
  position: absolute;
  right: -40px;
  top: 0;
  width: 40px;
  height: 40px;
  text-align: center;
  cursor: pointer;
  background: #000;
  background: rgba(0, 0, 0, 0.9);
}

#pane .toggle-button:before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 11px 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: 30px;
  left: -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: 20px;
  height: 20px;
  padding: 2px;
}

#pane a {
  display: block;
  height: 20px;
  border: 0;
  -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.antique-theme {
  background-color: #cdc0b0;
}

#pane a.aquamarine-theme {
  background-color: #76eec6;
}

#pane a.azure-theme {
  background-color: #838b8b;
}

#pane a.bisque-theme {
  background-color: #cdb79e;
}

#pane a.blue-theme {
  background-color: #1d679c;
}

#pane a.brown-theme {
  background-color: #8b4513;
}

#pane a.chartreuse-theme {
  background-color: #66cd00;
}

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

#pane a.cornflower-theme {
  background-color: #6495ed;
}

#pane a.cyan-theme {
  background-color: #00cdcd;
}

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

#pane a.gold-theme {
  background-color: #eead0e;
}

#pane a.green-theme {
  background-color: #008b00;
}

#pane a.khaki-theme {
  background-color: #bdb76b;
}

#pane a.lavender-theme {
  background-color: #cdc1c5;
}

#pane a.magenta-theme {
  background-color: #ee00ee;
}

#pane a.maroon-theme {
  background-color: #ff34b3;
}

#pane a.olive-theme {
  background-color: #a2cd5a;
}

#pane a.orange-theme {
  background-color: #fc0;
}

#pane a.orchid-theme {
  background-color: #bf3eff;
}

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

#pane a.purple-theme {
  background-color: #9370db;
}

#pane a.red-theme {
  background-color: #ff4040;
}

#pane a.salad-theme {
  background-color: #9acd32;
}

#pane a.salmon-theme {
  background-color: #e9967a;
}

#pane a.sienna-theme {
  background-color: #ff8247;
}

#pane a.sky-theme {
  background-color: #87ceff;
}

#pane a.tan-theme {
  background-color: #ffa54f;
}

#pane a.tomato-theme {
  background-color: #ff6347;
}

#pane a.turquoise-theme {
  background-color: #00ced1;
}

#pane a.violet-theme {
  background-color: #9400d3;
}

#pane a.wood-theme {
  background-color: #cdaa7d;
}