#pane {
  position: fixed;
  width: 238px;
  right: -278px;
  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 {
  right: 0;
}

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

#pane .toggle-button {
  position: absolute;
  left: -50px;
  top: 0;
  width: 50px;
  height: 50px;
  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: 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:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  bottom: 0;
  border-left: 15px solid transparent;
  border-top: 15px solid transparent;
  border-right: 15px solid transparent;
}

#pane a.honey-comb {
  background-color: #eecd5f;
}

#pane a.honey-comb:before {
  border-right-color: #1f1719;
}

#pane a.neon-night {
  background-color: #b8d20b;
}

#pane a.neon-night:before {
  border-right-color: #231b12;
}

#pane a.shadow-mist {
  background-color: #60b3c1;
}

#pane a.shadow-mist:before {
  border-right-color: #2a3132;
}

#pane a.poppy-sea {
  background-color: #ff420e;
}

#pane a.poppy-sea:before {
  border-right-color: #111415;
}

#pane a.desert-crevice {
  background-color: #eeb15b;
}

#pane a.desert-crevice:before {
  border-right-color: #49352a;
}

#pane a.sunflower-field {
  background-color: #fc0;
}

#pane a.sunflower-field:before {
  border-right-color: #080808;
}

#pane a.berry-branch {
  background-color: #ec96a4;
}

#pane a.berry-branch:before {
  border-right-color: #211e21;
}

#pane a.tomato-slate {
  background-color: #ff452a;
}

#pane a.tomato-slate:before {
  border-right-color: #211f22;
}

#pane a.blueberry-midnight {
  background-color: #5fa0ff;
}

#pane a.blueberry-midnight:before {
  border-right-color: #161616;
}

#pane a.banana-republic {
  background-color: #fed95b;
}

#pane a.banana-republic:before {
  border-right-color: #211f22;
}

#pane a.urban-living {
  background-color: #a8d433;
}

#pane a.urban-living:before {
  border-right-color: #222020;
}

#pane a.fuel-bucket {
  background-color: #eb87bf;
}

#pane a.fuel-bucket:before {
  border-right-color: #262626;
}

#pane a.mint-chocolate {
  background-color: #b3ffe1;
}

#pane a.mint-chocolate:before {
  border-right-color: #3d3533;
}

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

#pane a.plum-coral:before {
  border-right-color: #716674;
}

#pane a.blue-lagoon {
  background-color: #6fc6be;
}

#pane a.blue-lagoon:before {
  border-right-color: #eaf2f4;
}

#pane a.honey-moon {
  background-color: #fcb328;
}

#pane a.honey-moon:before {
  border-right-color: #fcfcfc;
}

#pane a.grassy-acres {
  background-color: #90c446;
}

#pane a.grassy-acres:before {
  border-right-color: #fff;
}

#pane a.tomato-box {
  background-color: #d0633a;
}

#pane a.tomato-box:before {
  border-right-color: #e8dec5;
}

#pane a.dog-shampoo {
  background-color: #de3964;
}

#pane a.dog-shampoo:before {
  border-right-color: #e7eded;
}

#pane a.orange-juice {
  background-color: #ff822e;
}

#pane a.orange-juice:before {
  border-right-color: #f5f5f5;
}

#pane a.cocoa-cup {
  background-color: #937b61;
}

#pane a.cocoa-cup:before {
  border-right-color: #efefef;
}

#pane a.violet-flower {
  background-color: #4d59a1;
}

#pane a.violet-flower:before {
  border-right-color: #efeeec;
}

#pane a.red-clay {
  background-color: #a23620;
}

#pane a.red-clay:before {
  border-right-color: #f7f7f7;
}

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

#pane a.blue-sky:before {
  border-right-color: #fff;
}

#pane a.golden-coast {
  background-color: #c89d0f;
}

#pane a.golden-coast:before {
  border-right-color: #fff5d5;
}

#pane a.green-pear {
  background-color: #729e3c;
}

#pane a.green-pear:before {
  border-right-color: #fbfbfe;
}

#pane a.late-sunset {
  background-color: #c0491e;
}

#pane a.late-sunset:before {
  border-right-color: #ede8e2;
}

#pane a.tasty-fish {
  background-color: #c1a35b;
}

#pane a.tasty-fish:before {
  border-right-color: #fdfcf8;
}