#styles {
  position: fixed;
  top: 160px;
  left: 0;
  background: #231F20;
  color: #fff;
  padding: 10px 0 0 10px;
  width: 120px;
  z-index: 100;
}
#styles h2 {
  font-size: 1.25em;
  margin-top: 0;
}
#stylesOpen {
  position: absolute;
  right: -35px;
  top: 0;
  font-size: 25px;
  line-height: 35px;
  width: 35px;
  height: 35px;
  background: #231F20;
  text-align: center;
  cursor: pointer;
}
#stylesOpen:hover {
  color: #fff568;
}
#styles h3 {
  font-size: 1em;
  clear: both;
}
#styles ul {
  list-style: none;
  margin: 0;
  clear: both;
}
#styles li {
  width: 30px;
  height: 30px;
  margin: 0 10px 10px 0;
  float: left;
}
#styles li a {
  display: block;
  text-indent: -9999px;
  width: 100%;
  height: 100%;
}
#color-default { background: #F9F9F1; }
#color-green { background-color: #c4df9b; }
#color-blue { background-color: #6dd0f6; }
#color-white { background-color: #fff; border: 4px solid #0088cc; width: 22px !important; height: 22px !important; }
#color-pink { background-color: #f49ac1; }
#color-yellow { background-color: #ffb900; }
#patternSwitch li {
  background-color: #fff;
}
#pattern1 { background-image: url(../img/pattern1-black.png); }
#pattern2 { background-image: url(../img/pattern2-black.png); }
#pattern3 { background-image: url(../img/pattern3-black.png); }
#pattern4 { background-image: url(../img/pattern4-black.png); }
#pattern5 { background-image: url(../img/pattern5-black.png); }
#pattern6 { background-image: url(../img/pattern6-black.png); }